/* ============================================================
HAVENA PRO — GLOBAL STYLESHEET
Luxury Real Estate WordPress Theme (Frontend)
Theme: Havena Pro · Author: Havenlytics · https://havenlytics.com
Prefix: havena-pro-
============================================================ */
/* ------------------------------------------------------------
1. DESIGN TOKENS
------------------------------------------------------------ */
:root {
/* Canonical global color roles. */
--havena-pro-color-primary: #2E6BFF;
--havena-pro-color-primary-rgb: 46, 107, 255;
--havena-pro-color-primary-hover: #1B54E8;
--havena-pro-color-primary-soft: #EAF0FF;
--havena-pro-color-accent: #C8A96A;
--havena-pro-color-accent-hover: #B08F4C;
--havena-pro-color-accent-soft: #F7F0E3;
--havena-pro-color-text: #0B1524;
--havena-pro-color-muted: #5C6B84;
/* AA normal-text on white (~4.5:1). Was #8B97AB (~2.9:1). Dark mode remaps below. */
--havena-pro-color-muted-light: #667890;
--havena-pro-color-background: #FFFFFF;
--havena-pro-color-surface: #F6F8FB;
--havena-pro-color-surface-muted: #EEF2F8;
--havena-pro-color-border: #E7EBF2;
--havena-pro-color-border-on-dark: rgba(255, 255, 255, 0.1);
--havena-pro-color-success: #12A150;
--havena-pro-color-error: #E5484D;
--havena-pro-color-warning: #F5A623;
--havena-pro-color-secondary: #0A1628;
--havena-pro-color-heading: #0B1524;
--havena-pro-color-dark-background: #0A1628;
--havena-pro-color-dark-text: #FFFFFF;
--havena-pro-color-dark-950: #050B16;
--havena-pro-color-dark-900: #0A1628;
--havena-pro-color-dark-800: #0E1F38;
--havena-pro-color-dark-700: #15304F;
--havena-pro-color-dark-600: #1E4066;
/* Canonical typography roles. */
--havena-pro-font-family-heading: "Marcellus", "Times New Roman", serif;
--havena-pro-font-family-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--havena-pro-type-size-hero: clamp(2.6rem, 5.4vw, 4.35rem);
--havena-pro-type-size-h1: clamp(2.2rem, 4vw, 3.4rem);
--havena-pro-type-size-h2: clamp(1.85rem, 3vw, 2.65rem);
--havena-pro-type-size-h3: clamp(1.35rem, 2vw, 1.7rem);
--havena-pro-type-size-h4: 1.185rem;
--havena-pro-type-size-h5: 1.05rem;
--havena-pro-type-size-h6: 0.95rem;
--havena-pro-type-size-body: 1rem;
--havena-pro-type-size-small: 0.885rem;
--havena-pro-type-size-label: 0.775rem;
--havena-pro-type-size-nav: 0.95rem;
--havena-pro-type-size-button: 0.95rem;
--havena-pro-type-weight-body: 400;
--havena-pro-type-weight-heading: 400;
--havena-pro-type-weight-button: 600;
--havena-pro-type-weight-label: 700;
--havena-pro-type-weight-nav: 600;
--havena-pro-type-line-body: 1.65;
--havena-pro-type-line-heading: 1.16;
--havena-pro-type-line-button: 1;
--havena-pro-type-line-prose: 1.75;
--havena-pro-type-tracking-body: 0;
--havena-pro-type-tracking-heading: -0.01em;
--havena-pro-type-tracking-label: 0.1em;
--havena-pro-type-tracking-button: 0.015em;
/* Canonical layout and spacing roles. */
--havena-pro-layout-container: 1280px;
--havena-pro-layout-container-wide: 1440px;
--havena-pro-layout-gutter: clamp(1.25rem, 4vw, 2.5rem);
--havena-pro-layout-section-space: clamp(4.5rem, 8vw, 7.5rem);
--havena-pro-layout-sidebar: 320px;
--havena-pro-layout-content-sidebar-gap: 2.5rem;
--havena-pro-drawer-width: 400px;
--havena-pro-map-min-height: 560px;
--havena-pro-space-xs: 0.5rem;
--havena-pro-space-sm: 0.75rem;
--havena-pro-space-md: 1rem;
--havena-pro-space-lg: 1.5rem;
--havena-pro-space-xl: 2.5rem;
/* Canonical surfaces, controls, radius, and shadow roles. */
--havena-pro-surface: var(--havena-pro-color-background);
--havena-pro-surface-muted: var(--havena-pro-color-surface);
--havena-pro-card-border: var(--havena-pro-color-border);
--havena-pro-button-primary-bg: var(--havena-pro-color-primary);
--havena-pro-button-primary-text: #FFFFFF;
--havena-pro-button-secondary-bg: var(--havena-pro-color-accent);
--havena-pro-button-secondary-text: var(--havena-pro-color-dark-950);
--havena-pro-button-outline-border: var(--havena-pro-color-border);
--havena-pro-button-padding: 0.95rem 1.9rem;
--havena-pro-button-padding-sm: 0.68rem 1.3rem;
--havena-pro-button-padding-lg: 1.15rem 2.4rem;
--havena-pro-button-radius: var(--havena-pro-radius-pill);
--havena-pro-form-background: var(--havena-pro-color-background);
--havena-pro-form-border: var(--havena-pro-color-border);
--havena-pro-form-focus: var(--havena-pro-color-primary);
--havena-pro-form-focus-ring: 0 0 0 4px rgba(46, 107, 255, 0.12);
--havena-pro-form-placeholder: var(--havena-pro-color-muted-light);
--havena-pro-form-radius: var(--havena-pro-radius-sm);
--havena-pro-focus-color: var(--havena-pro-color-primary);
--havena-pro-focus-width: 2px;
--havena-pro-focus-offset: 3px;
--havena-pro-focus-radius: 4px;
--havena-pro-radius-xs: 8px;
--havena-pro-radius-sm: 12px;
--havena-pro-radius-md: 18px;
--havena-pro-radius-lg: 26px;
--havena-pro-radius-pill: 999px;
--havena-pro-shadow-xs: 0 1px 2px rgba(10, 22, 40, 0.06);
--havena-pro-shadow-sm: 0 4px 14px rgba(10, 22, 40, 0.07);
--havena-pro-shadow-md: 0 14px 40px rgba(10, 22, 40, 0.1);
--havena-pro-shadow-lg: 0 28px 70px rgba(10, 22, 40, 0.16);
/* Legacy presentation aliases retain the frozen component contract. */
--havena-pro-navy-950: var(--havena-pro-color-dark-950);
--havena-pro-navy-900: var(--havena-pro-color-dark-900);
--havena-pro-navy-800: var(--havena-pro-color-dark-800);
--havena-pro-navy-700: var(--havena-pro-color-dark-700);
--havena-pro-navy-600: var(--havena-pro-color-dark-600);
--havena-pro-blue: var(--havena-pro-color-primary);
--havena-pro-blue-deep: var(--havena-pro-color-primary-hover);
--havena-pro-blue-soft: var(--havena-pro-color-primary-soft);
--havena-pro-gold: var(--havena-pro-color-accent);
--havena-pro-gold-deep: var(--havena-pro-color-accent-hover);
--havena-pro-gold-soft: var(--havena-pro-color-accent-soft);
--havena-pro-ink: var(--havena-pro-color-text);
--havena-pro-slate: var(--havena-pro-color-muted);
--havena-pro-slate-light: var(--havena-pro-color-muted-light);
--havena-pro-line: var(--havena-pro-color-border);
--havena-pro-line-dark: var(--havena-pro-color-border-on-dark);
--havena-pro-bg: var(--havena-pro-color-background);
--havena-pro-bg-soft: var(--havena-pro-color-surface);
--havena-pro-bg-mist: var(--havena-pro-color-surface-muted);
--havena-pro-success: var(--havena-pro-color-success);
--havena-pro-danger: var(--havena-pro-color-error);
--havena-pro-warning: var(--havena-pro-color-warning);
--havena-pro-font-display: var(--havena-pro-font-family-heading);
--havena-pro-font-body: var(--havena-pro-font-family-body);
--havena-pro-fs-hero: var(--havena-pro-type-size-hero);
--havena-pro-fs-h1: var(--havena-pro-type-size-h1);
--havena-pro-fs-h2: var(--havena-pro-type-size-h2);
--havena-pro-fs-h3: var(--havena-pro-type-size-h3);
--havena-pro-fs-h4: var(--havena-pro-type-size-h4);
--havena-pro-fs-h5: var(--havena-pro-type-size-h5);
--havena-pro-fs-h6: var(--havena-pro-type-size-h6);
--havena-pro-fs-body: var(--havena-pro-type-size-body);
--havena-pro-fs-sm: var(--havena-pro-type-size-small);
--havena-pro-fs-xs: var(--havena-pro-type-size-label);
--havena-pro-radius: var(--havena-pro-radius-md);
--havena-pro-shadow: var(--havena-pro-shadow-md);
--havena-pro-shadow-blue: 0 12px 28px rgba(46, 107, 255, 0.32);
--havena-pro-shadow-gold: 0 12px 28px rgba(200, 169, 106, 0.35);
/* Canonical link roles. */
--havena-pro-link-color: var(--havena-pro-color-primary);
--havena-pro-link-hover: var(--havena-pro-color-primary-hover);
--havena-pro-link-focus: var(--havena-pro-color-primary);
--havena-pro-link-active: var(--havena-pro-color-primary-hover);
--havena-pro-link-visited: var(--havena-pro-color-primary);
/* Extended state colors. */
--havena-pro-color-primary-active: #1449CC;
--havena-pro-color-secondary-hover: #0E1F38;
--havena-pro-color-secondary-active: #15304F;
--havena-pro-color-accent-active: #9A7A3E;
--havena-pro-color-border-hover: var(--havena-pro-color-secondary);
--havena-pro-color-border-focus: var(--havena-pro-color-primary);
--havena-pro-color-dark-muted: rgba(255, 255, 255, 0.62);
--havena-pro-color-dark-muted-soft: rgba(255, 255, 255, 0.55);
--havena-pro-color-dark-border: rgba(255, 255, 255, 0.12);
--havena-pro-color-dark-faint: rgba(255, 255, 255, 0.14);
--havena-pro-color-dark-ghost: rgba(255, 255, 255, 0.05);
--havena-pro-color-accent-overlay: rgba(200, 169, 106, 0.16);
/* Extended typography weight roles. */
--havena-pro-type-weight-body-strong: 700;
--havena-pro-type-weight-card-title: 700;
--havena-pro-type-weight-card-value: 800;
--havena-pro-type-weight-card-label: 400;
/* Display titles (dashboard.html h1–h5): not Theme Options heading weight. */
--havena-pro-type-weight-display: 400;
/* Component / surface roles. */
--havena-pro-card-background: #FFFFFF;
--havena-pro-card-text: var(--havena-pro-color-text);
--havena-pro-card-shadow: var(--havena-pro-shadow-sm);
--havena-pro-overlay-dark: rgba(5, 11, 22, 0.72);
--havena-pro-overlay-scrim: rgba(5, 11, 22, 0.55);
--havena-pro-overlay-light: rgba(255, 255, 255, 0.92);
--havena-pro-overlay-frost: rgba(255, 255, 255, 0.94);
--havena-pro-overlay-frost-strong: rgba(255, 255, 255, 0.96);
/* Motion and legacy layout aliases. */
--havena-pro-ease: cubic-bezier(0.22, 1, 0.36, 1);
--havena-pro-speed: 0.35s;
--havena-pro-speed-fast: 0.2s;
--havena-pro-speed-slow: 0.9s;
--havena-pro-container: var(--havena-pro-layout-container);
--havena-pro-container-wide: var(--havena-pro-layout-container-wide);
--havena-pro-gutter: var(--havena-pro-layout-gutter);
--havena-pro-section-y: var(--havena-pro-layout-section-space);
--havena-pro-header-h: 84px;
}
/* ------------------------------------------------------------
2. RESET & BASE
------------------------------------------------------------ */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--havena-pro-font-family-body);
font-size: var(--havena-pro-type-size-body);
font-weight: var(--havena-pro-type-weight-body);
line-height: var(--havena-pro-type-line-body);
letter-spacing: var(--havena-pro-type-tracking-body);
color: var(--havena-pro-color-text);
background: var(--havena-pro-color-background);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
body.havena-pro-no-scroll {
overflow: hidden;
}
img,
svg,
video {
max-width: 100%;
display: block;
}
img {
height: auto;
}
/*
* Classic Stories avatar — must beat Elementor frontend.css
* `.elementor img { height:auto; max-width:100%; border:none; border-radius:0 }`
* (specificity 0,1,1). main.css loads BEFORE elementor-frontend in the editor
* iframe, so equal-specificity Classic rules lose and avatars paint rectangular
* until home.css arrives. Extra parent class → 0,2,1 so this wins by cascade
* without !important and without a global Elementor img override.
*/
.havena-pro-testimonial .havena-pro-testimonial__author img,
.havena-pro-testimonial .havena-pro-testimonial__author-photo {
width: 48px;
height: 48px;
min-width: 48px;
min-height: 48px;
max-width: 48px;
max-height: 48px;
aspect-ratio: 1 / 1;
border-radius: 50%;
object-fit: cover;
object-position: center;
border: 2px solid rgba(200, 169, 106, 0.5);
box-shadow: none;
flex: 0 0 48px;
flex-shrink: 0;
display: block;
overflow: hidden;
clip-path: circle(50%);
box-sizing: border-box;
}
/*
* Classic Hero trust avatars + bg — same Elementor conflict as Stories:
* `.elementor img { height:auto; border:none; border-radius:0 }` (0,1,1)
* can load AFTER home.css on the editor canvas. Parent-scoped 0,2,1 locks
* Classic values from home.css without touching Elementor globals.
*/
.havena-pro-hero .havena-pro-hero__rating-avatars img {
width: 30px;
height: 30px;
border-radius: 50%;
border: 2px solid var(--havena-pro-navy-900);
object-fit: cover;
object-position: center;
display: block;
box-sizing: border-box;
}
.havena-pro-hero .havena-pro-hero__bg img {
width: 100%;
height: 100%;
object-fit: cover;
box-sizing: border-box;
}
:where(a) {
color: var(--havena-pro-link-color);
text-decoration: none;
transition: color var(--havena-pro-speed-fast) var(--havena-pro-ease);
}
:where(a:visited) {
color: var(--havena-pro-link-visited);
}
:where(a:hover) {
color: var(--havena-pro-link-hover);
}
:where(a:focus),
:where(a:focus-visible) {
color: var(--havena-pro-link-focus);
}
:where(a:active) {
color: var(--havena-pro-link-active);
}
/* Component exceptions keep their current inherited or local colors. */
.custom-logo-link,
.havena-pro-property__title a,
.havena-pro-post__title a,
.havena-pro-agent__name a,
.havena-pro-property__extra a,
.havena-pro-property__link,
.havena-pro-footer a {
color: inherit;
}
ul,
ol {
list-style: none;
}
button,
input,
select,
textarea {
font: inherit;
color: inherit;
}
button {
background: none;
border: 0;
cursor: pointer;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--havena-pro-font-family-heading);
font-weight: var(--havena-pro-type-weight-heading);
line-height: var(--havena-pro-type-line-heading);
letter-spacing: var(--havena-pro-type-tracking-heading);
color: var(--havena-pro-color-text);
}
h1 { font-size: var(--havena-pro-type-size-h1); }
h2 { font-size: var(--havena-pro-type-size-h2); }
h3 { font-size: var(--havena-pro-type-size-h3); }
h4 { font-size: var(--havena-pro-type-size-h4); }
h5 { font-size: var(--havena-pro-type-size-h5); }
h6 { font-size: var(--havena-pro-type-size-h6); }
::selection {
background: var(--havena-pro-color-primary);
color: var(--havena-pro-color-dark-text);
}
:focus-visible {
outline: var(--havena-pro-focus-width) solid var(--havena-pro-focus-color);
outline-offset: var(--havena-pro-focus-offset);
border-radius: var(--havena-pro-focus-radius);
}
.havena-pro-skip-link {
position: fixed;
top: -100px;
inset-inline-start: 1rem;
z-index: 3000;
background: var(--havena-pro-navy-900);
color: var(--havena-pro-color-dark-text);
padding: 0.75rem 1.25rem;
border-radius: var(--havena-pro-radius-sm);
transition: top 0.25s var(--havena-pro-ease);
}
.havena-pro-skip-link:focus {
top: 1rem;
}
/* ------------------------------------------------------------
3. LAYOUT HELPERS
------------------------------------------------------------ */
.havena-pro-container {
width: min(var(--havena-pro-container), 100% - var(--havena-pro-gutter) * 2);
margin-inline: auto;
}
.havena-pro-container--wide {
width: min(var(--havena-pro-container-wide), 100% - var(--havena-pro-gutter) * 2);
}
.havena-pro-section {
padding-block: var(--havena-pro-section-y);
position: relative;
}
.havena-pro-section--soft {
background: var(--havena-pro-bg-soft);
}
.havena-pro-section--dark {
background: var(--havena-pro-navy-900);
color: var(--havena-pro-color-dark-muted);
}
.havena-pro-section--dark h1,
.havena-pro-section--dark h2,
.havena-pro-section--dark h3,
.havena-pro-section--dark h4 {
color: var(--havena-pro-color-dark-text);
}
/* Section heading pattern */
.havena-pro-section-head {
max-width: 720px;
margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.havena-pro-section-head--center {
margin-inline: auto;
text-align: center;
}
.havena-pro-section-head--split {
max-width: none;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 2rem;
flex-wrap: wrap;
}
.havena-pro-section-head--split > div {
max-width: 640px;
}
.havena-pro-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-size: var(--havena-pro-fs-xs);
font-weight: var(--havena-pro-type-weight-label);
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--havena-pro-gold-deep);
margin-bottom: 1.1rem;
}
.havena-pro-eyebrow::before {
content: "";
width: 34px;
height: 1px;
background: currentColor;
opacity: 0.7;
}
.havena-pro-section-head--center .havena-pro-eyebrow::after {
content: "";
width: 34px;
height: 1px;
background: currentColor;
opacity: 0.7;
}
.havena-pro-section--dark .havena-pro-eyebrow {
color: var(--havena-pro-gold);
}
.havena-pro-section-title {
font-size: var(--havena-pro-fs-h2);
margin-bottom: 1rem;
}
.havena-pro-section-title em {
font-style: italic;
color: var(--havena-pro-gold-deep);
}
.havena-pro-section--dark .havena-pro-section-title em {
color: var(--havena-pro-gold);
}
.havena-pro-section-sub {
color: var(--havena-pro-slate);
font-size: 1.04rem;
max-width: 60ch;
}
.havena-pro-section--dark .havena-pro-section-sub {
color: var(--havena-pro-color-dark-muted);
}
/* Grid utilities */
.havena-pro-grid {
display: grid;
gap: 1.75rem;
}
.havena-pro-grid--1 { grid-template-columns: minmax(0, 1fr); }
.havena-pro-grid--2 { grid-template-columns: repeat(2, 1fr); }
.havena-pro-grid--3 { grid-template-columns: repeat(3, 1fr); }
.havena-pro-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) {
.havena-pro-grid--4 { grid-template-columns: repeat(2, 1fr); }
.havena-pro-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.havena-pro-grid--4,
.havena-pro-grid--3,
.havena-pro-grid--2,
.havena-pro-grid--1 { grid-template-columns: 1fr; }
}
/* ------------------------------------------------------------
4. BUTTONS
------------------------------------------------------------ */
.havena-pro-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
padding: var(--havena-pro-button-padding);
border-radius: var(--havena-pro-button-radius);
font-weight: var(--havena-pro-type-weight-button);
font-size: var(--havena-pro-type-size-button);
letter-spacing: var(--havena-pro-type-tracking-button);
line-height: var(--havena-pro-type-line-button);
white-space: nowrap;
border: 1.5px solid transparent;
transition: transform var(--havena-pro-speed-fast) var(--havena-pro-ease),
box-shadow var(--havena-pro-speed) var(--havena-pro-ease),
background var(--havena-pro-speed-fast) var(--havena-pro-ease),
color var(--havena-pro-speed-fast) var(--havena-pro-ease),
border-color var(--havena-pro-speed-fast) var(--havena-pro-ease);
}
.havena-pro-btn svg {
width: 17px;
height: 17px;
flex: none;
transition: transform var(--havena-pro-speed) var(--havena-pro-ease);
}
.havena-pro-btn:hover svg {
transform: translateX(3px);
}
.havena-pro-btn:active {
transform: scale(0.97);
}
.havena-pro-btn--primary {
background: var(--havena-pro-button-primary-bg);
color: var(--havena-pro-button-primary-text);
box-shadow: var(--havena-pro-shadow-blue);
}
.havena-pro-btn--primary:hover {
background: var(--havena-pro-color-primary-hover);
transform: translateY(-2px);
}
.havena-pro-btn--gold {
background: linear-gradient(120deg, #D9BC82, var(--havena-pro-gold) 45%, var(--havena-pro-gold-deep));
color: var(--havena-pro-navy-950);
box-shadow: var(--havena-pro-shadow-gold);
}
.havena-pro-btn--gold:hover {
transform: translateY(-2px);
box-shadow: 0 18px 38px rgba(200, 169, 106, 0.45);
}
.havena-pro-btn--dark {
background: var(--havena-pro-navy-900);
color: var(--havena-pro-button-primary-text);
}
.havena-pro-btn--dark:hover {
background: var(--havena-pro-navy-700);
transform: translateY(-2px);
}
.havena-pro-btn--outline {
border-color: var(--havena-pro-button-outline-border);
color: var(--havena-pro-color-text);
background: transparent;
}
.havena-pro-btn--outline:hover {
border-color: var(--havena-pro-navy-900);
background: var(--havena-pro-navy-900);
color: var(--havena-pro-button-primary-text);
}
.havena-pro-btn--outline-light {
border-color: rgba(255, 255, 255, 0.28);
color: var(--havena-pro-color-dark-text);
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(6px);
}
.havena-pro-btn--outline-light:hover {
background: var(--havena-pro-color-background);
border-color: var(--havena-pro-color-background);
color: var(--havena-pro-navy-900);
}
.havena-pro-btn--white {
background: var(--havena-pro-color-background);
color: var(--havena-pro-navy-900);
box-shadow: var(--havena-pro-shadow-sm);
}
.havena-pro-btn--white:hover {
transform: translateY(-2px);
box-shadow: var(--havena-pro-shadow);
}
.havena-pro-btn--sm {
padding: var(--havena-pro-button-padding-sm);
font-size: var(--havena-pro-type-size-small);
}
.havena-pro-btn--lg {
padding: var(--havena-pro-button-padding-lg);
font-size: 1.02rem;
}
.havena-pro-btn--block {
width: 100%;
}
.havena-pro-btn:disabled,
.havena-pro-btn[aria-disabled="true"] {
opacity: 0.55;
cursor: not-allowed;
transform: none;
}
/* Text link with arrow */
.havena-pro-link-arrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-weight: var(--havena-pro-type-weight-button);
font-size: var(--havena-pro-type-size-button);
color: var(--havena-pro-color-primary);
}
.havena-pro-link-arrow svg {
width: 16px;
height: 16px;
transition: transform var(--havena-pro-speed) var(--havena-pro-ease);
}
.havena-pro-link-arrow:hover svg {
transform: translateX(4px);
}
/* Icon button */
.havena-pro-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1.5px solid var(--havena-pro-form-border);
background: var(--havena-pro-form-background);
color: var(--havena-pro-color-text);
transition: background-color var(--havena-pro-speed-fast) var(--havena-pro-ease),
border-color var(--havena-pro-speed-fast) var(--havena-pro-ease),
color var(--havena-pro-speed-fast) var(--havena-pro-ease),
transform var(--havena-pro-speed-fast) var(--havena-pro-ease);
}
.havena-pro-icon-btn svg {
width: 19px;
height: 19px;
}
.havena-pro-icon-btn:hover {
background: var(--havena-pro-navy-900);
border-color: var(--havena-pro-navy-900);
color: var(--havena-pro-button-primary-text);
transform: translateY(-2px);
}
/* ------------------------------------------------------------
5. BADGES & CHIPS
------------------------------------------------------------ */
.havena-pro-badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.38rem 0.85rem;
border-radius: var(--havena-pro-radius-pill);
font-size: var(--havena-pro-fs-xs);
font-weight: var(--havena-pro-type-weight-label);
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1.2;
}
.havena-pro-badge--sale { background: var(--havena-pro-navy-900); color: var(--havena-pro-color-dark-text); }
.havena-pro-badge--rent { background: var(--havena-pro-blue); color: var(--havena-pro-color-dark-text); }
.havena-pro-badge--taxonomy {
background: var(--havena-pro-navy-800);
color: var(--havena-pro-color-dark-text);
letter-spacing: var(--havena-pro-type-tracking-label);
}
.havena-pro-badge--seasonal {
background: var(--havena-pro-gold-deep);
color: var(--havena-pro-navy-950);
}
.havena-pro-badge--featured {
background: linear-gradient(120deg, #E3CB96, var(--havena-pro-gold));
color: var(--havena-pro-navy-950);
}
.havena-pro-badge--new { background: var(--havena-pro-success); color: var(--havena-pro-color-dark-text); }
.havena-pro-badge--soft { background: var(--havena-pro-blue-soft); color: var(--havena-pro-blue-deep); }
.havena-pro-badge--glass {
background: rgba(10, 22, 40, 0.55);
color: var(--havena-pro-color-dark-text);
backdrop-filter: blur(8px);
}
/* Side note — small informational callout (auth pages, property
details sidebars). Shared component: lives here so every bundle
that renders it gets the styles. */
.havena-pro-side-note {
display: flex;
gap: 0.8rem;
font-size: var(--havena-pro-fs-xs);
color: var(--havena-pro-slate);
background: var(--havena-pro-gold-soft);
border-radius: var(--havena-pro-radius-sm);
padding: 1rem 1.1rem;
}
.havena-pro-side-note svg {
width: 20px;
height: 20px;
flex: none;
color: var(--havena-pro-gold-deep);
}
/* ------------------------------------------------------------
6. FORMS
------------------------------------------------------------ */
.havena-pro-field {
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.havena-pro-field label {
font-size: var(--havena-pro-type-size-label);
font-weight: var(--havena-pro-type-weight-label);
letter-spacing: var(--havena-pro-type-tracking-label);
text-transform: uppercase;
color: var(--havena-pro-color-muted);
}
.havena-pro-input,
.havena-pro-select,
.havena-pro-textarea {
width: 100%;
padding: 0.9rem 1.15rem;
border: 1.5px solid var(--havena-pro-form-border);
border-radius: var(--havena-pro-form-radius);
background: var(--havena-pro-form-background);
font-size: var(--havena-pro-type-size-button);
color: var(--havena-pro-color-text);
transition: border-color var(--havena-pro-speed-fast) var(--havena-pro-ease),
box-shadow var(--havena-pro-speed-fast) var(--havena-pro-ease);
appearance: none;
}
.havena-pro-textarea {
min-height: 130px;
resize: vertical;
line-height: 1.6;
}
.havena-pro-input::placeholder,
.havena-pro-textarea::placeholder {
color: var(--havena-pro-form-placeholder);
}
.havena-pro-input:focus,
.havena-pro-select:focus,
.havena-pro-textarea:focus {
outline: var(--havena-pro-focus-width) solid var(--havena-pro-form-focus);
outline-offset: 2px;
border-color: var(--havena-pro-form-focus);
box-shadow: var(--havena-pro-form-focus-ring);
}
.havena-pro-input:disabled,
.havena-pro-select:disabled,
.havena-pro-textarea:disabled {
opacity: 0.55;
cursor: not-allowed;
background: var(--havena-pro-color-surface);
}
.havena-pro-input[aria-invalid="true"],
.havena-pro-select[aria-invalid="true"],
.havena-pro-textarea[aria-invalid="true"] {
border-color: var(--havena-pro-color-error);
}
.havena-pro-select-wrap {
position: relative;
}
.havena-pro-select-wrap::after {
content: "";
position: absolute;
right: 1.1rem;
top: 50%;
width: 9px;
height: 9px;
border-right: 2px solid var(--havena-pro-slate);
border-bottom: 2px solid var(--havena-pro-slate);
transform: translateY(-70%) rotate(45deg);
pointer-events: none;
}
/* ------------------------------------------------------------
Classic custom select (accessible listbox)
------------------------------------------------------------ */
.havena-pro-classic-select.is-enhanced {
display: block;
position: relative;
width: 100%;
}
.havena-pro-classic-select.is-enhanced::after {
display: none;
}
.havena-pro-classic-select__native {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
opacity: 0 !important;
pointer-events: none !important;
}
.havena-pro-classic-select__trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.65rem;
width: 100%;
margin: 0;
padding: 0;
border: 0;
background: transparent;
color: inherit;
font: inherit;
font-size: 0.96rem;
font-weight: var(--havena-pro-type-weight-button);
line-height: 1.35;
text-align: left;
cursor: pointer;
}
.havena-pro-classic-select__trigger:focus {
outline: none;
}
.havena-pro-classic-select__trigger:focus-visible {
outline: 2px solid var(--havena-pro-navy-900);
outline-offset: 2px;
border-radius: 2px;
}
.havena-pro-classic-select__value {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--havena-pro-ink);
}
.havena-pro-classic-select__chevron {
flex: 0 0 auto;
width: 9px;
height: 9px;
border-right: 2px solid var(--havena-pro-slate-light, #8b93a7);
border-bottom: 2px solid var(--havena-pro-slate-light, #8b93a7);
transform: translateY(-15%) rotate(45deg);
transition: transform 0.18s var(--havena-pro-ease, ease);
}
.havena-pro-classic-select.is-open .havena-pro-classic-select__chevron {
transform: translateY(20%) rotate(225deg);
}
.havena-pro-classic-select__menu {
margin: 0;
padding: 0.4rem;
list-style: none;
background: var(--havena-pro-card-background, #fff);
border: 1px solid var(--havena-pro-line, #e6e9f0);
border-radius: var(--havena-pro-radius-sm, 10px);
box-shadow: var(--havena-pro-shadow-lg, 0 18px 40px rgba(15, 23, 42, 0.16));
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
opacity: 0;
transform: translateY(-4px);
visibility: hidden;
pointer-events: none;
transition: opacity 0.14s var(--havena-pro-ease, ease), transform 0.14s var(--havena-pro-ease, ease), visibility 0.14s;
}
.havena-pro-classic-select__menu.is-open {
opacity: 1;
transform: translateY(0);
visibility: visible;
pointer-events: auto;
}
.havena-pro-classic-select__option {
display: block;
width: 100%;
margin: 0;
padding: 0.7rem 0.85rem;
border-radius: calc(var(--havena-pro-radius-sm, 10px) - 2px);
color: var(--havena-pro-ink, #0f172a);
font-size: 0.94rem;
font-weight: var(--havena-pro-type-weight-nav, 500);
line-height: 1.35;
cursor: pointer;
outline: none;
}
.havena-pro-classic-select__option:hover,
.havena-pro-classic-select__option:focus {
background: rgba(15, 23, 42, 0.05);
}
.havena-pro-classic-select__option.is-selected,
.havena-pro-classic-select__option[aria-selected="true"] {
background: rgba(15, 23, 42, 0.08);
color: var(--havena-pro-navy-900, #0b1b33);
font-weight: var(--havena-pro-type-weight-button, 600);
}
.havena-pro-classic-select__option.is-disabled,
.havena-pro-classic-select__option[aria-disabled="true"] {
opacity: 0.45;
cursor: not-allowed;
}
/* ------------------------------------------------------------
6b. SURFACES
------------------------------------------------------------ */
.havena-pro-panel {
background: var(--havena-pro-surface);
border: 1px solid var(--havena-pro-card-border);
border-radius: var(--havena-pro-radius-md);
padding: clamp(1.5rem, 3vw, 2.1rem);
}
.havena-pro-panel + .havena-pro-panel {
margin-top: 1.75rem;
}
/* ------------------------------------------------------------
7. ANNOUNCEMENT BAR
------------------------------------------------------------ */
.havena-pro-announce {
background: var(--havena-pro-navy-950);
color: rgba(255, 255, 255, 0.82);
font-size: var(--havena-pro-fs-sm);
position: relative;
z-index: 1002;
}
.havena-pro-announce__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
min-height: 42px;
padding-block: 0.4rem;
min-width: 0;
}
.havena-pro-announce__msg {
display: inline-flex;
align-items: center;
gap: 0.6rem;
min-width: 0;
flex-wrap: wrap;
}
.havena-pro-announce__msg .havena-pro-badge {
background: var(--havena-pro-color-accent-overlay);
color: var(--havena-pro-gold);
}
.havena-pro-announce__msg a {
color: var(--havena-pro-color-dark-text);
font-weight: var(--havena-pro-type-weight-button);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.havena-pro-announce__msg a:hover {
border-color: var(--havena-pro-gold);
color: var(--havena-pro-gold);
}
.havena-pro-announce__meta {
display: flex;
align-items: center;
gap: 1.4rem;
}
.havena-pro-announce__meta a,
.havena-pro-announce__meta span {
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
/* H57: Meta phone/location links must not inherit global :where(a) primary blue. */
.havena-pro-announce__meta a {
color: var(--havena-pro-color-dark-text, #fff);
}
.havena-pro-announce__meta a:hover {
color: var(--havena-pro-gold);
}
.havena-pro-announce__meta svg {
width: 14px;
height: 14px;
}
/* Shared site brand social icons (Header top-bar Social mode + reusable markup). */
.havena-pro-social-links {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
justify-content: flex-start;
}
.havena-pro-social-links a {
width: 34px;
height: 34px;
border-radius: 50%;
border: 1px solid var(--havena-pro-social-border-color, color-mix(in srgb, currentColor 28%, transparent));
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--havena-pro-social-icon-color, inherit);
text-decoration: none;
transition: background-color var(--havena-pro-speed-fast, 160ms) var(--havena-pro-ease, ease),
border-color var(--havena-pro-speed-fast, 160ms) var(--havena-pro-ease, ease),
color var(--havena-pro-speed-fast, 160ms) var(--havena-pro-ease, ease);
}
.havena-pro-social-links a:hover,
.havena-pro-social-links a:focus-visible {
background: var(--havena-pro-social-icon-hover-background, var(--havena-pro-gold, #c9a227));
border-color: var(--havena-pro-social-icon-hover-border, var(--havena-pro-gold, #c9a227));
color: var(--havena-pro-social-icon-hover-color, var(--havena-pro-navy-950, #0a1628));
outline: none;
}
.havena-pro-social-links svg {
width: 14px;
height: 14px;
}
/*
* Header Social presentation contract.
* Optional Theme Options (general.social_appearance.*) emit --havena-pro-social-* on :root.
* Empty options preserve surface inheritance + approved gold/navy hover. Never assign local
* custom properties here — that would block :root overrides.
*/
.havena-pro-social-links--header a {
color: var(--havena-pro-social-icon-color, currentColor);
border-color: var(--havena-pro-social-border-color, color-mix(in srgb, currentColor 28%, transparent));
}
.havena-pro-social-links--header a:hover,
.havena-pro-social-links--header a:focus-visible {
background: var(--havena-pro-social-icon-hover-background, var(--havena-pro-gold, #c9a227));
border-color: var(--havena-pro-social-icon-hover-border, var(--havena-pro-gold, #c9a227));
color: var(--havena-pro-social-icon-hover-color, var(--havena-pro-navy-950, #0a1628));
outline: none;
}
/* H76: Social occupies the left announce msg slot; meta stays right. */
.havena-pro-announce__msg--social {
display: inline-flex;
align-items: center;
min-width: 0;
flex: 0 1 auto;
}
.havena-pro-announce__msg--social .havena-pro-social-links {
justify-content: flex-start;
}
/*
* H10: Align announce contact meta with the shared ≤1120 compact handoff.
* Phone/address stay in Theme Options — presentation only.
*/
@media (max-width: 1120px) {
.havena-pro-announce__meta {
display: none;
}
.havena-pro-announce__inner {
justify-content: center;
text-align: center;
}
.havena-pro-announce__msg--social {
justify-content: center;
}
}
@media (max-width: 390px) {
.havena-pro-announce__msg {
justify-content: center;
}
}
/* ------------------------------------------------------------
8. HEADER & NAVIGATION
------------------------------------------------------------ */
.havena-pro-header {
position: sticky;
top: 0;
z-index: 1001;
--havena-pro-nav-color: var(--havena-pro-header-text, var(--havena-pro-ink));
--havena-pro-nav-density-scale: 1;
background: var(--havena-pro-header-background, var(--havena-pro-overlay-light));
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border-bottom: 1px solid transparent;
transition: box-shadow var(--havena-pro-speed) var(--havena-pro-ease),
border-color var(--havena-pro-speed) var(--havena-pro-ease),
background var(--havena-pro-speed) var(--havena-pro-ease);
}
.havena-pro-header--nav-density-compact {
--havena-pro-nav-density-scale: 0.85;
}
.havena-pro-header--nav-density-relaxed {
--havena-pro-nav-density-scale: 1.2;
}
.havena-pro-header.havena-pro-header--static {
position: relative;
}
.havena-pro-header.is-sticky {
border-color: var(--havena-pro-line);
box-shadow: 0 8px 30px rgba(10, 22, 40, 0.07);
}
.havena-pro-header--transparent {
position: absolute;
inset-inline: 0;
width: 100%;
background: var(--havena-pro-header-background, transparent);
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-bottom-color: var(--havena-pro-color-dark-border);
}
.havena-pro-header--transparent.havena-pro-header--static {
position: absolute;
}
.havena-pro-header--transparent:not(.is-sticky) {
--havena-pro-nav-color: var(--havena-pro-header-text, var(--havena-pro-color-dark-text));
top: auto;
}
.havena-pro-header--transparent.is-sticky {
position: fixed;
top: 0;
background: var(--havena-pro-header-background, var(--havena-pro-overlay-light));
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
animation: havena-pro-header-drop 0.45s var(--havena-pro-ease);
}
@keyframes havena-pro-header-drop {
from { transform: translateY(-100%); }
to { transform: translateY(0); }
}
.havena-pro-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
height: var(--havena-pro-header-h);
min-width: 0;
}
/* Logo */
.havena-pro-logo {
display: inline-flex;
align-items: center;
gap: 0.7rem;
font-family: var(--havena-pro-font-family-heading);
font-size: 1.42rem;
letter-spacing: 0.02em;
color: var(--havena-pro-nav-color, var(--havena-pro-ink));
}
/*
* Header logos must not absorb flex overflow. Mid-device collision must
* densify or hand off to the existing burger — never squeeze the mark.
* (Drawer / footer logos keep their own rules.)
*/
.havena-pro-header .havena-pro-logo {
flex: 0 0 auto;
min-width: auto;
}
.havena-pro-logo--custom .custom-logo-link {
display: inline-flex;
align-items: center;
justify-content: center;
/* Match image max-width so intrinsic aspect sizing cannot widen the link
beyond the constrained painted logo (avoids left-biased visual center). */
max-width: min(220px, 100%, 46vw);
}
.havena-pro-header .havena-pro-logo--custom .custom-logo-link {
/* Drop percentage max-width so a shrinking flex track cannot collapse the logo. */
max-width: 220px;
flex: 0 0 auto;
}
/* P5.32 — Dual light/dark logos: stacked grid, CSS state switch (no layout shift). */
.havena-pro-logo--dual {
display: inline-grid;
align-items: center;
justify-items: start;
}
.havena-pro-logo--dual > .custom-logo-link {
grid-area: 1 / 1;
}
.havena-pro-logo--dual .custom-logo-link--light {
visibility: hidden;
opacity: 0;
pointer-events: none;
}
.havena-pro-logo--dual .custom-logo-link--default {
visibility: visible;
opacity: 1;
pointer-events: auto;
}
.havena-pro-header--transparent:not(.is-sticky) .havena-pro-logo--dual .custom-logo-link--light {
visibility: visible;
opacity: 1;
pointer-events: auto;
}
.havena-pro-header--transparent:not(.is-sticky) .havena-pro-logo--dual .custom-logo-link--default {
visibility: hidden;
opacity: 0;
pointer-events: none;
}
/* Drawer / panels stay on the dark Site Logo (light drawer surfaces). */
.havena-pro-drawer .havena-pro-logo--dual .custom-logo-link--light {
visibility: hidden;
opacity: 0;
pointer-events: none;
}
.havena-pro-drawer .havena-pro-logo--dual .custom-logo-link--default {
visibility: visible;
opacity: 1;
pointer-events: auto;
}
.havena-pro-logo--custom .custom-logo {
display: block;
width: auto;
max-width: min(220px, 100%, 46vw);
height: 52px;
object-fit: contain;
}
.havena-pro-header .havena-pro-logo--custom .custom-logo {
max-width: 220px;
width: auto;
height: 52px;
object-fit: contain;
flex-shrink: 0;
}
/* Narrow phones only — keep a viewport-relative ceiling without mid-desktop squeeze. */
@media (max-width: 390px) {
.havena-pro-header .havena-pro-logo--custom .custom-logo-link,
.havena-pro-header .havena-pro-logo--custom .custom-logo {
max-width: min(220px, 46vw);
}
}
/* Semantic stacked mark + tagline (header masthead + shared drawer). */
.havena-pro-logo--stacked {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.35rem;
text-align: left;
}
.havena-pro-logo--stacked .custom-logo-link {
display: block;
line-height: 0;
}
.havena-pro-logo--stacked small {
display: block;
max-width: 100%;
font-size: 0.55rem;
font-weight: 700;
letter-spacing: 0.28em;
line-height: 1.35;
text-transform: uppercase;
color: var(--havena-pro-slate-light, #94a3b8);
}
/*
* Dual + stacked: stacked's flex-column must NOT override dual's overlapping
* grid — that stacked light+default vertically (hidden light still consumes
* space → empty drawer/header bands). One logo cell + subtitle row.
*/
.havena-pro-logo--custom.havena-pro-logo--stacked.havena-pro-logo--dual {
display: grid;
grid-template-columns: max-content;
justify-items: start;
align-items: center;
gap: 0.35rem;
}
.havena-pro-logo--custom.havena-pro-logo--stacked.havena-pro-logo--dual > .custom-logo-link {
grid-area: 1 / 1;
}
.havena-pro-logo--custom.havena-pro-logo--stacked.havena-pro-logo--dual > small {
grid-area: 2 / 1;
}
.havena-pro-logo__mark {
width: 40px;
height: 40px;
flex: none;
}
.havena-pro-logo strong {
font-weight: var(--havena-pro-type-weight-body);
}
.havena-pro-logo span {
color: var(--havena-pro-gold-deep);
}
.havena-pro-header--transparent:not(.is-sticky) .havena-pro-logo span {
color: var(--havena-pro-gold);
}
/* Primary nav */
.havena-pro-nav {
display: flex;
align-items: center;
gap: 0.35rem;
}
.havena-pro-nav__list {
display: flex;
align-items: center;
gap: calc(0.35rem * var(--havena-pro-nav-density-scale, 1));
list-style: none;
}
.havena-pro-nav__item {
position: relative;
z-index: 2;
}
/*
* Desktop: stretch Primary items to the navigation row height so normal
* dropdown `top: 100%` shares the same lower boundary as mega (`position:static`
* → header-relative `top: 100%`). Without this, dropdowns open from the short
* link box while megas open from the full header edge (canonical Header 01–08).
*/
@media (min-width: 1121px) {
.havena-pro-header__inner > .havena-pro-nav,
.havena-pro-header__navrow .havena-pro-nav,
.havena-pro-header__navrow-inner > .havena-pro-nav {
align-self: stretch;
height: auto;
min-height: 100%;
align-items: stretch;
}
.havena-pro-header .havena-pro-nav__list {
align-items: stretch;
height: 100%;
min-height: 100%;
}
.havena-pro-header .havena-pro-nav__item {
display: flex;
align-items: stretch;
}
.havena-pro-header .havena-pro-nav__item > .havena-pro-nav__link,
.havena-pro-header .havena-pro-nav__list > .page_item > a {
height: 100%;
box-sizing: border-box;
}
/*
* Floating uses CSS grid + align-items:center on the pill. Force the Primary
* column to stretch so dropdown top:100% meets the same lower edge mega uses.
*/
.havena-pro-header--floating .havena-pro-header__inner > .havena-pro-nav {
align-self: stretch;
height: auto;
min-height: 100%;
}
}
.havena-pro-nav__link {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: calc(0.65rem * var(--havena-pro-nav-density-scale, 1)) calc(0.95rem * var(--havena-pro-nav-density-scale, 1));
font-weight: var(--havena-pro-type-weight-nav);
font-size: var(--havena-pro-type-size-nav);
color: var(--havena-pro-nav-color, var(--havena-pro-ink));
border-radius: var(--havena-pro-radius-pill);
transition: color var(--havena-pro-speed-fast) var(--havena-pro-ease),
background var(--havena-pro-speed-fast) var(--havena-pro-ease);
}
.havena-pro-nav__list > .page_item > a {
display: inline-flex;
align-items: center;
padding: calc(0.65rem * var(--havena-pro-nav-density-scale, 1)) calc(0.95rem * var(--havena-pro-nav-density-scale, 1));
font-size: var(--havena-pro-type-size-nav);
font-weight: var(--havena-pro-type-weight-nav);
color: var(--havena-pro-nav-color, var(--havena-pro-ink));
border-radius: var(--havena-pro-radius-pill);
}
.havena-pro-nav__list > .page_item > a:hover,
.havena-pro-nav__list > .current_page_item > a {
color: var(--havena-pro-navigation-interaction, var(--havena-pro-color-primary));
}
.havena-pro-nav__link svg {
width: 13px;
height: 13px;
flex: none;
display: block;
opacity: 0.6;
transition: transform var(--havena-pro-speed-fast) var(--havena-pro-ease);
}
.havena-pro-nav__item:hover > .havena-pro-nav__link svg,
.havena-pro-nav__item.is-open > .havena-pro-nav__link svg {
transform: rotate(180deg);
}
/* H19 — Shared desktop navigation interaction contract.
* Semantic states → --havena-pro-navigation-interaction.
* Variants may restyle presentation (underline/fill) but must not bypass this token. */
.havena-pro-nav__link:hover,
.havena-pro-nav__link:focus-visible,
.havena-pro-nav__item.is-active > .havena-pro-nav__link,
.havena-pro-nav__item.is-open > .havena-pro-nav__link,
.havena-pro-nav__item > .havena-pro-nav__link[aria-expanded="true"] {
color: var(--havena-pro-navigation-interaction, var(--havena-pro-blue));
}
.havena-pro-header--transparent:not(.is-sticky) .havena-pro-nav__link:hover,
.havena-pro-header--transparent:not(.is-sticky) .havena-pro-nav__link:focus-visible,
.havena-pro-header--transparent:not(.is-sticky) .havena-pro-nav__item.is-active > .havena-pro-nav__link,
.havena-pro-header--transparent:not(.is-sticky) .havena-pro-nav__item.is-open > .havena-pro-nav__link,
.havena-pro-header--transparent:not(.is-sticky) .havena-pro-nav__item > .havena-pro-nav__link[aria-expanded="true"] {
color: var(--havena-pro-navigation-interaction, var(--havena-pro-gold));
}
/* Dropdown — visibility is JS `.is-open` only (H8). No CSS :hover open channel.
* Normal panels sit flush under the stretched parent (top: 100% = nav row edge).
* Mega uses position:static item → same header/row edge via top: 100%.
* Closed-state translateY(8px) is entrance only; open state must be transform 0.
* Do not use a permanent positive top offset (dead zone + misaligned vs mega). */
.havena-pro-dropdown {
position: absolute;
top: 100%;
inset-inline-start: 50%;
transform: translate(-50%, 8px);
min-width: 240px;
background: var(--havena-pro-menu-panel-background, var(--havena-pro-color-background));
border: 1px solid var(--havena-pro-line);
border-radius: var(--havena-pro-radius);
box-shadow: var(--havena-pro-shadow-lg);
padding: calc(0.6rem * var(--havena-pro-nav-density-scale, 1));
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity var(--havena-pro-speed) var(--havena-pro-ease),
transform var(--havena-pro-speed) var(--havena-pro-ease),
visibility var(--havena-pro-speed);
z-index: 100;
}
.havena-pro-nav__item.is-open > .havena-pro-dropdown:not(.havena-pro-mega) {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translate(-50%, 0);
}
/* Mega shares .havena-pro-dropdown for open visibility; keep transform flush. */
.havena-pro-nav__item.is-open > .havena-pro-dropdown.havena-pro-mega {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: none;
}
/* Normal dropdown only — no full-bleed bridge (mega explicitly disables ::before). */
.havena-pro-dropdown:not(.havena-pro-mega)::before {
content: none;
}
.havena-pro-dropdown a {
display: flex;
align-items: center;
justify-content: space-between;
padding: calc(0.62rem * var(--havena-pro-nav-density-scale, 1)) calc(0.9rem * var(--havena-pro-nav-density-scale, 1));
border-radius: var(--havena-pro-radius-xs);
font-size: 0.92rem;
font-weight: var(--havena-pro-type-weight-nav);
color: var(--havena-pro-menu-panel-text, var(--havena-pro-ink));
}
.havena-pro-dropdown a:hover,
.havena-pro-dropdown a:focus-visible,
.havena-pro-dropdown a[aria-current="page"] {
background: var(--havena-pro-bg-soft);
color: var(--havena-pro-navigation-interaction, var(--havena-pro-blue));
}
.havena-pro-dropdown a .havena-pro-badge {
font-size: 0.6rem;
padding: 0.2rem 0.5rem;
}
/* Mega menu */
.havena-pro-mega {
position: absolute;
inset-inline: 0;
top: 100%;
/* No entrance translateY — that shifted the panel below the header and
opened a pointer dead zone between the Properties trigger and the panel. */
transform: none;
min-width: 0;
padding: 0;
background: var(--havena-pro-menu-panel-background, var(--havena-pro-color-background));
border-radius: 0 0 var(--havena-pro-radius-lg) var(--havena-pro-radius-lg);
border-top: 1px solid var(--havena-pro-line);
}
/*
* H8: Do not use a full-width interactive ::before bridge — it stole hit-tests
* from neighboring Primary parents. Parent → panel travel uses JS close delay;
* triggers stack above the mega so sideways handoff works.
*/
.havena-pro-mega::before {
content: none;
}
.havena-pro-nav__item--mega {
position: static;
z-index: auto;
}
/* Keep Primary triggers above an open full-bleed mega so neighbors remain hittable. */
.havena-pro-nav__item > .havena-pro-nav__link {
position: relative;
z-index: 101;
}
.havena-pro-nav__item.is-open > .havena-pro-mega {
transform: none;
}
.havena-pro-mega__inner {
display: grid;
grid-template-columns: 1.1fr 1.1fr 1.1fr 1.5fr;
gap: calc(2.5rem * var(--havena-pro-nav-density-scale, 1));
padding: calc(2.4rem * var(--havena-pro-nav-density-scale, 1)) 0 calc(2.6rem * var(--havena-pro-nav-density-scale, 1));
}
.havena-pro-mega__title {
font-family: var(--havena-pro-font-family-body);
font-size: var(--havena-pro-fs-xs);
font-weight: var(--havena-pro-type-weight-body-strong);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--havena-pro-slate-light);
margin-bottom: 1.1rem;
}
.havena-pro-mega__desc {
font-size: var(--havena-pro-type-size-small);
color: var(--havena-pro-color-muted);
font-weight: var(--havena-pro-type-weight-nav);
letter-spacing: 0;
text-transform: none;
line-height: 1.45;
margin: -0.7rem 0 1.1rem;
}
.havena-pro-mega__list a {
display: flex;
align-items: center;
gap: 0.7rem;
padding: calc(0.5rem * var(--havena-pro-nav-density-scale, 1)) calc(0.6rem * var(--havena-pro-nav-density-scale, 1));
margin-inline-start: -0.6rem;
border-radius: var(--havena-pro-radius-xs);
font-size: 0.93rem;
font-weight: var(--havena-pro-type-weight-nav);
color: var(--havena-pro-menu-panel-text, var(--havena-pro-ink));
}
.havena-pro-mega__list a:hover,
.havena-pro-mega__list a:focus-visible,
.havena-pro-mega__list a[aria-current="page"] {
background: var(--havena-pro-bg-soft);
color: var(--havena-pro-navigation-interaction, var(--havena-pro-blue));
}
.havena-pro-mega__list svg {
width: 17px;
height: 17px;
color: var(--havena-pro-gold-deep);
flex: none;
}
.havena-pro-mega__promo {
position: relative;
border-radius: var(--havena-pro-radius);
overflow: hidden;
min-height: 250px;
display: flex;
align-items: flex-end;
color: var(--havena-pro-color-dark-text);
isolation: isolate;
}
.havena-pro-mega__promo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -2;
transition: transform 0.8s var(--havena-pro-ease);
}
.havena-pro-mega__promo:hover img {
transform: scale(1.06);
}
.havena-pro-mega__promo::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(5, 11, 22, 0.85), rgba(5, 11, 22, 0.05) 60%);
z-index: -1;
}
.havena-pro-mega__promo-body {
padding: 1.4rem;
}
.havena-pro-mega__promo-body .havena-pro-badge {
margin-bottom: 0.6rem;
}
.havena-pro-mega__promo-body h4 {
color: var(--havena-pro-color-dark-text);
font-size: 1.15rem;
margin-bottom: 0.2rem;
}
.havena-pro-mega__promo-body p {
font-size: var(--havena-pro-fs-sm);
color: rgba(255, 255, 255, 0.75);
}
.havena-pro-mega__promo-carousel {
position: relative;
min-height: 250px;
}
.havena-pro-mega__promo-carousel .havena-pro-mega__promo {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.55s var(--havena-pro-ease), visibility 0.55s var(--havena-pro-ease);
}
/* Active slide is interactive only while the Properties mega is open —
never escape closed mega visibility/pointer containment. */
.havena-pro-nav__item--mega.is-open > .havena-pro-mega .havena-pro-mega__promo-carousel .havena-pro-mega__promo.is-active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/*
* Menu Panels — Match Main Header (Classic / shared).
* Uses resolved --havena-pro-header-* tokens (emitted when customized; CSS
* fallbacks match Classic shell when Main Header is unset). Theme Default
* leaves this class off so approved panel colors stay intact.
*/
.havena-pro-header--menu-panels-match-main .havena-pro-dropdown,
.havena-pro-header--menu-panels-match-main .havena-pro-mega {
background: var(--havena-pro-header-background, var(--havena-pro-overlay-light));
}
.havena-pro-header--menu-panels-match-main .havena-pro-dropdown a,
.havena-pro-header--menu-panels-match-main .havena-pro-mega__list a {
color: var(--havena-pro-header-text, var(--havena-pro-ink));
}
/*
* H14-FIX-2 — Internal Menu Panel hierarchy (Custom / Match Main only).
* Theme Default never receives these classes → approved titles/icons/hover stay intact.
* Headings = muted mix of resolved panel text (works for light-on-dark and dark-on-light).
* Icons stay gold-deep. Hover keeps brand blue/gold text; well softens from panel text.
* color-mix is already used elsewhere in this theme's header chrome.
*/
.havena-pro-header--menu-panels-custom,
.havena-pro-header--menu-panels-match-main {
--havena-pro-menu-panel-muted: color-mix(
in srgb,
var(--havena-pro-menu-panel-text, var(--havena-pro-header-text, var(--havena-pro-ink))) 58%,
transparent
);
}
.havena-pro-header--menu-panels-custom .havena-pro-mega__title,
.havena-pro-header--menu-panels-match-main .havena-pro-mega__title {
color: var(--havena-pro-menu-panel-muted);
}
.havena-pro-header--menu-panels-custom .havena-pro-dropdown:not(.havena-pro-mega) a:hover,
.havena-pro-header--menu-panels-custom .havena-pro-dropdown:not(.havena-pro-mega) a:focus-visible,
.havena-pro-header--menu-panels-custom .havena-pro-mega__list a:hover,
.havena-pro-header--menu-panels-custom .havena-pro-mega__list a:focus-visible,
.havena-pro-header--menu-panels-match-main .havena-pro-dropdown:not(.havena-pro-mega) a:hover,
.havena-pro-header--menu-panels-match-main .havena-pro-dropdown:not(.havena-pro-mega) a:focus-visible,
.havena-pro-header--menu-panels-match-main .havena-pro-mega__list a:hover,
.havena-pro-header--menu-panels-match-main .havena-pro-mega__list a:focus-visible {
background: color-mix(
in srgb,
var(--havena-pro-menu-panel-text, var(--havena-pro-header-text, var(--havena-pro-ink))) 10%,
transparent
);
}
@media (prefers-reduced-motion: reduce) {
.havena-pro-mega__promo-carousel .havena-pro-mega__promo {
transition: none;
}
}
/* Header actions */
.havena-pro-header__actions {
display: flex;
align-items: center;
gap: 0.65rem;
}
.havena-pro-header__action {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 50%;
color: var(--havena-pro-nav-color, var(--havena-pro-ink));
transition: background var(--havena-pro-speed-fast) var(--havena-pro-ease),
color var(--havena-pro-speed-fast) var(--havena-pro-ease);
}
.havena-pro-header__action svg {
width: 20px;
height: 20px;
}
.havena-pro-header__action:hover {
background: var(--havena-pro-bg-mist);
color: var(--havena-pro-blue);
}
.havena-pro-header--transparent:not(.is-sticky) .havena-pro-header__action:hover {
background: var(--havena-pro-color-dark-border);
color: var(--havena-pro-color-dark-text);
}
.havena-pro-header__action-count {
position: absolute;
top: 2px;
right: 0;
min-width: 17px;
height: 17px;
padding-inline: 4px;
border-radius: var(--havena-pro-radius-pill);
background: var(--havena-pro-gold);
color: var(--havena-pro-navy-950);
font-size: 0.62rem;
font-weight: var(--havena-pro-type-weight-card-value);
display: flex;
align-items: center;
justify-content: center;
}
.havena-pro-header__action-count[hidden] {
display: none;
}
.havena-pro-header__cta {
margin-inline-start: 0.5rem;
}
/* Hamburger */
.havena-pro-burger {
display: none;
width: 44px;
height: 44px;
border-radius: 50%;
position: relative;
color: var(--havena-pro-nav-color, var(--havena-pro-ink));
}
.havena-pro-burger span {
position: absolute;
inset-inline: 11px;
height: 2px;
border-radius: 2px;
background: currentColor;
transition: top 0.3s var(--havena-pro-ease),
transform 0.3s var(--havena-pro-ease),
opacity 0.3s var(--havena-pro-ease),
width 0.3s var(--havena-pro-ease);
}
.havena-pro-burger span:nth-child(1) { top: 15px; }
.havena-pro-burger span:nth-child(2) { top: 21px; }
.havena-pro-burger span:nth-child(3) { top: 27px; width: 60%; }
.havena-pro-burger.is-open span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.havena-pro-burger.is-open span:nth-child(2) { opacity: 0; }
.havena-pro-burger.is-open span:nth-child(3) { top: 21px; width: auto; transform: rotate(-45deg); }
@media (max-width: 1120px) {
.havena-pro-nav,
.havena-pro-header__cta,
.havena-pro-header__action--account {
display: none;
}
.havena-pro-burger {
display: block;
}
html:not(.havena-pro-js) .havena-pro-nav {
display: flex;
}
:root {
--havena-pro-header-h: 72px;
}
}
/*
* Classic mid-device handoff (≤1279).
* Scope via body: variants set body.havena-pro-header-is-*. Classic does not.
* Logo is flex-shrink:0 — do not squeeze it. When logo + Primary + actions
* exceed the row (observed ~1124), hand off to the existing burger architecture.
* Do NOT use :not([class*="havena-pro-header--"]) — Classic often carries
* --transparent / --static / --nav-density-*.
*/
@media (max-width: 1279px) {
body:not([class*="havena-pro-header-is-"]) .havena-pro-header .havena-pro-nav:not(.havena-pro-nav--top),
body:not([class*="havena-pro-header-is-"]) .havena-pro-header .havena-pro-header__cta,
body:not([class*="havena-pro-header-is-"]) .havena-pro-header .havena-pro-header__action--account {
display: none;
}
body:not([class*="havena-pro-header-is-"]) .havena-pro-header .havena-pro-burger {
display: block;
}
html:not(.havena-pro-js) body:not([class*="havena-pro-header-is-"]) .havena-pro-header .havena-pro-nav:not(.havena-pro-nav--top) {
display: flex;
}
}
@media (max-width: 1279px) and (min-width: 1121px) {
body:not([class*="havena-pro-header-is-"]) {
--havena-pro-header-h: 72px;
}
}
@media (max-width: 768px) {
.havena-pro-header__inner {
gap: 1rem;
}
}
@media (max-width: 390px) {
.havena-pro-header__inner {
gap: 0.65rem;
}
.havena-pro-header__actions {
gap: 0.25rem;
}
.havena-pro-logo--custom .custom-logo {
max-width: 148px;
height: 40px;
}
}
/* Mobile drawer — overflow matches original index.html (no root clip). */
.havena-pro-drawer {
position: fixed;
inset: 0;
z-index: 1100;
visibility: hidden;
pointer-events: none;
}
.havena-pro-drawer.is-open {
visibility: visible;
pointer-events: auto;
}
.havena-pro-drawer__overlay {
position: absolute;
inset: 0;
width: 100%;
border: 0;
background: var(--havena-pro-overlay-dark);
backdrop-filter: blur(4px);
opacity: 0;
transition: opacity 0.35s var(--havena-pro-ease);
}
.havena-pro-drawer.is-open .havena-pro-drawer__overlay {
opacity: 1;
}
.havena-pro-drawer__panel {
position: absolute;
inset-block: 0;
inset-inline-end: 0;
width: min(400px, 88vw);
width: min(var(--havena-pro-drawer-width), 88vw);
background: var(--havena-pro-color-background);
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.45s var(--havena-pro-ease);
overflow-y: auto;
--havena-pro-drawer-density-scale: 1;
}
.havena-pro-drawer.is-open .havena-pro-drawer__panel {
transform: translateX(0);
}
html[dir="rtl"] .havena-pro-drawer__panel {
transform: translateX(-100%);
}
html[dir="rtl"] .havena-pro-drawer.is-open .havena-pro-drawer__panel {
transform: translateX(0);
}
/* Drawer opens from inline-start (Left in LTR). Same markup / JS. */
.havena-pro-drawer--start .havena-pro-drawer__panel {
inset-inline-end: auto;
inset-inline-start: 0;
transform: translateX(-100%);
}
.havena-pro-drawer--start.is-open .havena-pro-drawer__panel {
transform: translateX(0);
}
html[dir="rtl"] .havena-pro-drawer--start .havena-pro-drawer__panel {
transform: translateX(100%);
}
html[dir="rtl"] .havena-pro-drawer--start.is-open .havena-pro-drawer__panel {
transform: translateX(0);
}
.havena-pro-drawer--density-compact .havena-pro-drawer__panel {
--havena-pro-drawer-density-scale: 0.88;
}
.havena-pro-drawer--density-comfortable .havena-pro-drawer__panel {
--havena-pro-drawer-density-scale: 1.12;
}
.havena-pro-drawer__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
padding: calc(1.25rem * var(--havena-pro-drawer-density-scale, 1)) calc(1.5rem * var(--havena-pro-drawer-density-scale, 1));
padding-inline: calc(1.5rem * var(--havena-pro-drawer-density-scale, 1));
border-bottom: 1px solid var(--havena-pro-line);
}
.havena-pro-drawer__head .havena-pro-logo {
min-width: 0;
flex: 1 1 auto;
max-width: calc(100% - 3.25rem);
}
.havena-pro-drawer__head .havena-pro-logo--stacked {
align-items: flex-start;
text-align: left;
}
.havena-pro-drawer__head .havena-pro-logo--stacked small {
white-space: nowrap;
}
.havena-pro-drawer__close {
width: 40px;
height: 40px;
flex: 0 0 auto;
margin-block-start: 0.1rem;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--havena-pro-bg-soft);
transition: background var(--havena-pro-speed-fast);
}
.havena-pro-drawer__close:hover {
background: var(--havena-pro-bg-mist);
}
@media (max-width: 360px) {
.havena-pro-drawer__head .havena-pro-logo--stacked small {
white-space: normal;
letter-spacing: 0.18em;
}
}
.havena-pro-drawer__close svg {
width: 18px;
height: 18px;
}
.havena-pro-drawer__nav {
padding: 1rem 1.5rem;
flex: 1;
}
.havena-pro-drawer__top-menu {
margin: 0 1.5rem;
padding: 0.65rem 0 0.85rem;
border-bottom: 1px solid var(--havena-pro-line);
}
.havena-pro-drawer__top-menu-list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.55rem;
margin: 0;
padding: 0;
list-style: none;
}
.havena-pro-drawer__top-menu-list > li {
display: inline-flex;
align-items: center;
margin: 0;
padding: 0;
list-style: none;
}
.havena-pro-drawer__top-menu-list > li + li::before {
content: "·";
margin-inline-end: 0.55rem;
opacity: 0.5;
font-weight: 400;
pointer-events: none;
}
.havena-pro-drawer__top-menu-list > li > a {
display: inline-flex;
align-items: center;
padding: 0.15rem 0;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: none;
color: var(--havena-pro-slate);
text-decoration: none;
}
.havena-pro-drawer__top-menu-list > li > a:hover,
.havena-pro-drawer__top-menu-list > li > a:focus-visible,
.havena-pro-drawer__top-menu-list > .current-menu-item > a {
color: var(--havena-pro-navy-900);
}
.havena-pro-drawer__link {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0.95rem 0;
font-size: 1.05rem;
font-weight: var(--havena-pro-type-weight-button);
color: var(--havena-pro-ink);
border-bottom: 1px solid var(--havena-pro-line);
text-align: start;
}
.havena-pro-drawer__link svg {
width: 15px;
height: 15px;
color: var(--havena-pro-slate-light);
transition: transform 0.3s var(--havena-pro-ease);
}
.havena-pro-drawer__group.is-open .havena-pro-drawer__link svg {
transform: rotate(180deg);
}
/* H19 — Mobile drawer: expanded + current-ancestor stay visually indicated.
* Uses Navigation Interaction (not Menu Panels) so Custom Interaction applies. */
.havena-pro-drawer__group.is-open > .havena-pro-drawer__link,
.havena-pro-drawer__group.is-active > .havena-pro-drawer__link {
color: var(--havena-pro-navigation-interaction, var(--havena-pro-blue));
}
.havena-pro-drawer__sub a[aria-current="page"],
.havena-pro-drawer__sub a:hover,
.havena-pro-drawer__sub a:focus-visible {
color: var(--havena-pro-navigation-interaction, var(--havena-pro-blue));
}
.havena-pro-drawer__sub {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s var(--havena-pro-ease);
}
.havena-pro-drawer__group.is-open .havena-pro-drawer__sub {
max-height: 1200px;
}
.havena-pro-drawer__sub a {
display: block;
padding-block: 0.7rem;
padding-inline: 1rem 0;
font-size: 0.95rem;
color: var(--havena-pro-slate);
border-bottom: 1px solid var(--havena-pro-bg-soft);
}
.havena-pro-drawer__pages,
.havena-pro-drawer__pages ul {
margin: 0;
padding: 0;
list-style: none;
}
.havena-pro-drawer__pages a {
display: block;
padding: 0.95rem 0;
color: var(--havena-pro-color-text);
font-size: 1.05rem;
font-weight: var(--havena-pro-type-weight-button);
border-bottom: 1px solid var(--havena-pro-color-border);
}
.havena-pro-drawer__foot {
padding: calc(1.5rem * var(--havena-pro-drawer-density-scale, 1));
border-top: 1px solid var(--havena-pro-line);
display: grid;
gap: 0.75rem;
}
/* ------------------------------------------------------------
9. SEARCH POPUP
------------------------------------------------------------ */
.havena-pro-search-popup {
position: fixed;
inset: 0;
z-index: 1200;
display: flex;
align-items: flex-start;
justify-content: center;
padding: clamp(4rem, 12vh, 9rem) var(--havena-pro-gutter) 2rem;
visibility: hidden;
pointer-events: none;
overflow: hidden;
}
.havena-pro-search-popup.is-open {
visibility: visible;
pointer-events: auto;
}
.havena-pro-search-popup__overlay {
position: absolute;
inset: 0;
background: var(--havena-pro-overlay-dark);
backdrop-filter: blur(10px);
opacity: 0;
transition: opacity 0.35s var(--havena-pro-ease);
}
.havena-pro-search-popup.is-open .havena-pro-search-popup__overlay {
opacity: 1;
}
.havena-pro-search-popup__panel {
position: relative;
width: min(680px, 100%);
background: var(--havena-pro-color-background);
border-radius: var(--havena-pro-radius-lg);
box-shadow: var(--havena-pro-shadow-lg);
padding: 1.75rem;
opacity: 0;
transform: translateY(24px) scale(0.98);
transition: opacity 0.4s var(--havena-pro-ease), transform 0.4s var(--havena-pro-ease);
}
.havena-pro-search-popup.is-open .havena-pro-search-popup__panel {
opacity: 1;
transform: translateY(0) scale(1);
}
.havena-pro-search-popup__bar {
display: flex;
align-items: center;
gap: 0.9rem;
border: 1.5px solid var(--havena-pro-line);
border-radius: var(--havena-pro-radius-sm);
padding: 0.35rem 0.5rem 0.35rem 1.1rem;
transition: border-color var(--havena-pro-speed-fast), box-shadow var(--havena-pro-speed-fast);
}
.havena-pro-search-popup__bar:focus-within {
border-color: var(--havena-pro-blue);
box-shadow: var(--havena-pro-form-focus-ring);
}
.havena-pro-search-popup__bar > svg {
width: 20px;
height: 20px;
color: var(--havena-pro-slate-light);
flex: none;
}
.havena-pro-search-popup__bar input {
flex: 1;
border: 0;
padding: 0.75rem 0;
font-size: 1.02rem;
background: transparent;
}
.havena-pro-search-popup__bar input:focus,
.havena-pro-search-popup__bar input:focus-visible {
outline: var(--havena-pro-focus-width) solid var(--havena-pro-focus-color);
outline-offset: 2px;
}
.havena-pro-search-popup__label {
font-size: var(--havena-pro-fs-xs);
font-weight: var(--havena-pro-type-weight-body-strong);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--havena-pro-slate-light);
margin: 1.5rem 0 0.8rem;
}
.havena-pro-search-popup__tags {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
.havena-pro-search-popup__tags a {
padding: 0.5rem 1rem;
border: 1.5px solid var(--havena-pro-line);
border-radius: var(--havena-pro-radius-pill);
font-size: var(--havena-pro-fs-sm);
font-weight: var(--havena-pro-type-weight-nav);
color: var(--havena-pro-slate);
}
.havena-pro-search-popup__tags a:hover {
border-color: var(--havena-pro-blue);
color: var(--havena-pro-blue);
background: var(--havena-pro-blue-soft);
}
.havena-pro-search-popup__close {
position: absolute;
top: -54px;
right: 0;
width: 42px;
height: 42px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
color: var(--havena-pro-color-dark-text);
display: flex;
align-items: center;
justify-content: center;
transition: background var(--havena-pro-speed-fast), transform var(--havena-pro-speed-fast);
}
.havena-pro-search-popup__close:hover {
background: rgba(255, 255, 255, 0.22);
transform: rotate(90deg);
}
.havena-pro-search-popup__close svg {
width: 18px;
height: 18px;
}
/* ------------------------------------------------------------
10. PROPERTY CARD
------------------------------------------------------------ */
.havena-pro-property,
.havena-pro-property-card {
background: var(--havena-pro-card-background);
border-radius: var(--havena-pro-radius);
overflow: hidden;
border: 1px solid var(--havena-pro-line);
transition: transform var(--havena-pro-speed) var(--havena-pro-ease),
box-shadow var(--havena-pro-speed) var(--havena-pro-ease),
border-color var(--havena-pro-speed) var(--havena-pro-ease);
display: flex;
flex-direction: column;
}
.havena-pro-property:hover,
.havena-pro-property-card:hover {
transform: translateY(-6px);
box-shadow: var(--havena-pro-shadow-sm);
border-color: transparent;
}
.havena-pro-property__media {
position: relative;
aspect-ratio: 4 / 2.9;
overflow: hidden;
display: block;
}
/*
* Wrapper aspect-ratio owns card media geometry. Base (0,1,1) loses to
* Elementor `.elementor img { height: auto }` on Home/widgets — boost to 0,2,1+.
*
* Direct-child / gallery classes only — never Pro Badge preset/image ![]()
* nested under .havena-pro-property__badges (those must stay chip-sized).
*/
.havena-pro-property__media > img,
.havena-pro-property__media img.havena-pro-property__gallery-img,
.havena-pro-property__media img.havena-pro-property__gallery-crossfade,
.elementor .havena-pro-property__media > img,
.elementor-widget-havena-pro-property-carousel .havena-pro-property__media > img,
.elementor-widget-havena-pro-property-grid .havena-pro-property__media > img,
.elementor-widget-havena-pro-property-list .havena-pro-property__media > img {
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center;
transition: transform 0.9s var(--havena-pro-ease);
}
.havena-pro-property:hover .havena-pro-property__media > img,
.havena-pro-property-card:hover .havena-pro-property__media > img,
.havena-pro-property:hover .havena-pro-property__media img.havena-pro-property__gallery-img,
.havena-pro-property-card:hover .havena-pro-property__media img.havena-pro-property__gallery-img,
.havena-pro-property:hover .havena-pro-property__media img.havena-pro-property__gallery-crossfade,
.havena-pro-property-card:hover .havena-pro-property__media img.havena-pro-property__gallery-crossfade {
transform: scale(1.07);
}
.havena-pro-property__media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, var(--havena-pro-overlay-scrim), transparent 45%);
pointer-events: none;
}
.havena-pro-property__badges {
position: absolute;
top: 1rem;
left: 1rem;
z-index: 2;
display: flex;
align-items: center;
gap: var(--havena-pro-space-xs);
}
.havena-pro-property__badges .havena-pro-badge {
box-sizing: border-box;
flex: none;
align-items: center;
min-height: 1.7rem;
padding: 0.32rem 0.75rem;
line-height: 1;
white-space: nowrap;
border: 1px solid transparent;
}
.havena-pro-property__fav {
position: absolute;
top: 1rem;
right: 1rem;
z-index: 2;
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--havena-pro-overlay-light);
backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
color: var(--havena-pro-ink);
transition: background-color var(--havena-pro-speed-fast) var(--havena-pro-ease),
color var(--havena-pro-speed-fast) var(--havena-pro-ease),
transform var(--havena-pro-speed-fast) var(--havena-pro-ease);
}
.havena-pro-property__fav svg {
width: 17px;
height: 17px;
fill: none;
stroke: currentColor;
stroke-width: 2;
transition: fill var(--havena-pro-speed-fast),
stroke var(--havena-pro-speed-fast);
}
.havena-pro-property__fav:hover {
transform: scale(1.1);
}
.havena-pro-property__fav.is-saved {
background: var(--havena-pro-danger);
color: var(--havena-pro-color-dark-text);
}
.havena-pro-property__fav.is-saved svg {
fill: currentColor;
}
.havena-pro-property__price {
position: absolute;
bottom: 1rem;
left: 1rem;
z-index: 2;
color: var(--havena-pro-color-dark-text);
font-size: 1.28rem;
font-weight: var(--havena-pro-type-weight-card-title);
letter-spacing: -0.01em;
text-shadow: 0 2px 12px rgba(5, 11, 22, 0.5);
}
.havena-pro-property__price span {
font-size: var(--havena-pro-fs-sm);
font-weight: var(--havena-pro-type-weight-nav);
opacity: 0.85;
}
.havena-pro-property__body {
padding: 1.35rem 1.4rem 1.2rem;
flex: 1;
display: flex;
flex-direction: column;
}
.havena-pro-property__title {
font-size: 1.12rem;
font-weight: var(--havena-pro-type-weight-card-title);
letter-spacing: 0;
margin-bottom: 0.35rem;
}
.havena-pro-property__title a:hover {
color: var(--havena-pro-blue);
}
.havena-pro-archive__grid--list article .havena-pro-property__body{ width: 100%; }
.havena-pro-property__loc {
display: flex;
align-items: center;
gap: 0.4rem;
color: var(--havena-pro-slate);
font-size: var(--havena-pro-fs-sm);
margin-bottom: 0;
}
.havena-pro-property__loc svg {
width: 15px;
height: 15px;
flex: none;
color: var(--havena-pro-gold-deep);
}
.havena-pro-property__specs {
display: flex;
align-items: center;
gap: 1.15rem;
margin-top: 1.05rem;
padding-top: 1.05rem;
border-top: 1px solid var(--havena-pro-line);
font-size: var(--havena-pro-fs-sm);
color: var(--havena-pro-slate);
padding-bottom: 1.05rem;
margin-bottom: 1.05rem;
border-bottom: 1px solid var(--havena-pro-line);
}
.havena-pro-property__spec {
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
.havena-pro-property__spec svg {
width: 17px;
height: 17px;
color: var(--havena-pro-slate-light);
}
.havena-pro-property__spec-value {
color: var(--havena-pro-ink);
font-weight: var(--havena-pro-type-weight-card-title);
}
.havena-pro-property__spec-label {
color: var(--havena-pro-slate);
font-weight: var(--havena-pro-type-weight-card-label);
}
.havena-pro-property__excerpt {
margin: 0.35rem 0 0;
color: var(--havena-pro-slate);
font-size: var(--havena-pro-fs-sm);
line-height: 1.45;
}
.havena-pro-property__extras {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1.15rem;
/* margin-top: 0.85rem; */
font-size: var(--havena-pro-fs-sm);
color: var(--havena-pro-slate);
}
.havena-pro-property__extra {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.havena-pro-property__extra svg {
width: 15px;
height: 15px;
color: var(--havena-pro-slate-light);
}
.havena-pro-property__extra-value {
color: inherit;
font-weight: inherit;
overflow-wrap: anywhere;
word-break: break-word;
}
.havena-pro-property__extra-label {
color: var(--havena-pro-slate);
font-weight: var(--havena-pro-type-weight-body);
}
.havena-pro-property__extra a {
color: inherit;
text-decoration: none;
}
.havena-pro-property__extra a:hover,
.havena-pro-property__extra a:focus-visible {
text-decoration: underline;
}
.havena-pro-property__cta {
color: var(--havena-pro-button-primary-text);
font-weight: var(--havena-pro-type-weight-nav);
font-size: var(--havena-pro-fs-sm);
line-height: 1.3;
text-decoration: none;
background: var(--havena-pro-gold-deep);
padding: 8px 10px;
border-radius: 4px;
}
.havena-pro-property__cta--tour {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.35rem 0.65rem;
border-radius: var(--havena-pro-radius-pill, 999px);
background: var(--havena-pro-overlay-frost);
color: var(--havena-pro-ink);
font-size: var(--havena-pro-fs-xs);
font-weight: var(--havena-pro-type-weight-label);
line-height: 1.2;
box-shadow: var(--havena-pro-shadow-xs);
backdrop-filter: blur(6px);
}
.havena-pro-property__cta--tour svg {
width: 12px;
height: 12px;
flex: none;
}
.havena-pro-property__cta:hover,
.havena-pro-property__cta:focus-visible {
color: var(--havena-pro-button-primary-text);
text-decoration: none;
background: var(--havena-pro-blue);
}
/* ------------------------------------------------------------
11. AGENT CARD
------------------------------------------------------------ */
.havena-pro-agent {
background: var(--havena-pro-card-background);
border: 1px solid var(--havena-pro-line);
border-radius: var(--havena-pro-radius);
padding: 2rem 1.5rem 1.75rem;
text-align: center;
transition: transform var(--havena-pro-speed) var(--havena-pro-ease),
box-shadow var(--havena-pro-speed) var(--havena-pro-ease);
position: relative;
overflow: hidden;
}
.havena-pro-agent::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 90px;
background: linear-gradient(160deg, var(--havena-pro-navy-900), var(--havena-pro-navy-700));
opacity: 0;
transition: opacity var(--havena-pro-speed) var(--havena-pro-ease);
}
.havena-pro-agent:hover {
transform: translateY(-6px);
box-shadow: var(--havena-pro-shadow-lg);
}
.havena-pro-agent:hover::before {
opacity: 1;
}
.havena-pro-agent__photo {
position: relative;
width: 108px;
height: 108px;
aspect-ratio: 1 / 1;
margin: 0 auto 1.1rem;
border-radius: 50%;
padding: 4px;
background: linear-gradient(135deg, var(--havena-pro-gold), var(--havena-pro-blue));
box-sizing: border-box;
flex-shrink: 0;
}
/*
* Agent Card avatar — must beat Elementor frontend.css
* `.elementor img { height:auto; max-width:100%; border:none; border-radius:0 }`
* (specificity 0,1,1). Equal-specificity `.havena-pro-agent__photo img` loses when
* Elementor loads later (editor iframe / post CSS order). Parent-scoped 0,2,1
* keeps the circular slot contract without !important and without a global
* Elementor img override. Same pattern as Classic Stories / Hero trust avatars.
*/
.havena-pro-agent .havena-pro-agent__photo > img,
.havena-pro-agent__photo img {
display: block;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
border-radius: 50%;
object-fit: cover;
object-position: center;
border: 3px solid var(--havena-pro-card-background);
box-sizing: border-box;
}
.havena-pro-agent__verified {
position: absolute;
bottom: 4px;
right: 4px;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--havena-pro-blue);
border: 2.5px solid var(--havena-pro-card-background);
display: flex;
align-items: center;
justify-content: center;
color: var(--havena-pro-color-dark-text);
}
.havena-pro-agent__verified svg {
width: 12px;
height: 12px;
}
.havena-pro-agent__name {
font-weight: var(--havena-pro-type-weight-card-title);
font-size: 1.1rem;
letter-spacing: 0;
}
/* Premium Badge title_inline host (Pro Badge list mounts beside titles). */
.havena-pro-property__title-row,
.havena-pro-page-hero__title-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 0.5rem;
max-width: 100%;
}
/* Agent card: stack title + badges so badge count never shifts title center. */
.havena-pro-agent__name-row {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
width: 100%;
max-width: 100%;
text-align: center;
}
.havena-pro-agent__name-row .havena-pro-agent__name,
.havena-pro-property__title-row .havena-pro-property__title,
.havena-pro-page-hero__title-row .havena-pro-page-hero__title,
.havena-pro-page-hero__title-row .havena-pro-dhero__title {
margin: 0;
min-width: 0;
}
.havena-pro-agent__name-row .havena-pro-agent__name {
width: 100%;
text-align: center;
}
.havena-pro-agent__badges {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 100%;
max-width: 100%;
}
.havena-pro-agent__badges .hvnly-pro-badge-list {
justify-content: center;
}
.havena-pro-agent__name a:hover {
color: var(--havena-pro-blue);
}
.havena-pro-agent__role {
font-size: var(--havena-pro-fs-sm);
color: var(--havena-pro-slate);
margin: 0.15rem 0 0.75rem;
}
.havena-pro-agent__rating {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: var(--havena-pro-fs-sm);
font-weight: var(--havena-pro-type-weight-button);
color: var(--havena-pro-ink);
margin-bottom: 1.1rem;
}
.havena-pro-agent__stats {
display: flex;
justify-content: center;
gap: 1.5rem;
padding-top: 1.1rem;
border-top: 1px solid var(--havena-pro-line);
font-size: var(--havena-pro-fs-xs);
color: var(--havena-pro-slate);
}
.havena-pro-agent__stats strong {
display: block;
font-size: 1.05rem;
color: var(--havena-pro-ink);
}
/* Stars */
.havena-pro-stars {
display: inline-flex;
gap: 2px;
color: var(--havena-pro-gold); align-items: center;
}
.havena-pro-stars svg {
width: 14px;
height: 14px;
fill: currentColor;
}
/* ------------------------------------------------------------
12. BLOG CARD
------------------------------------------------------------ */
.havena-pro-post {
display: flex;
flex-direction: column;
border-radius: var(--havena-pro-radius);
overflow: hidden;
background: var(--havena-pro-card-background);
border: 1px solid var(--havena-pro-line);
transition: transform var(--havena-pro-speed) var(--havena-pro-ease),
box-shadow var(--havena-pro-speed) var(--havena-pro-ease);
}
.havena-pro-post:hover {
transform: translateY(-6px);
box-shadow: var(--havena-pro-shadow-lg);
}
.havena-pro-post__media {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
display: block;
}
/*
* Same Elementor collision as property media: (0,1,1) height:100% loses to
* `.elementor img { height: auto }`. Raise specificity; keep Classic 16/10 cover.
*/
.havena-pro-post__media img,
.elementor .havena-pro-post__media img,
.elementor-widget-havena-pro-latest-posts .havena-pro-post__media img {
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center;
transition: transform 0.9s var(--havena-pro-ease);
}
.havena-pro-post:hover .havena-pro-post__media img {
transform: scale(1.06);
}
.havena-pro-post__cat {
position: absolute;
top: 1rem;
left: 1rem;
}
.havena-pro-post__body {
padding: 1.5rem 1.5rem 1.4rem;
display: flex;
flex-direction: column;
flex: 1;
}
.havena-pro-post__meta {
display: flex;
align-items: center;
gap: 0.9rem;
font-size: var(--havena-pro-fs-xs);
font-weight: var(--havena-pro-type-weight-button);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--havena-pro-slate-light);
margin-bottom: 0.75rem;
}
.havena-pro-post__meta span {
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.havena-pro-post__meta svg {
width: 13px;
height: 13px;
}
.havena-pro-post__title {
font-size: 1.16rem;
font-weight: var(--havena-pro-type-weight-card-title);
line-height: 1.4;
letter-spacing: 0;
margin-bottom: 0.6rem;
}
.havena-pro-post__title a:hover {
color: var(--havena-pro-blue);
}
.havena-pro-post__excerpt {
font-size: var(--havena-pro-fs-sm);
color: var(--havena-pro-slate);
margin-bottom: 1.2rem;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
}
.havena-pro-post__foot {
margin-top: auto;
display: flex;
align-items: center;
gap: 0.7rem;
padding-top: 1.1rem;
border-top: 1px solid var(--havena-pro-line);
font-size: var(--havena-pro-fs-sm);
}
.havena-pro-post__foot img,
.elementor .havena-pro-post__foot img,
.elementor-widget-havena-pro-latest-posts .havena-pro-post__foot img {
width: 34px;
height: 34px;
border-radius: 50%;
object-fit: cover;
}
.havena-pro-post__foot strong {
display: block;
font-weight: var(--havena-pro-type-weight-button);
line-height: 1.25;
}
.havena-pro-post__foot small {
display: block;
color: var(--havena-pro-slate-light);
font-size: var(--havena-pro-fs-xs);
line-height: 1.35;
max-width: 28ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ------------------------------------------------------------
13. SLIDER (scroll-snap carousel)
------------------------------------------------------------ */
.havena-pro-slider {
position: relative;
}
.havena-pro-slider__track {
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc((100% - 3.5rem) / 3);
gap: 1.75rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding-bottom: 0.5rem;
scrollbar-width: none;
}
.havena-pro-slider__track::-webkit-scrollbar {
display: none;
}
.havena-pro-slider__track > * {
scroll-snap-align: start;
}
/*
* Property cards lift -6px and cast --havena-pro-shadow-lg on hover.
* overflow-x:auto forces overflow-y:auto (CSS overflow pairing), which clips those paints.
* Keep a modest scrollport pad for the lift — not a full soft-blur reserve.
* An 8rem bottom pad previously left a tall empty scrollport box between Featured
* Properties and the next section (looked like a blank shadowed container).
*/
.havena-pro-slider__track:has(> .havena-pro-property-card) {
padding-top: 0.75rem;
padding-bottom: 1.5rem;
}
/*
* Testimonials hover uses translateY(-5px) (home.css). Same overflow-y pairing clips the
* card’s top radius / quote area on hover. Pad just enough for the lift — not property
* card shadow falloff — so Classic Stories spacing stays tight.
*/
.havena-pro-slider__track:has(> .havena-pro-testimonial) {
padding-top: 0.75rem;
padding-bottom: 1.5rem;
}
/*
* Card-level reveal uses translateY(34px). Inside an overflow-y:auto track that paint is
* clipped during entrance / for off-screen slides. Keep opacity reveal; drop the Y shift
* only for direct track children. Hover lift remains via .havena-pro-property-card:hover.
*/
.havena-pro-slider__track > .havena-pro-reveal:not(.is-inview) {
transform: none;
}
.havena-pro-slider__track--wide {
grid-auto-columns: calc((100% - 1.75rem) / 2);
}
@media (max-width: 1024px) {
.havena-pro-slider__track {
grid-auto-columns: calc((100% - 1.75rem) / 2);
}
}
@media (max-width: 640px) {
.havena-pro-slider__track,
.havena-pro-slider__track--wide {
grid-auto-columns: 88%;
}
}
/* Elementor Property Carousel — semantic root (markup refactor) */
.havena-pro-property-carousel {
padding-block: var(--havena-pro-section-y, 4.5rem);
}
.havena-pro-property-carousel__inner {
width: min(var(--havena-pro-container), 100% - var(--havena-pro-gutter) * 2);
margin-inline: auto;
}
/*
* Section-level carousel nav (NOT card gallery arrows).
* Desktop: trailing edge of the split head.
* Tablet (≤1024): keep [copy] … [← →] on one intentional row when width allows.
* Mobile (≤767): nav belongs under the card track — centered on the track width.
* Single control set; display:contents + order repositions without duplicating markup.
*/
.havena-pro-property-carousel .havena-pro-section-head--split > .havena-pro-slider__nav {
max-width: none;
flex: 0 0 auto;
margin-inline-start: auto;
align-self: flex-end;
}
@media (max-width: 1024px) {
.havena-pro-property-carousel .havena-pro-section-head--split {
align-items: flex-end;
gap: clamp(1rem, 2.5vw, 1.75rem);
}
/* Leave room for ← → so the pair can stay on one row when width allows. */
.havena-pro-property-carousel .havena-pro-section-head--split > div:not(.havena-pro-slider__nav) {
flex: 1 1 14rem;
min-width: 0;
max-width: min(640px, calc(100% - 6.5rem));
}
.havena-pro-property-carousel .havena-pro-section-head--split > .havena-pro-slider__nav {
margin-inline-start: auto;
}
}
@media (max-width: 767px) {
.havena-pro-property-carousel [data-havena-pro-slider] {
display: flex;
flex-direction: column;
}
/* Flatten head so copy + nav become siblings of .havena-pro-slider for ordering. */
.havena-pro-property-carousel .havena-pro-section-head--split {
display: contents;
}
.havena-pro-property-carousel .havena-pro-section-head--split > div:not(.havena-pro-slider__nav) {
order: 1;
flex: 0 1 auto;
max-width: none;
width: 100%;
/* Restore head→track spacing lost when the head box becomes contents. */
margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.havena-pro-property-carousel .havena-pro-slider {
order: 2;
}
.havena-pro-property-carousel .havena-pro-section-head--split > .havena-pro-slider__nav {
order: 3;
/* Center the compact ← → group on the same content width as the track. */
align-self: stretch;
width: 100%;
justify-content: center;
margin-inline: 0;
/* Modest gap under the track (track already pads for card hover lift). */
margin-block-start: 0.5rem;
}
}
/*
* Testimonials (Elementor Stories) — section-level carousel nav only.
* Scoped to .havena-pro-elementor-testimonials__section so Featured Properties
* and other sliders are untouched. Same relationship as property-carousel:
* Desktop/tablet: trailing edge of split head (intentional same-row when width allows).
* Mobile (≤767): below the card track, centered on track content width.
*/
.havena-pro-elementor-testimonials__section .havena-pro-section-head--split > .havena-pro-slider__nav {
max-width: none;
flex: 0 0 auto;
margin-inline-start: auto;
align-self: flex-end;
}
@media (max-width: 1024px) {
.havena-pro-elementor-testimonials__section .havena-pro-section-head--split {
align-items: flex-end;
gap: clamp(1rem, 2.5vw, 1.75rem);
}
.havena-pro-elementor-testimonials__section .havena-pro-section-head--split > div:not(.havena-pro-slider__nav) {
flex: 1 1 14rem;
min-width: 0;
max-width: min(640px, calc(100% - 6.5rem));
}
.havena-pro-elementor-testimonials__section .havena-pro-section-head--split > .havena-pro-slider__nav {
margin-inline-start: auto;
}
}
@media (max-width: 767px) {
.havena-pro-elementor-testimonials__section [data-havena-pro-slider] {
display: flex;
flex-direction: column;
}
.havena-pro-elementor-testimonials__section .havena-pro-section-head--split {
display: contents;
}
.havena-pro-elementor-testimonials__section .havena-pro-section-head--split > div:not(.havena-pro-slider__nav) {
order: 1;
flex: 0 1 auto;
max-width: none;
width: 100%;
margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.havena-pro-elementor-testimonials__section .havena-pro-slider {
order: 2;
}
.havena-pro-elementor-testimonials__section .havena-pro-section-head--split > .havena-pro-slider__nav {
order: 3;
align-self: stretch;
width: 100%;
justify-content: center;
margin-inline: 0;
margin-block-start: 0.5rem;
}
}
/*
* Home section-head CTA polish (NOT carousel .havena-pro-slider__nav).
* Affected: Luxury, Agencies, Agents, Locations, Journal — split head + btn/link-arrow
* + substantial content grid beneath.
* Desktop: frozen [copy] … [CTA].
* Tablet (≤1024): keep content LEFT + CTA RIGHT (intentional nowrap / room reserve).
* Mobile (≤767): CTA after section content, centered on container width.
*/
.havena-pro-luxury .havena-pro-section-head--split > .havena-pro-btn,
.havena-pro-agencies .havena-pro-section-head--split > .havena-pro-link-arrow,
.havena-pro-home-agents .havena-pro-section-head--split > .havena-pro-btn,
.havena-pro-locations .havena-pro-section-head--split > .havena-pro-btn,
.havena-pro-journal .havena-pro-section-head--split > .havena-pro-btn {
flex: 0 0 auto;
margin-inline-start: auto;
align-self: flex-end;
}
@media (max-width: 1024px) {
.havena-pro-luxury .havena-pro-section-head--split,
.havena-pro-agencies .havena-pro-section-head--split,
.havena-pro-home-agents .havena-pro-section-head--split,
.havena-pro-locations .havena-pro-section-head--split,
.havena-pro-journal .havena-pro-section-head--split {
flex-wrap: nowrap;
align-items: flex-end;
gap: clamp(1rem, 2.5vw, 1.75rem);
}
.havena-pro-luxury .havena-pro-section-head--split > div,
.havena-pro-agencies .havena-pro-section-head--split > div,
.havena-pro-home-agents .havena-pro-section-head--split > div,
.havena-pro-locations .havena-pro-section-head--split > div,
.havena-pro-journal .havena-pro-section-head--split > div {
flex: 1 1 auto;
min-width: 0;
max-width: min(640px, calc(100% - 11rem));
}
}
@media (max-width: 767px) {
.havena-pro-luxury > .havena-pro-container,
.havena-pro-agencies > .havena-pro-container,
.havena-pro-home-agents > .havena-pro-container,
.havena-pro-locations > .havena-pro-container,
.havena-pro-journal > .havena-pro-container {
display: flex;
flex-direction: column;
}
.havena-pro-luxury .havena-pro-section-head--split,
.havena-pro-agencies .havena-pro-section-head--split,
.havena-pro-home-agents .havena-pro-section-head--split,
.havena-pro-locations .havena-pro-section-head--split,
.havena-pro-journal .havena-pro-section-head--split {
display: contents;
}
.havena-pro-luxury .havena-pro-section-head--split > div,
.havena-pro-agencies .havena-pro-section-head--split > div,
.havena-pro-home-agents .havena-pro-section-head--split > div,
.havena-pro-locations .havena-pro-section-head--split > div,
.havena-pro-journal .havena-pro-section-head--split > div {
order: 1;
flex: 0 1 auto;
max-width: none;
width: 100%;
margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.havena-pro-luxury .havena-pro-luxury__grid,
.havena-pro-agencies .havena-pro-agencies__grid,
.havena-pro-home-agents .havena-pro-grid,
.havena-pro-locations .havena-pro-cities__grid,
.havena-pro-journal .havena-pro-grid {
order: 2;
}
.havena-pro-luxury .havena-pro-section-head--split > .havena-pro-btn,
.havena-pro-agencies .havena-pro-section-head--split > .havena-pro-link-arrow,
.havena-pro-home-agents .havena-pro-section-head--split > .havena-pro-btn,
.havena-pro-locations .havena-pro-section-head--split > .havena-pro-btn,
.havena-pro-journal .havena-pro-section-head--split > .havena-pro-btn {
order: 3;
/* Center on the section content width (not trailing / not viewport hacks). */
align-self: center;
margin-inline: auto;
margin-block-start: 1.25rem;
}
}
/* Instance-scoped slides-per-view / gap overrides */
.havena-pro-property-carousel .havena-pro-slider__track,
.elementor-widget-havena-pro-testimonials .havena-pro-slider__track,
.havena-pro-elementor-testimonials .havena-pro-slider__track {
--havena-pro-slider-spv: 3;
--havena-pro-slider-spv-tablet: 2;
--havena-pro-slider-spv-mobile: 1;
--havena-pro-slider-gap: 1.75rem;
--havena-pro-slider-gap-tablet: 1.75rem;
--havena-pro-slider-gap-mobile: 1.25rem;
gap: var(--havena-pro-slider-gap);
grid-auto-columns: calc(
(100% - (var(--havena-pro-slider-spv) - 1) * var(--havena-pro-slider-gap)) /
var(--havena-pro-slider-spv)
);
}
@media (max-width: 1024px) {
.havena-pro-property-carousel .havena-pro-slider__track,
.elementor-widget-havena-pro-testimonials .havena-pro-slider__track,
.havena-pro-elementor-testimonials .havena-pro-slider__track {
gap: var(--havena-pro-slider-gap-tablet);
grid-auto-columns: calc(
(100% - (var(--havena-pro-slider-spv-tablet) - 1) * var(--havena-pro-slider-gap-tablet)) /
var(--havena-pro-slider-spv-tablet)
);
}
}
@media (max-width: 640px) {
.havena-pro-property-carousel .havena-pro-slider__track,
.elementor-widget-havena-pro-testimonials .havena-pro-slider__track,
.havena-pro-elementor-testimonials .havena-pro-slider__track {
gap: var(--havena-pro-slider-gap-mobile);
grid-auto-columns: calc(
(100% - (var(--havena-pro-slider-spv-mobile) - 1) * var(--havena-pro-slider-gap-mobile)) /
var(--havena-pro-slider-spv-mobile)
);
}
}
.havena-pro-slider__track--auto-height > .havena-pro-testimonial {
height: auto;
}
/* Elementor canvas: avoid reveal clipping on Stories cards */
.elementor-editor-active .elementor-widget-havena-pro-testimonials .havena-pro-reveal,
.elementor-editor-preview .elementor-widget-havena-pro-testimonials .havena-pro-reveal,
.elementor-editor-active .havena-pro-elementor-testimonials__section .havena-pro-reveal,
.elementor-editor-preview .havena-pro-elementor-testimonials__section .havena-pro-reveal {
opacity: 1;
transform: none;
}
.havena-pro-property-carousel .havena-pro-slider__dots {
display: flex;
justify-content: center;
gap: 0.5rem;
margin-top: 1rem;
}
.havena-pro-property-carousel .havena-pro-slider__dot {
width: 0.5rem;
height: 0.5rem;
padding: 0;
border: 0;
border-radius: 50%;
background: color-mix(in srgb, currentColor 28%, transparent);
cursor: pointer;
}
.havena-pro-property-carousel .havena-pro-slider__dot.is-active {
background: currentColor;
}
/* Property Carousel — Grid display style (same canonical cards) */
.havena-pro-property-carousel__grid {
display: grid;
gap: var(--havena-pro-pc-gap, 1.75rem);
grid-template-columns: repeat(var(--havena-pro-pc-cols, 3), minmax(0, 1fr));
}
@media (max-width: 1024px) {
.havena-pro-property-carousel__grid {
gap: var(--havena-pro-pc-gap-tablet, var(--havena-pro-pc-gap, 1.75rem));
grid-template-columns: repeat(var(--havena-pro-pc-cols-tablet, 2), minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.havena-pro-property-carousel__grid {
gap: var(--havena-pro-pc-gap-mobile, 1.25rem);
grid-template-columns: repeat(var(--havena-pro-pc-cols-mobile, 1), minmax(0, 1fr));
}
}
/* ------------------------------------------------------------
Property Carousel — Department Filter layout (display_style)
------------------------------------------------------------ */
.havena-pro-property-carousel__filter {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.havena-pro-property-carousel__filters {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 0.5rem;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.havena-pro-property-carousel__filters--left {
justify-content: flex-start;
}
.havena-pro-property-carousel__filters--center {
justify-content: center;
}
.havena-pro-property-carousel__filters--right {
justify-content: flex-end;
}
.havena-pro-property-carousel__filter-btn {
flex: 0 0 auto;
appearance: none;
min-height: 2.4rem;
padding: 0.45rem 1rem;
border: 1.5px solid var(--havena-pro-line, #e7ebf2);
border-radius: var(--havena-pro-radius-pill, 999px);
background: var(--havena-pro-card-background, #fff);
color: var(--havena-pro-slate, #5c6b84);
font-size: var(--havena-pro-fs-sm, 0.875rem);
font-weight: var(--havena-pro-type-weight-button, 600);
line-height: 1.2;
cursor: pointer;
white-space: nowrap;
transition:
background var(--havena-pro-speed-fast, 0.18s) var(--havena-pro-ease, ease),
border-color var(--havena-pro-speed-fast, 0.18s) var(--havena-pro-ease, ease),
color var(--havena-pro-speed-fast, 0.18s) var(--havena-pro-ease, ease),
box-shadow var(--havena-pro-speed-fast, 0.18s) var(--havena-pro-ease, ease);
}
.havena-pro-property-carousel__filter-btn:hover {
border-color: var(--havena-pro-navy-900, #0a1628);
color: var(--havena-pro-navy-900, #0a1628);
}
.havena-pro-property-carousel__filter-btn.is-active,
.havena-pro-property-carousel__filter-btn[aria-pressed="true"] {
background: var(--havena-pro-navy-900, #0a1628);
border-color: var(--havena-pro-navy-900, #0a1628);
color: var(--havena-pro-button-primary-text, #fff);
}
.havena-pro-property-carousel__filter-btn:focus-visible {
outline: 2px solid var(--havena-pro-color-primary, #2e6bff);
outline-offset: 2px;
}
.havena-pro-property-carousel__filter-results {
position: relative;
min-height: 2rem;
}
.havena-pro-property-carousel__filter-grid,
.havena-pro-property-carousel__filter .havena-pro-property-carousel__grid {
transition: min-height 0.35s var(--havena-pro-ease, ease);
}
.havena-pro-property-carousel__filter-item,
.havena-pro-property-carousel__grid-item {
min-width: 0;
transition:
opacity 0.32s var(--havena-pro-ease, ease),
transform 0.32s var(--havena-pro-ease, ease),
filter 0.32s var(--havena-pro-ease, ease);
}
/*
* Filter / Grid Load More entrance lives on the wrapper only.
* Neutralize generic .havena-pro-reveal on nested cards so its 34px translate
* never competes with .havena-pro-property-card:hover { translateY(-6px) }.
* AJAX-injected cards must not wait on the page-load reveal observer.
*/
.havena-pro-property-carousel__filter-item .havena-pro-reveal,
.havena-pro-property-carousel__grid-item .havena-pro-reveal {
opacity: 1;
transform: none;
transition:
transform var(--havena-pro-speed) var(--havena-pro-ease),
box-shadow var(--havena-pro-speed) var(--havena-pro-ease),
border-color var(--havena-pro-speed) var(--havena-pro-ease);
transition-delay: 0s;
will-change: auto;
}
.havena-pro-property-carousel__filter-item .havena-pro-reveal.is-inview,
.havena-pro-property-carousel__grid-item .havena-pro-reveal.is-inview {
opacity: 1;
transform: none;
}
.havena-pro-property-carousel__filter-item .havena-pro-property:hover,
.havena-pro-property-carousel__filter-item .havena-pro-property-card:hover,
.havena-pro-property-carousel__grid-item .havena-pro-property:hover,
.havena-pro-property-carousel__grid-item .havena-pro-property-card:hover {
transform: translateY(-6px);transition:transform var(--havena-pro-speed) var(--havena-pro-ease),
box-shadow var(--havena-pro-speed) var(--havena-pro-ease),
border-color var(--havena-pro-speed) var(--havena-pro-ease)
}
.havena-pro-property-carousel__filter-item.is-leaving,
.havena-pro-property-carousel__filter-item.is-entering,
.havena-pro-property-carousel__filter-item.is-appending,
.havena-pro-property-carousel__grid-item.is-leaving,
.havena-pro-property-carousel__grid-item.is-entering,
.havena-pro-property-carousel__grid-item.is-appending {
will-change: opacity, transform, filter;
}
.havena-pro-property-carousel__filter-item.is-leaving,
.havena-pro-property-carousel__grid-item.is-leaving {
opacity: 0;
transform: translateY(10px);
filter: blur(5px);
pointer-events: none;
}
.havena-pro-property-carousel__filter-item.is-entering,
.havena-pro-property-carousel__filter-item.is-appending,
.havena-pro-property-carousel__grid-item.is-entering,
.havena-pro-property-carousel__grid-item.is-appending {
opacity: 0;
transform: translateY(10px);
filter: blur(5px);
}
.havena-pro-property-carousel__filter-empty,
.havena-pro-property-carousel__filter-error {
margin: 1.25rem 0 0;
text-align: center;
color: var(--havena-pro-slate, #5c6b84);
font-size: var(--havena-pro-fs-sm, 0.875rem);
}
.havena-pro-property-carousel__filter-error {
color: var(--havena-pro-danger, #b42318);
}
.havena-pro-property-carousel__filter-more {
display: flex;
justify-content: center;
margin: 1.75rem 0 0.25rem;
}
.havena-pro-property-carousel__filter-more[hidden] {
display: none !important;
}
.havena-pro-property-carousel__filter-more-btn {
min-width: 12.5rem;
gap: 0.55rem;
}
.havena-pro-property-carousel__filter-more-btn.is-loading,
.havena-pro-property-carousel__filter-more-btn[aria-busy="true"] {
cursor: wait;
opacity: 0.92;
pointer-events: none;
}
.havena-pro-property-carousel__filter-more-spinner {
display: none;
flex: none;
width: 1rem;
height: 1rem;
border-radius: 50%;
border: 2px solid rgba(10, 22, 40, 0.22);
border-top-color: currentColor;
box-sizing: border-box;
}
.havena-pro-property-carousel__filter-more-btn .havena-pro-property-carousel__filter-more-spinner:not([hidden]) {
display: inline-block;
animation: havena-pro-filter-more-spin 0.7s linear infinite;
}
@keyframes havena-pro-filter-more-spin {
to { transform: rotate(360deg); }
}
@media (max-width: 640px) {
.havena-pro-property-carousel__filters {
flex-wrap: nowrap;
justify-content: flex-start;
padding-bottom: 0.15rem;
}
.havena-pro-property-carousel__filters--center,
.havena-pro-property-carousel__filters--right {
justify-content: flex-start;
}
}
@media (prefers-reduced-motion: reduce) {
.havena-pro-property-carousel__filter-btn,
.havena-pro-property-carousel__filter-item,
.havena-pro-property-carousel__grid-item,
.havena-pro-property-carousel__filter .havena-pro-property-carousel__grid {
transition: none;
}
.havena-pro-property-carousel__filter-item.is-leaving,
.havena-pro-property-carousel__filter-item.is-entering,
.havena-pro-property-carousel__filter-item.is-appending,
.havena-pro-property-carousel__grid-item.is-leaving,
.havena-pro-property-carousel__grid-item.is-entering,
.havena-pro-property-carousel__grid-item.is-appending {
transform: none;
filter: none;
opacity: 1;
}
.havena-pro-property-carousel__filter-item .havena-pro-reveal,
.havena-pro-property-carousel__grid-item .havena-pro-reveal {
opacity: 1;
transform: none;
}
.havena-pro-property-carousel__filter-more-btn .havena-pro-property-carousel__filter-more-spinner:not([hidden]) {
animation: none;
border-color: transparent;
background: currentColor;
opacity: 0.55;
}
}
.havena-pro-slider__nav {
display: flex;
gap: 0.6rem;
}
/* ------------------------------------------------------------
14. FOOTER
------------------------------------------------------------ */
.havena-pro-footer {
background: var(--havena-pro-footer-background, var(--havena-pro-navy-950));
color: var(--havena-pro-footer-text, rgba(255, 255, 255, 0.65));
position: relative;
overflow: hidden;
}
.havena-pro-footer::before {
content: "";
position: absolute;
top: -300px;
inset-inline-end: -200px;
width: 700px;
height: 700px;
border-radius: 50%;
background: radial-gradient(circle, rgba(46, 107, 255, 0.12), transparent 65%);
pointer-events: none;
}
/* Newsletter band */
.havena-pro-newsletter {
position: relative;
z-index: 1;
padding: clamp(3rem, 6vw, 4.5rem) 0;
border-bottom: 1px solid var(--havena-pro-footer-border, var(--havena-pro-line-dark));
display: flex;
align-items: center;
justify-content: space-between;
gap: 2.5rem;
flex-wrap: wrap;
}
.havena-pro-newsletter__text h3 {
color: var(--havena-pro-color-dark-text);
font-size: clamp(1.6rem, 2.6vw, 2.1rem);
margin-bottom: 0.5rem;
}
.havena-pro-newsletter__text p {
max-width: 46ch;
font-size: 0.98rem;
}
.havena-pro-newsletter__form {
display: flex;
gap: 0.6rem;
background: rgba(255, 255, 255, 0.06);
border: 1px solid var(--havena-pro-line-dark);
border-radius: var(--havena-pro-radius-pill);
padding: 0.45rem 0.45rem 0.45rem 1.4rem;
min-width: min(460px, 100%);
transition: border-color var(--havena-pro-speed-fast);
}
.havena-pro-newsletter__form:focus-within {
border-color: var(--havena-pro-gold);
}
.havena-pro-newsletter__form input {
flex: 1;
min-width: 0;
background: transparent;
border: 0;
color: var(--havena-pro-color-dark-text);
font-size: 0.95rem;
}
.havena-pro-newsletter__form input::placeholder {
color: rgba(255, 255, 255, 0.45);
}
.havena-pro-newsletter__form input:focus,
.havena-pro-newsletter__form input:focus-visible {
outline: var(--havena-pro-focus-width) solid var(--havena-pro-focus-color);
outline-offset: 2px;
}
.havena-pro-newsletter__note {
width: 100%;
font-size: var(--havena-pro-fs-xs);
color: rgba(255, 255, 255, 0.4);
margin-top: 0.6rem;
display: flex;
align-items: center;
gap: 0.4rem;
}
.havena-pro-newsletter__note svg {
width: 13px;
height: 13px;
color: var(--havena-pro-gold);
}
/* Footer main — shell chrome only (H29).
* Column / composition grids + main/nav padding are owned exclusively by
* assets/css/footer-variants.css under .havena-pro-footer
* (no competing __main--cols-* or widget-track recipes here).
*/
.havena-pro-footer__main {
position: relative;
z-index: 1;
}
.havena-pro-footer__brand p {
margin-block: 1.2rem 1.5rem;
font-size: var(--havena-pro-fs-sm);
max-width: 34ch;
}
.havena-pro-footer__brand .havena-pro-logo {
color: var(--havena-pro-color-dark-text);
}
.havena-pro-footer__brand .havena-pro-logo span {
color: var(--havena-pro-gold);
}
.havena-pro-footer__social {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6rem;
}
.havena-pro-footer__social a {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--havena-pro-social-border-color, var(--havena-pro-line-dark));
display: flex;
align-items: center;
justify-content: center;
color: var(--havena-pro-social-icon-color, rgba(255, 255, 255, 0.7));
transition: background-color var(--havena-pro-speed-fast) var(--havena-pro-ease),
border-color var(--havena-pro-speed-fast) var(--havena-pro-ease),
color var(--havena-pro-speed-fast) var(--havena-pro-ease),
transform var(--havena-pro-speed-fast) var(--havena-pro-ease);
}
.havena-pro-footer__social a:hover {
background: var(--havena-pro-social-icon-hover-background, var(--havena-pro-footer-accent, var(--havena-pro-gold)));
border-color: var(--havena-pro-social-icon-hover-border, var(--havena-pro-footer-accent, var(--havena-pro-gold)));
color: var(--havena-pro-social-icon-hover-color, var(--havena-pro-navy-950));
transform: translateY(-3px);
}
.havena-pro-footer__social svg {
width: 16px;
height: 16px;
}
.havena-pro-footer__title {
color: var(--havena-pro-footer-heading, var(--havena-pro-color-dark-text));
font-family: var(--havena-pro-font-family-heading);
font-size: var(--havena-pro-fs-sm);
font-weight: var(--havena-pro-type-weight-body-strong);
letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: 1.4rem;
}
.havena-pro-footer__col .widget-title,
.havena-pro-footer__col .havena-pro-widget__title,
.havena-pro-footer__col .wp-block-heading,
.havena-pro-footer__col h2,
.havena-pro-footer__col h3 {
color: var(--havena-pro-color-dark-text);
font-size: var(--havena-pro-fs-sm);
font-weight: var(--havena-pro-type-weight-body-strong);
letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: 1.4rem;
}
.havena-pro-footer__col ul {
list-style: none;
}
.havena-pro-footer__col a {
color: inherit;
}
.havena-pro-footer__col a:hover,
.havena-pro-footer__col a:focus-visible {
color: var(--havena-pro-footer-link-hover, var(--havena-pro-footer-accent, var(--havena-pro-gold)));
}
.havena-pro-footer__links li + li {
margin-top: 0.75rem;
}
.havena-pro-footer__links a {
font-size: var(--havena-pro-fs-sm);
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: color var(--havena-pro-speed-fast), transform var(--havena-pro-speed-fast);
}
.havena-pro-footer__links a::before {
content: "";
width: 0;
height: 1px;
background: var(--havena-pro-footer-accent, var(--havena-pro-gold));
transition: width var(--havena-pro-speed) var(--havena-pro-ease);
}
.havena-pro-footer__links a:hover {
color: var(--havena-pro-footer-link-hover, var(--havena-pro-footer-accent, var(--havena-pro-gold)));
}
.havena-pro-footer__links a:hover::before {
width: 16px;
}
.havena-pro-footer__contact li {
display: flex;
gap: 0.8rem;
font-size: var(--havena-pro-fs-sm);
}
/* Phase 1: neutralize UA italic on so office block stays visually identical. */
.havena-pro-footer__office-address {
font-style: inherit;
}
.havena-pro-footer__contact li + li {
margin-top: 1rem;
}
.havena-pro-footer__contact svg {
width: 17px;
height: 17px;
color: var(--havena-pro-footer-accent, var(--havena-pro-gold));
flex: none;
margin-top: 3px;
}
.havena-pro-footer__contact a:hover {
color: var(--havena-pro-footer-link-hover, var(--havena-pro-footer-accent, var(--havena-pro-gold)));
}
.havena-pro-footer__bottom {
position: relative;
z-index: 1;
border-top: 1px solid var(--havena-pro-footer-border, var(--havena-pro-line-dark));
padding: 1.5rem 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
font-size: var(--havena-pro-fs-xs);
color: rgba(255, 255, 255, 0.42);
}
.havena-pro-footer__bottom a:hover,
.havena-pro-footer__bottom a:focus-visible {
color: var(--havena-pro-footer-link-hover, var(--havena-pro-footer-accent, var(--havena-pro-gold)));
}
.havena-pro-footer__legal {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
}
@media (max-width: 560px) {
.havena-pro-footer__bottom {
flex-direction: column;
align-items: start;
text-align: start;
}
}
/* ------------------------------------------------------------
15. FLOATING UI — back to top, contact, cookie
------------------------------------------------------------ */
.havena-pro-to-top {
position: fixed;
bottom: calc(1.6rem + env(safe-area-inset-bottom, 0px));
z-index: 900;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--havena-pro-navy-900);
color: var(--havena-pro-color-dark-text);
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--havena-pro-shadow);
opacity: 0;
visibility: hidden;
transform: translateY(16px);
transition: opacity 0.4s var(--havena-pro-ease),
visibility 0.4s var(--havena-pro-ease),
transform 0.4s var(--havena-pro-ease),
background-color 0.4s var(--havena-pro-ease);
}
/*
* Position is semantic via data-position (default bottom-center).
* Center uses 50vw + translateX(-50%) so the control is truly viewport-centered
* even when a classic scrollbar skews left/right:0 + margin:auto math.
*/
.havena-pro-to-top[data-position="bottom-center"],
.havena-pro-to-top:not([data-position]) {
left: 50vw;
right: auto;
transform: translate3d(-50%, 16px, 0);
}
.havena-pro-to-top[data-position="bottom-left"] {
left: 1.6rem;
right: auto;
transform: translateY(16px);
}
.havena-pro-to-top[data-position="bottom-right"] {
left: auto;
right: 1.6rem;
transform: translateY(16px);
}
.havena-pro-to-top.is-visible {
opacity: 1;
visibility: visible;
}
.havena-pro-to-top[data-position="bottom-left"].is-visible,
.havena-pro-to-top[data-position="bottom-right"].is-visible {
transform: translateY(0);
}
.havena-pro-to-top[data-position="bottom-center"].is-visible,
.havena-pro-to-top:not([data-position]).is-visible {
transform: translate3d(-50%, 0, 0);
}
.havena-pro-to-top:hover {
background: var(--havena-pro-blue);
}
.havena-pro-to-top[data-position="bottom-left"]:hover,
.havena-pro-to-top[data-position="bottom-right"]:hover {
transform: translateY(-4px);
}
.havena-pro-to-top[data-position="bottom-center"]:hover,
.havena-pro-to-top:not([data-position]):hover {
transform: translate3d(-50%, -4px, 0);
}
.havena-pro-to-top:focus-visible {
outline: var(--havena-pro-focus-width) solid var(--havena-pro-focus-color);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.havena-pro-to-top {
transition: none;
}
}
.havena-pro-to-top svg {
width: 18px;
height: 18px;
}
/* Single Property mobile chrome (dock/CTA/actions) — hide Back to top ≤900 only there. */
@media (max-width: 900px) {
body.havena-pro-is-property-single .havena-pro-to-top {
display: none !important;
}
}
/* Floating contact */
.havena-pro-float-contact {
position: fixed;
bottom: 1.6rem;
z-index: 900;
/* H32 — Root must not form a hit slab; only toggle/open items receive events. */
pointer-events: none;
}
.havena-pro-float-contact--left {
left: 1.6rem;
right: auto;
}
.havena-pro-float-contact--right {
right: 1.6rem;
left: auto;
}
.havena-pro-float-contact__toggle {
width: 56px;
height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, var(--havena-pro-blue), var(--havena-pro-blue-deep));
color: var(--havena-pro-color-dark-text);
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--havena-pro-shadow-blue);
transition: transform var(--havena-pro-speed-fast) var(--havena-pro-ease);
pointer-events: auto;
}
.havena-pro-float-contact__toggle:hover {
transform: scale(1.08);
}
.havena-pro-float-contact__toggle svg {
width: 23px;
height: 23px;
transition: transform 0.35s var(--havena-pro-ease);
}
.havena-pro-float-contact.is-open .havena-pro-float-contact__toggle svg {
transform: rotate(135deg);
}
.havena-pro-float-contact__menu {
position: absolute;
bottom: calc(100% + 0.9rem);
left: 0;
display: flex;
flex-direction: column;
gap: 0.6rem;
/* Closed items still size this box; never let the empty menu intercept clicks. */
pointer-events: none;
}
.havena-pro-float-contact--right .havena-pro-float-contact__menu {
left: auto;
right: 0;
}
.havena-pro-float-contact__item {
display: flex;
align-items: center;
gap: 0.75rem;
background: var(--havena-pro-card-background);
border-radius: var(--havena-pro-radius-pill);
padding: 0.5rem 1.1rem 0.5rem 0.5rem;
box-shadow: var(--havena-pro-shadow);
font-size: var(--havena-pro-fs-sm);
font-weight: var(--havena-pro-type-weight-button);
color: var(--havena-pro-ink);
opacity: 0;
visibility: hidden;
transform: translateY(10px) scale(0.95);
pointer-events: none;
transition: opacity 0.35s var(--havena-pro-ease),
visibility 0.35s var(--havena-pro-ease),
transform 0.35s var(--havena-pro-ease);
}
.havena-pro-float-contact.is-open .havena-pro-float-contact__item {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.havena-pro-float-contact.is-open .havena-pro-float-contact__item:nth-child(2) { transition-delay: 0.05s; }
.havena-pro-float-contact.is-open .havena-pro-float-contact__item:nth-child(3) { transition-delay: 0.1s; }
.havena-pro-float-contact__item:hover {
transform: translateX(4px);
}
.havena-pro-float-contact--right .havena-pro-float-contact__item:hover {
transform: translateX(-4px);
}
.havena-pro-float-contact__item span {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--havena-pro-color-dark-text);
flex: none;
}
.havena-pro-float-contact__item svg {
width: 17px;
height: 17px;
}
.havena-pro-float-contact__item--whatsapp span { background: #25D366; }
.havena-pro-float-contact__item--call span { background: var(--havena-pro-navy-900); }
.havena-pro-float-contact__item--email span { background: var(--havena-pro-gold-deep); }
/* Cookie banner */
.havena-pro-cookie {
position: fixed;
bottom: 1.6rem;
left: 50%;
transform: translate(-50%, 140%);
z-index: 950;
width: min(680px, calc(100vw - 2.5rem));
background: var(--havena-pro-card-background);
border-radius: var(--havena-pro-radius);
box-shadow: var(--havena-pro-shadow-lg);
border: 1px solid var(--havena-pro-line);
padding: 1.25rem 1.5rem;
display: flex;
align-items: center;
gap: 1.25rem;
transition: transform 0.6s var(--havena-pro-ease);
}
.havena-pro-cookie.is-visible {
transform: translate(-50%, 0);
}
.havena-pro-cookie[hidden] {
display: none;
}
@media (prefers-reduced-motion: reduce) {
.havena-pro-cookie {
transition: none;
}
}
.havena-pro-cookie__icon {
width: 44px;
height: 44px;
flex: none;
border-radius: 50%;
background: var(--havena-pro-gold-soft);
color: var(--havena-pro-gold-deep);
display: flex;
align-items: center;
justify-content: center;
}
.havena-pro-cookie__icon svg {
width: 22px;
height: 22px;
}
.havena-pro-cookie__text {
flex: 1;
font-size: var(--havena-pro-fs-sm);
color: var(--havena-pro-slate);
}
.havena-pro-cookie__text strong {
display: block;
color: var(--havena-pro-ink);
margin-bottom: 0.1rem;
}
.havena-pro-cookie__text a {
color: var(--havena-pro-blue);
font-weight: var(--havena-pro-type-weight-button);
}
.havena-pro-cookie__actions {
display: flex;
gap: 0.6rem;
flex: none;
}
@media (max-width: 640px) {
.havena-pro-cookie {
flex-direction: column;
text-align: center;
}
.havena-pro-cookie__actions {
width: 100%;
}
.havena-pro-cookie__actions .havena-pro-btn {
flex: 1;
}
}
/* ------------------------------------------------------------
16. REVEAL ANIMATIONS
------------------------------------------------------------ */
.havena-pro-reveal {
opacity: 0;
transform: translateY(34px);
transition: opacity 0.85s var(--havena-pro-ease), transform 0.85s var(--havena-pro-ease);
transition-delay: var(--havena-pro-delay, 0s);
will-change: opacity, transform;
}
.havena-pro-reveal--left {
transform: translateX(-40px);
}
.havena-pro-reveal--right {
transform: translateX(40px);
}
.havena-pro-reveal--zoom {
transform: scale(0.93);
}
.havena-pro-reveal.is-inview {
opacity: 1;
transform: none;
}
/* Short AJAX reveal — keep cards usable immediately after inject/append. */
.havena-pro-reveal.havena-pro-reveal--ajax {
transform: translateY(10px);
transition-duration: 0.22s;
}
.havena-pro-reveal.havena-pro-reveal--ajax.is-inview {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001s !important;
transition-duration: 0.001s !important;
scroll-behavior: auto !important;
}
.havena-pro-reveal,
.havena-pro-reveal.havena-pro-reveal--ajax {
opacity: 1;
transform: none;
}
}
/* ------------------------------------------------------------
17. INLINE ICON UTILITY (prevents unsized SVGs)
------------------------------------------------------------ */
.havena-pro-ico {
display: inline-flex;
width: 1.1em;
height: 1.1em;
flex: none;
vertical-align: -0.2em;
}
.havena-pro-ico svg {
width: 100%;
height: 100%;
}
/* ------------------------------------------------------------
18. MOBILE DRAWER v2 — search, quick tiles, icons, recents
------------------------------------------------------------ */
.havena-pro-drawer__panel {
background: var(--havena-pro-bg);
}
.havena-pro-drawer__search {
display: flex;
align-items: center;
gap: 0.7rem;
margin: calc(1.1rem * var(--havena-pro-drawer-density-scale, 1)) calc(1.5rem * var(--havena-pro-drawer-density-scale, 1)) 0;
padding: 0.15rem 0.3rem 0.15rem 1rem;
border: 1.5px solid var(--havena-pro-line);
border-radius: var(--havena-pro-radius-pill);
transition: border-color var(--havena-pro-speed-fast);
}
.havena-pro-drawer__search:focus-within {
border-color: var(--havena-pro-blue);
}
.havena-pro-drawer__search svg {
width: 17px;
height: 17px;
flex: none;
}
/* Loupe (direct child) stays muted; submit arrow inherits primary button text. */
.havena-pro-drawer__search > svg {
color: var(--havena-pro-slate-light);
}
.havena-pro-drawer__search .havena-pro-btn {
color: var(--havena-pro-button-primary-text);
}
.havena-pro-drawer__search .havena-pro-btn svg {
color: inherit;
}
.havena-pro-drawer__search input {
flex: 1;
min-width: 0;
border: 0;
background: transparent;
padding: 0.6rem 0;
font-size: var(--havena-pro-fs-sm);
color: var(--havena-pro-ink);
}
.havena-pro-drawer__search input:focus,
.havena-pro-drawer__search input:focus-visible {
outline: var(--havena-pro-focus-width) solid var(--havena-pro-focus-color);
outline-offset: 2px;
}
.havena-pro-drawer__tiles {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: calc(0.55rem * var(--havena-pro-drawer-density-scale, 1));
margin: calc(1.1rem * var(--havena-pro-drawer-density-scale, 1)) calc(1.5rem * var(--havena-pro-drawer-density-scale, 1)) 0.25rem;
}
.havena-pro-drawer__tile {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
padding: 0.8rem 0.25rem;
border: 1px solid var(--havena-pro-line);
border-radius: var(--havena-pro-radius-sm);
background: var(--havena-pro-bg-soft);
font-size: 0.68rem;
font-weight: var(--havena-pro-type-weight-label);
color: var(--havena-pro-slate);
text-align: center;
transition: border-color var(--havena-pro-speed-fast) var(--havena-pro-ease),
color var(--havena-pro-speed-fast) var(--havena-pro-ease),
transform var(--havena-pro-speed-fast) var(--havena-pro-ease);
}
.havena-pro-drawer__tile svg {
width: 19px;
height: 19px;
color: var(--havena-pro-blue);
}
.havena-pro-drawer__tile:active,
.havena-pro-drawer__tile:hover {
border-color: var(--havena-pro-blue);
color: var(--havena-pro-blue-deep);
transform: translateY(-2px);
}
.havena-pro-drawer__link-ico {
display: inline-flex;
align-items: center;
gap: 0.75rem;
}
.havena-pro-drawer__link-ico svg {
width: 18px;
height: 18px;
color: var(--havena-pro-gold-deep);
}
.havena-pro-drawer__label {
font-size: var(--havena-pro-fs-xs);
font-weight: var(--havena-pro-type-weight-body-strong);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--havena-pro-slate-light);
margin: 1.5rem 0 0.4rem;
}
.havena-pro-drawer__label + .havena-pro-mega__desc {
margin: 0 0 0.55rem;
}
.havena-pro-drawer__recent {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0.65rem 0;
}
.havena-pro-drawer__recent img {
width: 62px;
height: 48px;
flex: none;
border-radius: var(--havena-pro-radius-xs);
object-fit: cover;
}
.havena-pro-drawer__recent strong {
display: block;
font-size: var(--havena-pro-fs-sm);
line-height: 1.3;
color: var(--havena-pro-ink);
}
.havena-pro-drawer__recent small {
color: var(--havena-pro-slate-light);
font-size: var(--havena-pro-fs-xs);
}
.havena-pro-drawer__recent .havena-pro-drawer__recent-price {
margin-left: auto;
font-weight: var(--havena-pro-type-weight-card-value);
font-size: var(--havena-pro-fs-xs);
color: var(--havena-pro-blue);
white-space: nowrap;
}
.havena-pro-drawer__switch {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.9rem 0;
border-top: 1px solid var(--havena-pro-line);
margin-top: 1rem;
font-size: var(--havena-pro-fs-sm);
font-weight: var(--havena-pro-type-weight-button);
color: var(--havena-pro-ink);
}
.havena-pro-drawer__switch-label {
display: inline-flex;
align-items: center;
gap: 0.7rem;
}
.havena-pro-drawer__switch-label svg {
width: 17px;
height: 17px;
color: var(--havena-pro-gold-deep);
}
.havena-pro-mode-toggle {
position: relative;
width: 48px;
height: 27px;
border-radius: 27px;
background: var(--havena-pro-bg-mist);
transition: background var(--havena-pro-speed-fast);
flex: none;
}
.havena-pro-mode-toggle::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--havena-pro-card-background);
box-shadow: var(--havena-pro-shadow-xs);
transition: transform var(--havena-pro-speed) var(--havena-pro-ease);
}
.havena-pro-mode-toggle[aria-pressed="true"] {
background: var(--havena-pro-blue);
}
.havena-pro-mode-toggle[aria-pressed="true"]::after {
transform: translateX(21px);
}
/* ------------------------------------------------------------
19. DARK MODE (html.havena-pro-dark — toggled from the drawer)
------------------------------------------------------------ */
html.havena-pro-dark {
color-scheme: dark;
--havena-pro-color-background: #0A1322;
--havena-pro-color-surface: #0E1A2E;
--havena-pro-color-surface-muted: #16253C;
--havena-pro-color-text: #EDF2FA;
--havena-pro-color-heading: #EDF2FA;
--havena-pro-color-muted: #98A6BC;
--havena-pro-color-muted-light: #6E7F98;
--havena-pro-color-border: #1E2C45;
--havena-pro-color-primary-soft: rgba(46, 107, 255, 0.14);
--havena-pro-color-accent-soft: rgba(200, 169, 106, 0.12);
--havena-pro-card-background: #101D33;
--havena-pro-shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.35);
--havena-pro-shadow-md: 0 14px 40px rgba(0, 0, 0, 0.45);
--havena-pro-shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.55);
}
html.havena-pro-dark body {
background: var(--havena-pro-color-background);
}
html.havena-pro-dark .havena-pro-property,
html.havena-pro-dark .havena-pro-property-card,
html.havena-pro-dark .havena-pro-panel,
html.havena-pro-dark .havena-pro-side-card,
html.havena-pro-dark .havena-pro-agent,
html.havena-pro-dark .havena-pro-post,
html.havena-pro-dark .havena-pro-value,
html.havena-pro-dark .havena-pro-widget,
html.havena-pro-dark .havena-pro-service,
html.havena-pro-dark .havena-pro-plan:not(.havena-pro-plan--featured),
html.havena-pro-dark .havena-pro-filters,
html.havena-pro-dark .havena-pro-agency-card,
html.havena-pro-dark .havena-pro-agency-tile,
html.havena-pro-dark .havena-pro-office,
html.havena-pro-dark .havena-pro-contact-card,
html.havena-pro-dark .havena-pro-search-card,
html.havena-pro-dark .havena-pro-dash__side,
html.havena-pro-dark .havena-pro-dstat,
html.havena-pro-dark .havena-pro-role,
html.havena-pro-dark .havena-pro-testimonial--light,
html.havena-pro-dark .havena-pro-compare-scroll,
html.havena-pro-dark .havena-pro-skeleton,
html.havena-pro-dark .havena-pro-step,
html.havena-pro-dark .havena-pro-acc__item,
html.havena-pro-dark .havena-pro-billing-toggle,
html.havena-pro-dark .havena-pro-drawer__panel,
html.havena-pro-dark .havena-pro-search-popup__panel,
html.havena-pro-dark .havena-pro-quickview__panel,
html.havena-pro-dark .havena-pro-quickview__body,
html.havena-pro-dark .havena-pro-cookie {
/* Independent surfaces — never inherit Menu Panels Custom. */
background: var(--havena-pro-card-background);
}
/* Desktop Dropdown + Mega only: Menu Panels Custom may tint these in Dark Mode. */
html.havena-pro-dark .havena-pro-dropdown,
html.havena-pro-dark .havena-pro-mega {
background: var(--havena-pro-menu-panel-background, var(--havena-pro-card-background));
}
html.havena-pro-dark .havena-pro-input,
html.havena-pro-dark .havena-pro-select,
html.havena-pro-dark .havena-pro-textarea,
html.havena-pro-dark .havena-pro-check__box,
html.havena-pro-dark .havena-pro-icon-btn,
html.havena-pro-dark .havena-pro-pills button,
html.havena-pro-dark .havena-pro-save-search,
html.havena-pro-dark .havena-pro-toolbar__filters-btn,
html.havena-pro-dark .havena-pro-pagination__btn,
html.havena-pro-dark .havena-pro-social-btn,
html.havena-pro-dark .havena-pro-pay-method,
html.havena-pro-dark .havena-pro-search-card__freq select {
background: var(--havena-pro-bg-soft);
color: var(--havena-pro-ink);
}
html.havena-pro-dark .havena-pro-header.is-sticky,
html.havena-pro-dark .havena-pro-header:not(.havena-pro-header--transparent) {
background: var(--havena-pro-header-background, rgba(10, 19, 34, 0.9));
}
html.havena-pro-dark .havena-pro-header--transparent.is-sticky {
background: var(--havena-pro-header-background, rgba(10, 19, 34, 0.92));
}
html.havena-pro-dark .havena-pro-section--soft {
background: var(--havena-pro-bg-soft);
}
html.havena-pro-dark .havena-pro-partners,
html.havena-pro-dark .havena-pro-auth__panel {
background: var(--havena-pro-bg);
}
html.havena-pro-dark .havena-pro-prose--clamp::after {
background: linear-gradient(to bottom, transparent, var(--havena-pro-card-background));
}
html.havena-pro-dark .havena-pro-view-toggle {
background: var(--havena-pro-bg-soft);
}
html.havena-pro-dark .havena-pro-view-toggle button.is-active {
background: var(--havena-pro-bg-mist);
}
html.havena-pro-dark .havena-pro-score__ring::before,
html.havena-pro-dark .havena-pro-mode-toggle::after {
background: var(--havena-pro-card-background);
}
html.havena-pro-dark .havena-pro-map {
background: linear-gradient(160deg, #12213A, #0E1A2E);
border-color: var(--havena-pro-line);
}
/* ------------------------------------------------------------
20. RESPONSIVE REFINEMENTS (global audit fixes)
------------------------------------------------------------ */
@media (max-width: 560px) {
.havena-pro-announce__msg {
font-size: var(--havena-pro-fs-xs);
}
.havena-pro-announce__msg a {
display: none;
}
/* H77: Social icons live in msg--social; keep them tappable on small screens. */
.havena-pro-announce__msg--social .havena-pro-social-links a {
display: inline-flex;
}
.havena-pro-hero__rating {
font-size: var(--havena-pro-fs-xs);
/* nowrap owned by home.css Hero mobile rules — do not force wrap here */
}
.havena-pro-section-head--split {
align-items: flex-start;
}
.havena-pro-pagination {
flex-wrap: wrap;
}
.havena-pro-toolbar__sort {
width: 100%;
}
.havena-pro-toolbar__sort .havena-pro-select {
flex: 1;
width: 100%;
}
}
@media (max-width: 480px) {
.havena-pro-profile-stats,
.havena-pro-facts {
grid-template-columns: 1fr !important;
}
.havena-pro-dhead__price strong {
font-size: 1.7rem;
}
.havena-pro-drawer__tiles {
grid-template-columns: repeat(2, 1fr);
}
.havena-pro-btn--lg {
padding: 1rem 1.6rem;
font-size: 0.95rem;
}
.havena-pro-cta__actions .havena-pro-btn {
width: 100%;
}
}
@media (max-height: 500px) and (orientation: landscape) {
.havena-pro-hero,
.havena-pro-dhero {
min-height: 140vh;
}
.havena-pro-search-popup {
padding-top: 2rem;
}
}
h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
/* ------------------------------------------------------------
21. SCREEN-READER-ONLY UTILITY
------------------------------------------------------------ */
.havena-pro-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* ------------------------------------------------------------
22. CHROME OVERLAYS — toast + quick view (moved from archive)
------------------------------------------------------------ */
/* ------------------------------------------------------------
QUICK VIEW MODAL
------------------------------------------------------------ */
.havena-pro-quickview {
position: fixed;
inset: 0;
z-index: 1200;
display: flex;
align-items: center;
justify-content: center;
padding: var(--havena-pro-gutter);
visibility: hidden;
pointer-events: none;
}
.havena-pro-quickview.is-open {
visibility: visible;
pointer-events: auto;
}
.havena-pro-quickview__overlay {
position: absolute;
inset: 0;
background: var(--havena-pro-overlay-dark);
backdrop-filter: blur(10px);
opacity: 0;
transition: opacity 0.35s var(--havena-pro-ease);
}
.havena-pro-quickview.is-open .havena-pro-quickview__overlay {
opacity: 1;
}
.havena-pro-quickview__panel {
position: relative;
width: min(880px, 100%);
max-height: min(620px, 90vh);
background: var(--havena-pro-card-background);
border-radius: var(--havena-pro-radius-lg);
box-shadow: var(--havena-pro-shadow-lg);
display: grid;
grid-template-columns: 1.1fr 1fr;
overflow: hidden;
opacity: 0;
transform: translateY(26px) scale(0.97);
transition: opacity 0.4s var(--havena-pro-ease), transform 0.4s var(--havena-pro-ease);
}
.havena-pro-quickview.is-open .havena-pro-quickview__panel {
opacity: 1;
transform: translateY(0) scale(1);
}
.havena-pro-quickview__media {
position: relative;
min-height: 320px;
}
.havena-pro-quickview__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.havena-pro-quickview__media .havena-pro-badge {
position: absolute;
top: 1.1rem;
left: 1.1rem;
z-index: 1;
}
.havena-pro-quickview__body {
padding: 2rem 1.9rem;
overflow-y: auto;
display: flex;
flex-direction: column;
}
.havena-pro-quickview__type {
font-size: var(--havena-pro-fs-xs);
font-weight: var(--havena-pro-type-weight-label);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--havena-pro-gold-deep);
margin-top: 0;
margin-bottom: 0.4rem;
}
.havena-pro-quickview__title {
font-size: 1.5rem;
margin-top: 0;
margin-bottom: 0.4rem;
}
.havena-pro-quickview__loc {
display: flex;
align-items: center;
gap: 0.45rem;
color: var(--havena-pro-slate);
font-size: var(--havena-pro-fs-sm);
margin-top: 0;
margin-bottom: 1.1rem;
}
.havena-pro-quickview__loc svg {
width: 15px;
height: 15px;
color: var(--havena-pro-gold-deep);
}
.havena-pro-quickview__price {
font-size: 1.65rem;
font-weight: var(--havena-pro-type-weight-card-value);
color: var(--havena-pro-blue);
/* Explicit top reset: editor iframe loads wp-admin `p { margin: 1em 0 }` +
`:where(.editor-styles-wrapper) p { margin: revert }` which otherwise stack
on top of margin-bottom-only (P2.6.10). */
margin-top: 0;
margin-bottom: 1.25rem;
}
.havena-pro-quickview__price span {
font-size: 0.95rem;
font-weight: var(--havena-pro-type-weight-nav);
color: var(--havena-pro-slate);
}
.havena-pro-quickview__specs {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.85rem;
padding: 1.15rem 0;
border-top: 1px solid var(--havena-pro-line);
border-bottom: 1px solid var(--havena-pro-line);
margin-bottom: 1.4rem;
}
.havena-pro-quickview__spec {
display: flex;
align-items: center;
gap: 0.6rem;
font-size: var(--havena-pro-fs-sm);
color: var(--havena-pro-slate);
}
.havena-pro-quickview__spec svg {
width: 18px;
height: 18px;
color: var(--havena-pro-slate-light);
flex: none;
}
.havena-pro-quickview__spec strong {
color: var(--havena-pro-ink);
}
.havena-pro-quickview__actions {
margin-top: auto;
display: flex;
gap: 0.7rem;
}
.havena-pro-quickview__close {
position: absolute;
top: 1rem;
right: 1rem;
z-index: 2;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--havena-pro-overlay-frost);
color: var(--havena-pro-ink);
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--havena-pro-shadow-sm);
transition: background-color var(--havena-pro-speed-fast),
color var(--havena-pro-speed-fast),
transform var(--havena-pro-speed-fast);
}
.havena-pro-quickview__close:hover {
background: var(--havena-pro-navy-900);
color: var(--havena-pro-color-dark-text);
transform: rotate(90deg);
}
.havena-pro-quickview__close svg {
width: 17px;
height: 17px;
}
@media (max-width: 780px) {
.havena-pro-quickview__panel {
grid-template-columns: 1fr;
max-height: 92vh;
}
.havena-pro-quickview__media {
min-height: 220px;
}
}
/* ------------------------------------------------------------
COPIED TOAST
------------------------------------------------------------ */
.havena-pro-toast {
position: fixed;
bottom: 5.5rem;
left: 50%;
transform: translate(-50%, 20px);
z-index: 1300;
background: var(--havena-pro-navy-950);
color: var(--havena-pro-color-dark-text);
font-size: var(--havena-pro-fs-sm);
font-weight: var(--havena-pro-type-weight-button);
padding: 0.8rem 1.4rem;
border-radius: var(--havena-pro-radius-pill);
box-shadow: var(--havena-pro-shadow-lg);
display: flex;
align-items: center;
gap: 0.6rem;
opacity: 0;
visibility: hidden;
transition: opacity 0.35s var(--havena-pro-ease),
visibility 0.35s var(--havena-pro-ease),
transform 0.35s var(--havena-pro-ease);
}
.havena-pro-toast.is-visible {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0);
}
.havena-pro-toast svg {
width: 16px;
height: 16px;
color: var(--havena-pro-gold);
}
/* ------------------------------------------------------------
23. TYPOGRAPHIC REFINEMENT (creative-director pass)
------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
text-wrap: balance;
}
.havena-pro-section-sub,
.havena-pro-page-hero__sub,
.havena-pro-hero__sub {
text-wrap: pretty;
}
/* .havena-pro-btn letter-spacing merged into the section 4 definition. */
.havena-pro-property__price,
.havena-pro-stat__value,
.havena-pro-dhead__price strong {
font-variant-numeric: tabular-nums;
}
/* ------------------------------------------------------------
24. SHARED MOTION & A11Y UTILITIES
------------------------------------------------------------ */
/* Canonical skeleton shimmer — referenced by archive.css and
home-map.css loading states. Defined once to avoid duplicate
@keyframes names across bundles. */
@keyframes havena-pro-shimmer {
to { background-position: -120% 0; }
}
/* Consistent, token-driven focus ring for form controls. */
.havena-pro-input:focus-visible,
.havena-pro-select:focus-visible,
textarea.havena-pro-input:focus-visible,
.havena-pro-textarea:focus-visible {
outline: var(--havena-pro-focus-width) solid var(--havena-pro-form-focus);
outline-offset: 2px;
}
/* Honor reduced-motion preferences across every page bundle.
Keeps content fully visible; simply removes decorative motion. */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.havena-pro-reveal {
opacity: 1;
transform: none;
}
}