THE BRWN EFFECT EXPERIENCE
More than a place to stay.
Discover thoughtfully selected luxury vacation homes designed for meaningful moments together. From family getaways to extended stays, we bring together exceptional spaces, personal hospitality, and the comfort of feeling at home.
Discover Our Approach
SPACES WORTH EXPERIENCING
/* ==========================================
BRWN EFFECT — EVERY MOMENT
FULL WIDTH TEXT + DAY/NIGHT SLIDER
========================================== */
.bep-moments,
.bep-moments * {
box-sizing: border-box;
}
.bep-moments {
width: 100vw;
max-width: none;
position: relative;
left: 50%;
margin-left: -50vw;
background: #FFFFFF;
padding: clamp(75px, 8vw, 125px) 0;
color: #29231F;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.bep-moments__inner {
width: 100%;
max-width: 1600px;
margin: 0 auto;
padding: 0 clamp(24px, 5.5vw, 90px);
display: grid;
grid-template-columns:
minmax(0, 0.85fr)
minmax(0, 1.35fr);
gap: clamp(38px, 5vw, 90px);
align-items: center;
}
/* LEFT — TEXT */
.bep-moments__content {
min-width: 0;
}
.bep-moments__eyebrow {
display: block;
margin-bottom: 25px;
color: #9A806C;
font-size: 11px;
font-weight: 600;
letter-spacing: .22em;
}
.bep-moments h2 {
margin: 0;
color: #29231F;
font-size: clamp(42px, 4.2vw, 68px);
font-weight: 400;
line-height: 1.07;
letter-spacing: -.045em;
}
.bep-moments__description {
max-width: 440px;
margin: 28px 0 0;
color: #716B65;
font-size: 17px;
line-height: 1.8;
}
.bep-moments__link {
display: inline-flex;
align-items: center;
gap: 15px;
margin-top: 35px;
padding-bottom: 9px;
border-bottom: 1px solid #9A806C;
color: #29231F;
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: gap .25s ease;
}
.bep-moments__link:hover {
gap: 23px;
}
/* RIGHT — IMAGE SLIDER */
.bep-moments__visual {
min-width: 0;
}
.bep-moments__compare {
--split: 50%;
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
border-radius: 7px;
isolation: isolate;
background: #302720;
}
/* BOTH IMAGES REMAIN FULL SIZE */
.bep-moments__compare .bep-moments__photo {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
object-fit: cover !important;
object-position: center !important;
transform: none !important;
pointer-events: none;
}
.bep-moments__night {
z-index: 1;
}
.bep-moments__day {
z-index: 2;
clip-path: inset(
0 calc(100% - var(--split)) 0 0
);
}
/* DIVIDING LINE */
.bep-moments__divider {
position: absolute;
z-index: 3;
top: 0;
bottom: 0;
left: var(--split);
width: 2px;
background: #FFFFFF;
transform: translateX(-50%);
pointer-events: none;
}
/* SLIDER HANDLE */
.bep-moments__handle {
position: absolute;
z-index: 4;
top: 50%;
left: var(--split);
transform: translate(-50%, -50%);
width: 54px;
height: 54px;
display: flex;
align-items: center;
justify-content: center;
background: #FFFFFF;
color: #3A2E28;
border: 1px solid rgba(58,46,40,.1);
border-radius: 50%;
box-shadow: 0 5px 22px rgba(0,0,0,.2);
pointer-events: none;
}
.bep-moments__handle svg {
display: block;
width: 27px;
height: 27px;
}
/* DAY / NIGHT LABELS */
.bep-moments__label {
position: absolute;
z-index: 5;
top: 20px;
padding: 9px 14px;
color: #FFFFFF;
background: rgba(35,30,27,.5);
border: 1px solid rgba(255,255,255,.3);
border-radius: 40px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
font-size: 10px;
font-weight: 600;
letter-spacing: .15em;
line-height: 1;
pointer-events: none;
}
.bep-moments__label--day {
left: 20px;
}
.bep-moments__label--night {
right: 20px;
}
/* INVISIBLE INTERACTIVE CONTROL */
.bep-moments__range {
position: absolute !important;
inset: 0;
z-index: 6;
display: block;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
opacity: 0 !important;
appearance: none;
-webkit-appearance: none;
background: transparent;
cursor: ew-resize;
touch-action: pan-y;
}
.bep-moments__range::-webkit-slider-thumb {
appearance: none;
-webkit-appearance: none;
width: 1px;
height: 100%;
border: 0;
}
.bep-moments__range::-moz-range-thumb {
width: 1px;
height: 100%;
border: 0;
}
.bep-moments__compare:focus-within {
outline: 2px solid #9A806C;
outline-offset: 3px;
}
.bep-moments__hint {
margin: 14px 0 0;
color: #968B81;
font-size: 11px;
letter-spacing: .06em;
text-align: center;
}
/* TABLET */
@media (max-width: 1024px) {
.bep-moments__inner {
grid-template-columns: 1fr;
gap: 45px;
}
.bep-moments__content {
max-width: 700px;
}
.bep-moments h2 {
font-size: clamp(43px, 6vw, 65px);
}
}
/* MOBILE */
@media (max-width: 767px) {
.bep-moments {
padding: 75px 0;
}
.bep-moments__inner {
padding: 0 22px;
gap: 40px;
}
.bep-moments h2 {
font-size: clamp(39px, 10vw, 52px);
}
.bep-moments__description {
margin-top: 22px;
font-size: 15px;
line-height: 1.75;
}
.bep-moments__compare {
aspect-ratio: 4 / 4.5;
}
.bep-moments__handle {
width: 44px;
height: 44px;
}
.bep-moments__label {
top: 14px;
padding: 8px 10px;
font-size: 9px;
}
.bep-moments__label--day {
left: 14px;
}
.bep-moments__label--night {
right: 14px;
}
}
DAY
NIGHT
(function () {
function initialize() {
document.querySelectorAll(".bep-moments__compare")
.forEach(function(slider) {
if (slider.dataset.ready === "true") return;
const range = slider.querySelector(
".bep-moments__range"
);
if (!range) return;
slider.dataset.ready = "true";
function update(value) {
const position = Math.max(
0,
Math.min(100, Number(value))
);
slider.style.setProperty(
"--split",
position + "%"
);
range.setAttribute(
"aria-valuetext",
Math.round(position) +
" percent daytime view"
);
}
function pointerValue(event) {
const rect = slider.getBoundingClientRect();
return Math.max(
0,
Math.min(
100,
((event.clientX - rect.left) / rect.width) * 100
)
);
}
let dragging = false;
range.addEventListener(
"pointerdown",
function(event) {
dragging = true;
if (range.setPointerCapture) {
range.setPointerCapture(event.pointerId);
}
range.value = pointerValue(event);
update(range.value);
}
);
range.addEventListener(
"pointermove",
function(event) {
if (!dragging) return;
range.value = pointerValue(event);
update(range.value);
}
);
function stopDragging() {
dragging = false;
}
range.addEventListener("pointerup", stopDragging);
range.addEventListener("pointercancel", stopDragging);
range.addEventListener(
"lostpointercapture",
stopDragging
);
range.addEventListener("input", function() {
update(range.value);
});
update(range.value);
});
}
if (document.readyState === "loading") {
document.addEventListener(
"DOMContentLoaded",
initialize
);
} else {
initialize();
}
})();
EXPERIENCE EVERY MOMENT
Every moment of the day, beautifully yours.
From sun-filled afternoons to unforgettable evenings, discover a more personal way to experience luxury vacation rentals. Spacious homes, inviting surroundings, and thoughtful hospitality create the perfect setting for families and friends to enjoy time together.
Explore Our Properties
DAY
NIGHT
DRAG TO EXPLORE DAY & NIGHT