@charset "utf-8";
/* CSS Document */
:root {
scroll-behavior: auto !important;
--text-dark: #2F2718; /*#111111;*/
--text-dark-choco: #2F2718;
--text-gray: #9A9A92;
--text-Brown: #816F5C;
--text-Bright: #F9F8F4;
--text-Content: #9A9A92;
--text-Link-Content: #9A9A92;
}
body, html, .container, .container-fluid, .col, .row, table, tr, td, tbody{
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif !important;
font-size:14px;
line-height: 25px;
letter-spacing: 0px;
/*color: rgba(17, 17, 17, 0.6);*/
/*color: #919189;*/
color: var(--text-Content);
}
body{
background-color: #faf7f5;
}
html, body {
overflow-y: auto !important;
overflow-x: hidden; /* Tetap aman untuk mencegah layout melebar ke samping */
}
html {
height: auto !important;
}
/* No !important on body height: ScrollSmoother sets an inline height on
to create the native scroll distance — it must win here. */
body {
height: auto;
}
.container-fluid{
width: 100%;
max-width: 1440px;
margin-left: auto;
margin-right: auto;
}
/* Full-bleed contexts keep their full width: content laid over
edge-to-edge images/backgrounds, plus the site chrome (header/footer). */
.headerWraper .container-fluid,
.footer .container-fluid,
.footerPromoBanner .container-fluid,
.img-bg .container-fluid,
.parallax-bg .container-fluid,
.parallaxVideo-bg .container-fluid,
.carouselBgTextWraper .container-fluid,
.text-top-fitScreenImg-Wraper .container-fluid,
.text-top-content-Wraper .container-fluid{
max-width: 1920px;
}
/*
ul{
list-style: none;
padding: 0;
margin: 0;
}
*/
b{
font-weight: 700;
}
.odd-contetBg{background-color: #FAF8F5 !important;}
.even-contetBg{background-color:#f1f0e8 !important;}
.whiteBg-color{background-color: #FFFFFF;}
.descriptionLong{
max-width: 450px;
}
h1,h2,h3,h4,h5,h6{
font-family: 'Philosopher', 'Philosopher Fallback', serif;
letter-spacing:1px;
/*color: #111111;*/
}
h1{
font-size: 36px;
letter-spacing: -0.5px;
}
.text-left{
text-align: left !important;
}
.text-GreyColor{
color: var(--text-gray) !important;
}
.text-ColorBright, .brightText{
/*color: #F9F8F4!important;*/
color: var(--text-Bright) !important;
}
.text-ColorDark, .darkText{
color: var(--text-dark);
}
.text-dark-choco{
color: var(--text-dark-choco);
}
.text-ColorBrown{
/*color: #816F5C !important;*/
color: var(--text-Brown);
}
.textContent{
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif !important;
font-size:14px;
line-height: 25px;
letter-spacing: 0px;
color: var(--text-Content);
/*color: rgba(17, 17, 17, 0.6);*/
}
.textContent a{
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif ;
font-size:14px;
line-height: 25px;
letter-spacing: 0px;
color: var(--text-Link-Content);
text-decoration: none;
}
.text-justify {
text-align: justify;
}
.headerText-Handwritten{
font-family: 'Millanova', cursive;
font-size: 25px;
padding: 0px;
margin-bottom: -20px;
margin-top: 50px;
}
.headerTextTitle{
font-family: 'Philosopher', 'Philosopher Fallback', serif !important;
font-size: 36px;
line-height: 30px;
color: var(--text-dark);
}
.subTextTitle{
font-family: 'Philosopher', 'Philosopher Fallback', serif !important;
font-size: 28px; /*32*/
line-height: 35px;
color: var(--text-dark);
}
.small-subTextTitle{
font-family: 'Philosopher', 'Philosopher Fallback', serif !important;
font-size: 18px;
line-height: 32px;
color: var(--text-dark);
}
.small-hedingText{
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif !important;
font-size:14px;
line-height: 25px;
letter-spacing: 1.3px;
text-transform: uppercase;
}
.nav-link{
text-transform: uppercase;
letter-spacing: 1.8px;
}
/* Renders with the real Montserrat SemiBold face (see font-stylesheet.css).
Only 'Montserrat' Regular is declared for the base family, so a plain
font-weight:500/600 here would fall back to Regular or synthesise bold. */
.fw-medium{
font-family: 'Montserrat SemiBold', 'Montserrat', sans-serif !important;
font-weight: normal;
}
.fw-medium *{
font-weight: 700;
}
/*text-top fit screen images*/
.text-top-fitScreenImg-Wraper{ /*carouselBgTextWraper*/
position: relative;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 1;
/*background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(45, 39, 26, 0.8) 100%);*/
background-color: #2d271a;
}
.carouselContentTextWraper{
position: relative; width: 100%; top: 0px; left: 0px; padding: 30px;
}
@media (min-width: 1024px) {
.text-top-fitScreenImg-Wraper{
position: absolute !important;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 1;
background: linear-gradient(0deg, rgba(249, 247, 245, 0) 0%, rgba(0, 0, 0, 0.6));
background-color: transparent !important;
}
.carouselContentTextWraper{
position: absolute;
width: 45%;
top: 50% !important; transform: translateY(-50%);
left: 50px;
}
}
@media (min-width: 1200px) {
.carouselContentTextWraper{
position: absolute; width: 40%; top: 180px; left: 100px;
}
}
.text-top-content-Wraper{
position: relative;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 3;
background-color: #2d271a;
}
.text-content-posision-top{
position: relative; width: 100%; top: 0px; left: 0px;
}
.text-content-posision-bottom{
position: relative; width: 100%; bottom: 0px; left: 0px;
}
@media (min-width: 1280px) {
.text-top-content-Wraper{
position: absolute !important;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
/*background: linear-gradient(0deg, rgba(249, 247, 245, 0) 0%, rgba(0, 0, 0, 0.6));*/
background-color: transparent !important;
}
.text-content-posision-top{
position: absolute;
width: 100%;
left: 50% !important; transform: translatex(-50%);
top: 72px;
}
.text-content-posision-bottom{
position: absolute;
width: 100%;
left: 50% !important; transform: translatex(-50%);
bottom: 72px;
}
}
/*.brightText{
color: #F9F8F4 !important;
color: var(--text-Bright);
}
.darkText{
color: #000000 !important;
color: var(--text-dark);
}*/
@media (min-width: 767.98px) {
body, html, .container, .container-fluid, .col, .row, table, tr, td, tbody{
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif !important;
font-size:16px;
}
.textContent{
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif !important;
font-size: 16px;
}
.textContent a{
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
font-size: 16px;
}
.small-hedingText{
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif !important;
font-size:14px;
line-height: 25px;
letter-spacing: 1.8px;
}
h1{
font-size: 48px;
}
.headerText-Handwritten{
font-family: 'Millanova', cursive;
font-size: 40px;
padding: 0px;
margin-bottom: auto;
margin-top: 60px;;
}
.headerTextTitle{
font-family: 'Philosopher', 'Philosopher Fallback', serif !important;
font-size: 58px;
color: var(--text-dark);
/*margin-top: -30px !important;*/
line-height: normal;
/*color: var(--text-Bright);*/
}
}
.paddingNol{
padding:0px !important
}
.marginNol{
margin:0px !important
}
.marginNolAuto{
margin:0 auto !important
}
.headerWraper{
position: fixed !important;
top:0px;
width:100%;
padding:0px 24px;
z-index: 999;
background-color: transparent;
transition: background-color 0.4s ease, mix-blend-mode 0.4s ease;
isolation: isolate;
}
@media (max-width: 767.98px) {
.headerWraper{
padding:12px 0px;
}
}
.headerWraper.scrolled {
background-color: #faf7f5 !important;
mix-blend-mode: difference !important;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.headerFixed{
background-color: #faf7f5 !important;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
@keyframes fadeIn {
from {
opacity: 0; /* Start at opacity 0 */
}
to {
opacity: 1; /* End at opacity 1 */
}
}
.animated-element {
width: 100px;
height: 100px;
background-color: blue;
position: relative; /* Essential for positioning with 'top' */
animation: slideDown 0.5s ease-in-out forwards; /* Apply the animation */
}
@keyframes slideDown {
0% {
transform: translateY(-100px); /* Start 100px above its natural position */
opacity: 0; /* Optional: start invisible */
}
100% {
transform: translateY(0); /* End at its natural position */
opacity: 1; /* Optional: end fully visible */
}
}
.logo{
padding:0px 0px 0px 0px;
max-height: 80px;
/*filter: brightness(100);*/
}
.logoProperty{
max-width: 120px !important;
height: auto;
padding:0px 0px 0px 0px;
position:relative;
z-index:9;
}
.logoBright{
/*filter: brightness(100);*/
filter: brightness(0) invert(1);
-webkit-filter: brightness(0) invert(1);
}
.gradientTopBright:before{
content: '';
z-index: 1;
width: 100%;
height: 40%;
display: block;
position: absolute;
background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(249, 248, 244, 1) 100%);
/*background: linear-gradient(0deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); */
/*background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));*/
}
.gradientBottomBright:before{
content: '';
z-index: 1;
width: 100%;
height: 40%;
display: block;
position: absolute;
bottom: 0px;
background: linear-gradient(0deg, rgba(249, 248, 244, 1) 10%, rgba(0, 0, 0, 0) 100%);
/*background: linear-gradient(0deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); */
/*background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));*/
}
.gradientBottomBrown:before{
content: '';
z-index: 1;
width: 100%;
height: 30%;
display: block;
position: absolute;
bottom: 0px;
background: linear-gradient(0deg, rgba(45, 39, 26, 1) 10%, rgba(255, 255, 255, 0) 100%);
/*background: linear-gradient(0deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); */
/*background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));*/
}
.gradientTopBrown{
content: '';
z-index: 1;
width: 100%;
height: 30%;
display: block;
position: absolute;
bottom: 0px;
background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(45, 39, 26, 1) 100%);
/*background: linear-gradient(0deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); */
/*background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));*/
}
.gradientBottomDark:before{
content: '';
z-index: 1;
width: 100%;
height: 100%;
display: block;
position: absolute;
bottom: 0;
/*background: linear-gradient(180deg, rgba(17, 17, 17, 0.00) 60%, rgba(17, 17, 17, 0.6) 87.74%, rgba(17, 17, 17, .8) 100%);*/
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, 0.80) 100%), no-repeat;
}
.gradientTopDark:before{
content: '';
z-index: 0;
width: 100%;
height: 100%;
display: block;
position: absolute;
bottom: 0;
background: linear-gradient(0deg,rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0,0.8) 100%), no-repeat;;
}
@media (max-width: 359.98px) {
#headerWraper{
padding:15px 0px 10px 0px!important;
max-height:105px !important;
}
}
/*center potition/*/
.CentrePosision {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
}
.CenterVH {
width: auto;
height: auto;
}
.CenterVH img {
display: block;
}
.bottomVH {
width: 100%;
margin-top: auto;
padding-bottom: 48px;
}
.container-CenteredVH{
display:table;
vertical-align: middle;
width: 100%;
}
.content-CenteredVH{
display:table;
vertical-align: middle; align-items: center;
width: 100%;
}
/*ytvidoe*/
.parallax-bg,
.parallaxVideo-bg,
.img-bg {
text-align: center;
color: #fff;
width: 100%;
height: 100vh;
height: 100dvh;
padding: 0;
margin: 0;
position: relative;
background-color: #000;
background-repeat: no-repeat;
background-position: center center;
background-attachment: scroll;
background-size: cover;
}
/* Overlay */
/*
.parallax-bg::after,
.parallaxVideo-bg::after,
.img-bg::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: transparent;
z-index: 1;
pointer-events: none;
}
*/
/*
.parallax-bg, .parallaxVideo-bg, .img-bg{
width: auto !important;
height: 100vh !important;
text-align: center;
color: #fff;
background-color: #faf7f5;
background-repeat: no-repeat;
background-position: center center;
background-attachment: scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding:0px;
position:relative;
z-index:0;
top: 0px !important;
left: 0px !important;
min-height: 100vh;
min-height: -moz-available;
min-height: -webkit-fill-available;
min-height: fill-available;
}
.parallax-bg:after, .parallaxVideo-bg:after, .img-bg:after{
width: 100%;
height: 100vh !important;
text-align: center;
color: #fff;
background-color: #faf7f5;
background-repeat: no-repeat;
background-position: center center;
background-attachment: scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding:0px;
position:relative;
z-index:0;
top: 0px !important;
left:0;
right:0 ;
min-height: 100vh;
min-height: -moz-available;
min-height: -webkit-fill-available;
min-height: fill-available;
}
@media (min-width:768px) {
.parallax-bg, .parallaxVideo-bg{
width: 100% !important;
height: 100vh !important;
padding: 0;
min-height: 100vh;
min-height: -moz-available;
min-height: -webkit-fill-available;
min-height: fill-available;
}
}
*/
/* background-attachment: fixed is never used: iOS Safari (iPhone/iPad) cannot
paint fixed+cover backgrounds at all, and inside the ScrollSmoother transform
it degrades on every browser. The !important also overrides the inline
"background-attachment: fixed" that jquery.mb.YTPlayer's changeCoverImage()
stamps onto its containment (#headerPlayer / .img-bg) on video-hero pages. */
/*
.parallax-bg, .parallaxVideo-bg, .img-bg, #headerPlayer {
background-attachment: scroll !important;
}
*/
/*@media (min-width:1280px) and @media (max-width:1359px){*/
@media only screen and (min-width: 1280px) {
.parallaxVideo-bg{
width: 100% !important;
height: 100vh !important;
min-height: 100vh; /* fall-back */
min-height: -moz-available;
min-height: -webkit-fill-available;
min-height: fill-available;
}
}
@media (max-width: 1199.98px) {
.fancybox-slide{
padding:0px !important;
}
}
/*
@media (min-aspect-ratio: 16/9) {
#myPlayer .mbYTP_wrapper iframe, #myPlayer2 .mbYTP_wrapper iframe{
height: 56.25vw !important;
}
}
@media (max-aspect-ratio: 16/9) {
#myPlayer .mbYTP_wrapper iframe, #myPlayer2 .mbYTP_wrapper iframe{
width: 177.78vh !important;
}
}
*/
/*
.play-buttonWrapper{
background-color: rgba(255,255,255,0.3);
max-width: 200px;
height: 55px;
display: block;
cursor: pointer;
position: relative;
margin: 0 auto;
padding: 10px 10px;
color: #FFFFFF !important;
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
font-size:22px;
}
*/
.play-buttonWrapper{
background-color: rgba(255,255,255,0.3);
max-width: 200px;
height: 55px;
display: block;
cursor: pointer;
position: relative;
margin: 0 auto;
padding: 10px 10px;
color: #FFFFFF !important;
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
font-size:22px;
z-index: 15;
}
/*
.play-buttonWrapper a{
color: #FFFFFF !important;
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
font-size:22px;
text-decoration: none;
}
*/
.play-buttonWrapper a{
color: #FFFFFF !important;
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif;
font-size:16px;
text-decoration: none;
}
.player-button {
background: none;
width: 35px;
height: 35px;
border-radius: 100%;
position: relative;
text-indent:-9999px;
/*
border: solid 2px #fff;
box-shadow: 1px 1px 3px #999999;
*/
}
.player-button span {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-left: 15px solid #fff;
border-bottom: 10px solid transparent;
position:absolute;
top:30%;
left:36%;
}
/*=================*/
/* Play-video pill: centered over the hero/media on mobile AND tablet.
The buttons are all .d-xl-none, so this never reaches desktop. */
@media (max-width: 1199.98px){
/* play pill floats at the hero's vertical middle */
.play-buttonWrapper{
position: absolute;
left: 50%;
top: 48%;
transform: translate(-50%, -50%);
margin: 0;
width: auto;
max-width: none;
height: auto;
padding: 10px 16px;
}
.play-buttonWrapper a{
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
letter-spacing: -0.42px;
}
.play-buttonWrapper a .p-2{ padding: 0 !important; }
.play-buttonWrapper a .pe-1{ padding: 0 !important; }
.play-buttonWrapper .player-button{
width: 24px;
height: 24px;
}
.play-buttonWrapper .player-button span{
border-top-width: 7px;
border-left-width: 11px;
border-bottom-width: 7px;
top: 50%;
left: 50%;
margin: 0;
transform: translate(-50%, -50%);
}
}
/* the spacer that used to sit between the heading and the in-flow play
button is dead weight once the pill is absolutely centered */
@media (min-width: 768px) and (max-width: 1199.98px){
.bottomVH .h-32px{ display: none; }
}
/*=================*/
/*
.player-button:hover{
background:#4ccaea;
cursor:pointer;
opacity:0.8;
border:none;
position:absolute;
width: 50px;
height: 50px;
box-shadow:none;
}
.player-button:hover span{
top:25%;
left:38%;
}
*/
#myPlayer, #myPlayer2 {
height: 100vh; width: 100%;
position: relative;
background-attachment: scroll;
/*background-attachment: fixed !important;*/
/*min-height: 100vh; */ /* fall-back */
}
#myPlayer2{
background-color: #f1f0e8 !important;
}
@media (max-width: 1279px) {
#myPlayer, #myPlayer2{display: none !important;}
}
.SectionNav {
position: relative;
width: 100%;
display: inline-block;
height:100%;
bottom: 0px;
z-index: 97;
}
.SectionNavWrap {
position: absolute;
width: 100%;
/*display: inline-block !important;*/
bottom: 0px;
z-index: 98;
text-align: right;
padding-right:15px !important;
/*add*/
display: flex !important;
align-items: center;
justify-content: end;
}
/*nav bar*/
.navbar-nav > li{
/*border-right:#FFF solid 0px !important;*/
margin: 3px 10px 0px 10px;
/*padding:0px 15px !important;*/
}
.navbar-nav > li:last-child{
/*border-right: 0px;*/
}
.navbar-nav > li > a {
color: #F9F8F4 !important;
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif !important;
font-size:16px;
opacity: 50%;
/*padding:0px 15px !important;*/
}
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus
{
color: #F5F5DC !important;
text-decoration: none;
background-color: transparent !important;
opacity: 100%;
}
.bookNowHpWraper{
max-width: 200px;
text-align: center;
position: relative;
/*add height*/
height: 100%;
}
.btnBookNow, .btnBookNow-Fullbar{
font-family: 'Philosopher', 'Philosopher Fallback', serif !important;
font-size:20px;
letter-spacing:1px;
vertical-align:bottom;
padding:10px 14px;
cursor: pointer;
display: flex;
text-decoration: none;
}
.btnBookNow{
transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease;
position: relative;
color: #fff;
background-color: transparent;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.btnBookNow-Fullbar{
color: #5c4e3f;
}
.btnBookNow:hover{
background-color: #000000 !important;
color: #F9F8F4;
}
.btnBookNow-Fullbar:hover{
background-color: #5c4e3f !important;
color: #F9F8F4;
}
.btnBookNow-Fullbar:hover .arrow-right{
filter: brightness(0) invert(1);
-webkit-filter: brightness(0) invert(1);
}
/*
.headerWraper .btnBookNow a{
color:#F9F8F4 !important;
text-decoration: none;
}
.headerWraper .btnBookNow a:hover{
color: #F5F5DC !important;
text-decoration: none;
}
*/
.burgerMenuWrap{
margin-left:8px;
padding:12px 12px;
vertical-align:bottom;
}
.brightBorderSolid{
/*border: 1px solid #F9F8F4;*/
border: 1px solid rgba(255, 255, 255, 0.30);
}
.darkBorderSolid{
border: 1px solid #5c4e3f;
}
.mainNav{
padding-right:30px;
margin-bottom: 0px;
}
@media only screen and (max-width: 1359.8px) {
.mainNav {
display: none !important;
}
}
@media (min-width: 1280px) {
.navbar-expand-xl .navbar-collapse {
display: flex !important;
-ms-flex-preferred-size: auto;
flex-basis: auto;
}
}
.NavbarIcon {
width:25px; height:20px;display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.headerWraper .burgerMenuList{
width:100%;
background:#F9F8F4;
border-radius: 25px;
height: 2px !important;
color: #F9F8F4 !important;
}
/* (old fullscreen-nav overlay CSS removed — replaced by .menuOverlay, end of file) */
.headerTitle-ParentPosition{
position:absolute;
width:100% !important;
height:100% !important;
/*text-align:center;*/
display: table;
/*vertical-align:middle !important;*/
z-index:10;
}
.headerTitle-CenteredElement{
position: absolute; bottom: 56px; left: 50%; transform: translateX(-50%);width:100% !important;
}
.arrow-right-Wrapper{
padding-left: 15px;
float: right;
}
.arrow-right{
display: inline-block;
background-image: url("../component-img/arrow-right.svg");
background-repeat: no-repeat;
background-size: 30px auto;
background-position: center center;
margin-top: 5px; margin-left: auto; width: 30px; height: 17px; position: absolute;
right: 20px; top: auto
}
.buttonBoxBrown{
background-color: #816F5C;
color: #F9F8F4 !important; text-decoration: none;
text-align: left;
vertical-align: bottom;
padding: 16;
/*height: 50px;*/
}
/* =====================================================================
Primary button — rebuilt from scratch (Figma 6655:49593)
Legacy markup, unchanged:
The is the flex container; the inner wrapper is flattened with
display:contents so Bootstrap's responsive d-* classes can't break
the layout at any breakpoint. Doubled class selectors out-rank the
per-page `.Reserve-BtnWrap{width:300px !important}` inline styles.
===================================================================== */
.buttonBoxWrap.buttonBoxWrap, .Reserve-BtnWrap.Reserve-BtnWrap{
display: inline-block !important;
width: auto !important;
min-width: 0 !important;
max-width: 100% !important;
position: relative;
vertical-align: middle;
}
/* `.marginNolAuto` combos rely on auto margins to centre — needs block */
.buttonBoxWrap.marginNolAuto{
display: block !important;
width: fit-content !important;
}
.buttonBoxLink, .buttonBoxReserve{
box-sizing: border-box;
display: inline-flex;
align-items: center;
gap: 24px; /* label <-> arrow, per design */
width: auto;
max-width: 100%;
height: 50px;
padding: 0 6px 0 22px;
background-color: #816F5C;
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif !important;
font-size: 16px;
font-weight: 400;
line-height: 1;
letter-spacing: -0.8px;
white-space: nowrap;
color: #FAF7F5 !important;
text-decoration: none !important;
transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
}
.buttonBoxLink > div, .buttonBoxReserve > div{
display: contents !important;
}
.buttonBoxLink .float-start, .buttonBoxReserve .float-start{
float: none !important;
margin: 0;
padding: 0;
width: auto !important;
}
/* Arrow as a currentColor mask: always renders, always matches the
label colour — no image path or brightness-filter dependency */
.buttonBoxLink .arrow-right, .buttonBoxReserve .arrow-right{
position: static !important;
float: none !important;
flex: 0 0 40px;
width: 40px !important;
height: 40px !important;
margin: 0 !important;
padding: 0 !important;
background: currentColor !important;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012.957%209.062'%3E%3Cg%20transform='rotate(90%206.4785%206.4785)'%3E%3Cpath%20d='M0.311%206.525C1.511%205.571%202.558%204.431%203.357%203.124C3.956%202.144%204.531%200.956%204.531%200M4.531%2012.957L4.531%200C4.531%200.956%205.106%202.145%205.705%203.124C6.505%204.431%207.552%205.571%208.75%206.525'%20fill='none'%20stroke='black'%20stroke-width='1.1'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 13px auto;
mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012.957%209.062'%3E%3Cg%20transform='rotate(90%206.4785%206.4785)'%3E%3Cpath%20d='M0.311%206.525C1.511%205.571%202.558%204.431%203.357%203.124C3.956%202.144%204.531%200.956%204.531%200M4.531%2012.957L4.531%200C4.531%200.956%205.106%202.145%205.705%203.124C6.505%204.431%207.552%205.571%208.75%206.525'%20fill='none'%20stroke='black'%20stroke-width='1.1'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 13px auto;
filter: none;
-webkit-filter: none;
}
/* darken with a fade on hover */
.buttonBoxLink:hover, .buttonBoxLink:focus-visible{
background-color: #675949 !important;
color: #FAF7F5 !important;
}
/* outline variant keeps the same skeleton */
.buttonBoxReserve{
background-color: transparent;
border: 1px solid #816F5C;
color: #816F5C !important;
}
.buttonBoxReserve:hover, .buttonBoxReserve:focus-visible{
background-color: #816F5C !important;
color: #FAF7F5 !important;
}
/* mobile: primary buttons stretch edge to edge, label left / arrow right
(same pattern as the fullscreen-menu CTA) */
@media (max-width: 767.98px){
.buttonBoxWrap.buttonBoxWrap, .Reserve-BtnWrap.Reserve-BtnWrap{
display: block !important;
width: 100% !important;
}
.buttonBoxLink, .buttonBoxReserve{
width: 100%;
justify-content: space-between;
}
}
.Btn-ExploreMore{
display: flex;
padding: 16px 8px 4px 8px;
position: relative;
bottom: 5px;
}
.Btn-ExploreMore a{
color: #1A1A1A;
text-decoration: none;
padding: 5px 0px;
border-bottom: 2px solid #D4C4A8;
font-size: 14px;
letter-spacing: 1.8px;
}
/***/
/* Arrow inside the button: animate slide and color smoothly */
.btnBookNow .arrow-right{
transition: transform 240ms ease, filter 240ms ease, opacity 240ms ease;
transform: translateX(0);
}
.btnBookNow:hover{
background-color: #ffffff !important;
color: #000000 !important;
border-color: #ffffff !important;
}
.btnBookNow:hover .arrow-right{
transform: translateX(6px);
filter: none !important;
-webkit-filter: none !important;
}
/* Brown buttons: slightly darken on hover and slide arrow right */
.buttonBoxBrown, .btnBookNow-Fullbar {
transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease;
}
.buttonBoxBrown:hover,
.btnBookNow-Fullbar:hover {
background-color: #2F2718 !important; /* slightly darker brown */
color: #F9F8F4 !important; /* keep text light */
}
.buttonBoxBrown .arrow-right,
.btnBookNow-Fullbar .arrow-right {
transition: transform 240ms ease, opacity 240ms ease;
}
.buttonBoxBrown:hover .arrow-right,
.btnBookNow-Fullbar:hover .arrow-right {
transform: translateX(6px);
}
/***/
@media (min-width: 576px) {
.btnBookNow, .btnBookNow-Fullbar{
padding: 10px 25px;
}
}
.sub-content-ShowAll{
display: none;
margin-bottom: 30px;
}
.read-More{
display: block;
}
.show-less{
display: none;
}
.solide-GryLine{
border: solid 1px #E5E5E0;
}
.Standard-Benefits, .Standard-Benefits-All{
}
.Standard-Benefits > ul, .Standard-Benefits-All > ul {
list-style:none;
margin: 0;
padding: 0 !important;
column-count: 2;
column-gap: 5%;
width: 100%;
min-height: 96px;
height: inherit;
vertical-align: top;
display: grid;
/* Defines two columns, each taking up an equal fraction of the available space */
grid-template-columns: calc((100% - 5%) / 2) calc((100% - 5%) / 2);
}
.Standard-Benefits > ul li, .Standard-Benefits-All > ul li {
border-bottom: 0.75px solid #E7E7DF;
padding: 24px 0px 24px 0px;
display: flex;
vertical-align: top;
min-height: 96px;
}
.Standard-Benefits > ul li:nth-child(odd), .Standard-Benefits-All > ul li:nth-child(odd) {
grid-column: 1;
}
.Standard-Benefits > ul li:nth-child(even), .Standard-Benefits-All > ul li:nth-child(even) {
grid-column: 2;
}
.Standard-Benefits > ul li:last-child, .Standard-Benefits-All > ul li:last-child{
border-bottom: none;
}
.Standard-Benefits > ul li:nth-last-child(2), .Standard-Benefits-All > ul li:nth-last-child(2) {
border-bottom: none;
}
.Standard-Benefits-All > ul li:first-child, .Standard-Benefits-All > ul li:nth-child(2) {
border-top: 0.75px solid #E7E7DF;
}
/*
.Standard-Benefits .icon-Img-Wraper, .Standard-Benefits-All .icon-Img-Wraper{
width: 48px;
padding-right: 16px !important;
float: left;
vertical-align: top;
}*/
.icon-Img-Wraper{
width: 40px;
padding-right: 16px !important;
float: left;
vertical-align: top;
display: inline-block;
}
.Standard-Benefits img, .Standard-Benefits-All img{
width: 32px; height: 32px;
}
@media only screen and (max-width: 1199.98px){
.Standard-Benefits > ul, .Standard-Benefits-All > ul {
float:left;
list-style:none;
margin: 0;
padding: 0 !important;
column-count: 1 !important;
column-gap: 0 !important;
column-width: 100%;
display: inline-block;
}
.Standard-Benefits > ul li:last-child, .Standard-Benefits-All > ul li:last-child{
border-bottom: none;
}
.Standard-Benefits > ul li:nth-last-child(2), .Standard-Benefits-All > ul li:nth-last-child(2) {
border-top: 0.75px solid #E7E7DF !important;
}
.Standard-Benefits-All > ul li:first-child{
border-top: 0.75px solid #E7E7DF;
}
.Standard-Benefits-All > ul li:nth-child(2) {
border-top: none;
}
}
/* footer section */
.footer{
width: 100%;
background-color: #816F5C;
color: #faf7f5;
}
.footer a{
color: white;
text-decoration: none;
}
.footer_content{
width: 80%;
height: 100%;
padding: 100px 0 40px 0px;
}
.footer_Heading{
opacity: 50%;
}
.footer-page .footerContentText{
letter-spacing: 0;
}
.footer_topContent{
padding-bottom: 100px;
}
.footer_botContent{
opacity: 50%;
padding-top: 72px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.footer_rightMenu{
height: 100%;
}
.footer_rightMenu ul{
list-style: none;
padding: 0;
margin: 0;
}
.footer_menu>p{
margin-bottom: 32px;
}
.footer_menu ul li:not(:last-child) {
margin-bottom: 12px;
}
.footer_socmed-icons{
display: flex;
gap: 16px;
}
.footer_socmed-icons a img{
width: 32px;
}
.socMedImgBrightColor, .imgBrightfilter {
filter: brightness(0) invert(1);
-webkit-filter: brightness(0) invert(1);
}
.socMed-img{
max-width: 40px !important; display: inline-block; padding-right: 10px;
}
.paddingSpace{
padding: auto;
}
/*header use ytplayer*/
#headerPlayer .mbYTP_wrapper
{
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
/*display: block; */
}
#headerPlayer .mbYTP_wrapper iframe{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 110%;
width: auto;
height: auto;
/*border: 0;
-webkit-transform: translate(-50%, -50%) scale(1) !important;
transform: translate(-50%, -50%) scale(1.1);
transform-origin: center center;
*/
}
#headerPlayer .mbYTP_wrapper iframe {
transform-origin: center center !important;
/*transform: scale(1) !important;*/
border: none !important;
outline: none !important;
box-shadow: 0 0 0 0 transparent !important;
/*
-webkit-transform: scale(1) !important;
transform-origin: center center !important;
transform: scale(1) !important;
*/
}
@media (max-width: 1199.98px) {
#headerPlayer .mbYTP_wrapper{
display: none !important;
height: 0 !important;
min-height: 0 !important;
overflow: hidden !important;
visibility: hidden !important;
}
#headerPlayer .player-cover-wrap { display: none !important; }
}
.video-portrait-wrap .mbYTP_wrapper
{
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
/*background: #000; /* Fills 16:10 spacing with a clean black background */
display: block;
}
.video-portrait-wrap .mbYTP_wrapper iframe{
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1.2); transform-origin: center center; min-width: 100%; min-height: 110%; width: auto; height: auto; border: 0; }
.video-portrait-wrap .mbYTP_wrapper iframe {
-webkit-transform: scale(1.2) !important; /* Dukungan browser lama Safari/Chrome */
transform-origin: center center !important;
transform: scale(1.2) !important;
}
@media (max-width: 1199.98px) {
.video-portrait-wrap .mbYTP_wrapper{
display: none !important;
height: 0 !important;
min-height: 0 !important;
overflow: hidden !important;
visibility: hidden !important;
}
.video-portrait-wrap .mbYTP_wrapper { display: none !important; }
}
.mbYTP_wrapper,
.mbYTP_wrapper iframe {
transform: none !important;
}
/* Experience-section portrait video (homepage + the 7 room pages), desktop.
The reset above strips the translate() that used to centre the iframe, so
it was left anchored at 50% and pushed right -> black bar on the left.
Centre it with margin:auto inside an over-sized inset box instead (needs no
transform). Sizing: the clips are PORTRAIT (9:16) uploads, which YouTube
pillarboxes inside its 16:9 player - so the visible picture is only
9/16 of the player height wide. To cover the 566x800 frame that picture
must be >= 566px wide => player height >= 566*16/9 = 1006px = 126% of
800. Use 132% (a little bleed), width = 1.32*(800/566)*(16/9) = 332%.
!important so the plugin's inline width/height never win. */
@media (min-width: 1200px) {
.activitiesSection #myPlayer2 .mbYTP_wrapper,
.activitiesSection .video-portrait-wrap .mbYTP_wrapper{
position: absolute !important;
top: 0; right: 0; bottom: 0; left: 0;
width: 100% !important;
height: 100% !important;
overflow: hidden;
}
.activitiesSection #myPlayer2 .mbYTP_wrapper iframe,
.activitiesSection .video-portrait-wrap .mbYTP_wrapper iframe{
position: absolute !important;
top: -9999px !important;
right: -9999px !important;
bottom: -9999px !important;
left: -9999px !important;
margin: auto !important;
width: 332% !important;
height: 132% !important;
max-width: none !important;
min-width: 0 !important;
min-height: 0 !important;
/* the legacy scale(1.2) rule above out-specifies the transform reset;
the 20% zoom is already baked into the 120% height, so drop it */
transform: none !important;
-webkit-transform: none !important;
}
}
/*video cover header*/
/* Responsive centered video cover - custom player
Uses absolute-centering + min-width/min-height so iframe always covers and is centered
not use
*/
#customPlayer, #customPlayer .video-cover-wrap {
position: relative; width: 100%; height: 100vh; overflow: hidden;
}
#customPlayer .video-cover-wrap {
display: block;
}
#customPlayer .video-cover-wrap iframe {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1.15); transform-origin: center center; min-width: 100%; min-height: 110%; width: auto; height: auto; border: 0; }
/* Small screens: keep the same behavior but limit height to a comfortable size */
/* @media (max-width: 767.98px) {
#customPlayer, #customPlayer .video-cover-wrap { height: 56vw; }
} */
/* Hide the hero video completely on tablet & mobile widths (below 1200px) */
@media (max-width: 1199.98px) {
#customPlayer {
display: none !important;
height: 0 !important;
min-height: 0 !important;
overflow: hidden !important;
visibility: hidden !important;
}
/* ensure inner wrap doesn't take space */
#customPlayer .video-cover-wrap { display: none !important; }
}
/*/video cover header*/
/*************************/
@media (max-width: 767.8px){
/*.arrow-right{display: none !important;}*/
.logoPostionWrapFullBar{
left: 0px;
max-height: 60px;
}
.logoProperty{
max-width: 120px !important;
height: auto;
}
}
/* mobile footer layout lives at the end of this file (Figma 10010:28981) */
@media (min-width: 768px){
.btnBookNow, .btnBookNow-Fullbar{
width:200px !important;
}
.paddingSpace{
padding: 56px;
}
}
@media (min-width: 1400px){
.paddingSpace{
padding: 120px 144px 120px 144px;
}
}
@media (min-width: 1200px) {
.content-CenteredVH{
display:table-cell; vertical-align: middle; align-items: center; height: 100vh; width: 100%;
}
}
@media (orientation:landscape) {
.footerPromoBanner{
background-image: url("../../uploads-img/footer-promo-bg.webp");
}
}
@media (orientation:portrait) {
.footerPromoBanner{
background-image: url("../../uploads-img/footer-promo-bg-portrait.webp");
}
}
/*for home*/
@media (min-width: 1441px) {
.img-about{
padding-right: 50px;
}
.bigSidePadding{
padding: 0 300px;
}
.section_ai{
padding: 0 100px;
}
}
.footerPromoBanner{
/* height: 900px !important; */
}
.finalcta_section{
display: flex;
padding-top: 120px;
padding-left: 100px;
box-sizing: border-box;
}
@media (max-width: 767.98px) {
.finalcta_section{
display: flex;
padding-top: 120px;
padding-left: 1vw;
box-sizing: border-box;
}
}
/*** form */
.form-container {
width: 100%;
max-width: 500px;
padding: 20px;
}
.form-group {
margin-bottom: 25px;
}
.form-group label {
display: block;
font-size: 14px;
color: #b5a187; /* Warna teks emas/tan muda */
margin-bottom: 8px;
font-weight: 400;
}
.form-group label span.required {
color: #b5a187;
margin-left: 2px;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 14px 12px;
border: 1px solid #e8e6e1;
background-color: #fbfaf7; /* Warna latar belakang kotak input */
border-radius: 0px; /* Sudut kotak tajam */
box-sizing: border-box;
font-size: 14px;
color: #333;
outline: none;
transition: border-color 0.2s;
}
.form-group input:focus,
.form-group textarea:focus {
border-color: #b5a187;
}
.submit-btn {
background-color: #7d6e5d; /* Warna cokelat tombol */
color: #ffffff;
border: none;
padding: 15px 30px;
font-size: 14px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 15px;
transition: background-color 0.2s;
}
.submit-btn:hover {
background-color: #6a5d4e;
}
.submit-btn .arrow {
font-size: 16px;
}
/*===============*/
/* inquiry form */
/*=============*/
.contac-inquiry-form .form-label-custom {
font-size: 0.8rem;
font-weight: 400;
text-transform: uppercase;
color: #888888;
letter-spacing: 2px;
margin-bottom: 10px !important;
display: block;
}
.contac-inquiry-form .form-control,
.contac-inquiry-form .form-select {
border: 1px solid #cccccc;
border-radius: 0px;
padding: 12px 15px;
color: #333333;
font-size: 0.95rem;
}
.contac-inquiry-form .form-control::placeholder {
color: #b0b0b0;
}
.contac-inquiry-form .custom-select-title {
min-width: 100px;
width: 100%;
max-width: 130px !important;
background-color: #ffffff;
}
.contac-inquiry-form .form-control:focus,
.contac-inquiry-form .form-select:focus {
border-color: #999999;
box-shadow: none;
}
.contac-inquiry-form .custom-date-input {
color: #b0b0b0;
}
.contac-inquiry-form .custom-date-input:focus {
color: #333333;
}
.contac-inquiry-form.custom-datepicker {
border-right: none;
}
.contac-inquiry-form .input-group-text {
border: 1px solid #cccccc;
border-left: none;
border-radius: 0px;
padding-right: 15px;
cursor: pointer;
}
.contac-inquiry-form .custom-datepicker:focus + .input-group-text {
border-color: #999999;
}
.submit-btn {
background-color: #7d6e5d;
/*width: 280px;*/
color: #ffffff;
border: none;
padding: 15px 30px;
font-size: 14px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 15px;
transition: background-color 0.2s;
}
.submit-btn:hover {
background-color: #6a5d4e;
}
.submit-btn .arrow {
font-size: 16px;
text-align: end !important;
}
/*** form */
/* for lazy load */
/*
.img-blur {
filter: blur(8px);
transition: filter 0.4s ease-in-out;
}
.img-blur[src$=".webp"] {
filter: blur(0);
}
*/
/* ==========================================================
Header 2026 — Figma redesign (node 9984:12806)
Transparent bar over hero: emblem logo + uppercase nav,
right cluster of 50px bordered actions.
========================================================== */
.headerBar{
display: flex;
align-items: center;
justify-content: space-between;
}
.headerBar-left{
display: flex;
align-items: center;
gap: 56px;
min-width: 0;
}
.headerLogo{
display: block;
position: relative;
z-index: 9;
}
.headerLogo img{
height: 120px;
width: auto;
display: block;
}
@media (min-width: 768px) {
.headerLogo img{
height: 120px;
}
}
/* --- primary nav --- */
.headerNav{
display: none;
}
@media (min-width: 1200px) {
.headerNav{
display: flex;
align-items: center;
gap: 32px;
}
}
.headerNavItem{
position: relative;
display: flex;
align-items: center;
}
.headerNavLink{
display: inline-flex;
align-items: center;
gap: 12px;
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif !important;
font-size: 14px !important;
line-height: 1.1;
letter-spacing: 1.8px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5) !important;
text-decoration: none !important;
white-space: nowrap;
transition: color 0.25s ease;
}
.headerNavLink:hover,
.headerNavLink.is-active{
color: #FFFFFF !important;
}
.headerNavChevron{
width: 20px;
height: 20px;
transform: rotate(180deg); /* asset is an up-chevron; design shows it down */
transition: transform 0.25s ease;
}
.headerNavItem:hover .headerNavChevron,
.headerNavItem.is-open .headerNavChevron{
transform: rotate(0deg);
}
.headerNavChevronBtn{
border: 0;
background: none;
padding: 0;
margin-left: 12px; /* same gap the link used to give the chevron */
line-height: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
}
/* --- dining dropdown --- */
.headerDropdown{
position: absolute;
top: 100%;
left: -22px;
padding-top: 20px; /* hover bridge between link and panel */
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
z-index: 60;
}
.headerNavItem:hover .headerDropdown,
.headerNavItem.is-open .headerDropdown,
.headerNavItem:focus-within .headerDropdown{
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.headerDropdownBox{
min-width: 230px;
padding: 10px 0;
background: rgba(26, 22, 15, 0.95);
border: 1px solid rgba(255, 255, 255, 0.12);
}
.headerDropdownBox a{
display: block;
padding: 12px 22px;
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif !important;
font-size: 12px !important;
line-height: 1.1;
letter-spacing: 1.8px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55) !important;
text-decoration: none !important;
white-space: nowrap;
transition: color 0.2s ease, background-color 0.2s ease;
}
.headerDropdownBox a:hover{
color: #FFFFFF !important;
background: rgba(255, 255, 255, 0.06);
}
/* Book Your Stay dropdown: right-aligned under the button */
.headerBookDropdown{
left: auto;
right: 0;
}
/* --- right action cluster --- */
.headerActions{
display: flex;
align-items: center;
gap: 9px;
}
.btnBookStay{
display: inline-flex; /* was carried by d-lg-flex before the dropdown wrapper */
align-items: center;
height: 50px;
padding: 0 32px 0 32px;
border: 1px solid rgba(255, 255, 255, 0.3);
text-decoration: none !important;
transition: background-color 0.24s ease, border-color 0.24s ease;
}
.btnBookStay-label{
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif !important;
font-size: 16px;
line-height: 1;
letter-spacing: -0.8px;
color: #FAF7F5;
white-space: nowrap;
transition: color 0.24s ease;
}
.btnBookStay-arrow{
width: 40px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.btnBookStay-arrow img{
width: 16px;
height: auto;
display: block;
}
/* over the hero (unscrolled): white outline fills solid white on hover,
label and glyphs flip to dark #2F2718 */
.btnBookStay:hover{
background-color: #FFFFFF;
border-color: #FFFFFF;
}
.btnBookStay:hover .btnBookStay-label{
color: #2F2718;
}
.headerIconBtn{
position: relative;
width: 50px;
height: 50px;
border: 1px solid rgba(255, 255, 255, 0.3);
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.24s ease, border-color 0.24s ease;
}
.headerIconBtn:hover{
background-color: #FFFFFF;
border-color: #FFFFFF;
}
.headerWraper .headerMenuBtn:hover .burgerMenuList{
background: #2F2718;
}
/* The WhatsApp glyph is an ![]()
, so a filter can only drive it to white
or black — never an exact brand hex. On hover the bitmap is swapped for
a mask of the same file, which can be painted any colour. */
.headerIconBtn:not(.headerMenuBtn):hover img{
opacity: 0;
}
.headerIconBtn:not(.headerMenuBtn):hover::after{
content: "";
position: absolute;
width: 20px;
height: 20px;
background-color: #2F2718;
-webkit-mask: url("../component-img/whatsapp.svg") no-repeat center / 20px 20px;
mask: url("../component-img/whatsapp.svg") no-repeat center / 20px 20px;
}
.headerIconBtn img{
width: 20px;
height: 20px;
display: block;
}
.headerMenuBtn{
flex-direction: column;
gap: 6px;
}
.headerWraper .headerMenuBtn .burgerMenuList{
width: 20px;
height: 1px !important;
background: #F9F8F4;
border-radius: 0;
display: block;
}
/* Book Your Stay: desktop + mobile ("Reserve"). The 768-991px tablet band
keeps its original layout (button hidden, WhatsApp hidden, burger only). */
.headerBookWrap{ display: flex; }
@media (min-width: 768px) and (max-width: 991.98px) {
.headerBookWrap{ display: none; }
}
/* mobile header - Figma node 10111:25589: 82x59 logo, 12px side padding,
42px "Reserve" outline button + 42px menu button, 6px apart */
@media (max-width: 767.98px) {
.headerWraper .container-fluid{
padding-left: 12px;
padding-right: 12px;
}
/* the emblem PNG is a square canvas with the wordmark in its middle
band; cropping it to the Figma 82x59 box keeps the artwork at the
designed size (nothing is cut off) instead of shrinking it to 59px */
.headerLogo img{
width: 90px;
height: 65px;
object-fit: cover;
object-position: center;
}
.headerActions{
gap: 6px;
}
.btnBookStay{
height: 42px;
padding: 0 6px;
}
.btnBookStay-label{
padding: 10px;
}
.headerIconBtn{
width: 42px;
height: 42px;
}
.headerBookDropdown .headerDropdownBox{
min-width: 200px;
}
}
/* Card CTAs (Make Reservation / View Menu rows) - tablet: the wrapper is
text-centred below xl; on tablet the buttons should sit flush left. */
@media (min-width: 768px) and (max-width: 1199.98px) {
.sv-content-tab{
padding: 0px 0px !important;
}
.text-center.text-lg-justify{
display: block !important;
text-align: left !important;
}
}
/* Suites & Villas listing: the card photo links to the detail page */
.suiteVillaImgLink{
display: block;
text-decoration: none !important;
cursor: pointer;
}
/* Hover feedback uses filter, NOT opacity: the entrance animation tweens
the image's opacity with GSAP, and a CSS transition on that same
property fights the tween and can leave the image stuck invisible. */
.suiteVillaImgLink img{
transition: filter 0.25s ease;
}
.suiteVillaImgLink:hover img{
filter: brightness(0.94);
}
/* --- header legibility scrim over light heroes --- */
.headerWraper{
background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 100%);
}
/* --- scrolled header: light bar, dark elements ---
.is-scrolled is toggled by ScrollTrigger; .headerFixed is the
no-GSAP fallback class. */
.headerWraper.is-scrolled,
.headerWraper.headerFixed{
background: #faf7f5;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.headerWraper.is-scrolled .headerNavLink,
.headerWraper.headerFixed .headerNavLink{
color: rgba(47, 39, 24, 0.55) !important;
}
.headerWraper.is-scrolled .headerNavLink:hover,
.headerWraper.is-scrolled .headerNavLink.is-active,
.headerWraper.headerFixed .headerNavLink:hover,
.headerWraper.headerFixed .headerNavLink.is-active{
color: #2F2718 !important;
}
.headerWraper.is-scrolled .headerNavChevron,
.headerWraper.headerFixed .headerNavChevron{
filter: brightness(0);
opacity: 0.6;
}
.headerLogo img{
transition: filter 0.3s ease;
}
.headerWraper.is-scrolled .headerLogo img,
.headerWraper.headerFixed .headerLogo img{
filter: brightness(0) opacity(0.85);
}
.headerWraper.is-scrolled .btnBookStay,
.headerWraper.is-scrolled .headerIconBtn,
.headerWraper.headerFixed .btnBookStay,
.headerWraper.headerFixed .headerIconBtn{
border-color: rgba(47, 39, 24, 0.35);
}
.headerWraper.is-scrolled .btnBookStay-label,
.headerWraper.headerFixed .btnBookStay-label{
color: #2F2718;
}
.headerWraper.is-scrolled .headerActions .imgBrightfilter,
.headerWraper.headerFixed .headerActions .imgBrightfilter{
filter: none;
-webkit-filter: none;
}
/* scrolled (light bar): the #2f271859 outline fills brand brown on hover,
label and glyphs flip to white */
.headerWraper.is-scrolled .btnBookStay:hover,
.headerWraper.is-scrolled .headerIconBtn:hover,
.headerWraper.headerFixed .btnBookStay:hover,
.headerWraper.headerFixed .headerIconBtn:hover{
background-color: #816F5C;
border-color: #816F5C;
}
.headerWraper.is-scrolled .btnBookStay:hover .btnBookStay-label,
.headerWraper.headerFixed .btnBookStay:hover .btnBookStay-label{
color: #FFFFFF;
}
.headerWraper.is-scrolled .headerMenuBtn:hover .burgerMenuList,
.headerWraper.headerFixed .headerMenuBtn:hover .burgerMenuList{
background: #FFFFFF;
}
.headerWraper.is-scrolled .headerIconBtn:not(.headerMenuBtn):hover::after,
.headerWraper.headerFixed .headerIconBtn:not(.headerMenuBtn):hover::after{
background-color: #FFFFFF;
}
.headerWraper.is-scrolled .headerMenuBtn .burgerMenuList,
.headerWraper.headerFixed .headerMenuBtn .burgerMenuList{
background: #2F2718;
}
/* ==========================================================
Activities section — Figma node 4480:9370
Beige ground, centered text column vs. portrait media block.
Shared with the room-detail pages' "Tailor Your Own Experience"
section (family-suite, honeymoon-suites, samabe-suite, and the
four luxury-bali-villas pages) — same classes, same layout, only
the copy/video/poster differ per page.
========================================================== */
.activitiesSection{
position: relative;
/* background-color: #F1F0E7; */
}
.activitiesOrnament{
position: absolute;
top: 80px;
left: calc(41.67% + 100px);
width: 40px;
height: 40px;
z-index: 2;
}
.activitiesText{
max-width: 472px;
margin: 0 auto;
}
.activitiesEyebrow{
margin-bottom: 12px;
}
.activitiesTitle{
font-family: 'Philosopher', 'Philosopher Fallback', serif !important;
font-size: 36px;
line-height: 1.1;
letter-spacing: -1.44px;
color: #111111;
margin: 0 0 32px;
}
.activitiesBody{
color: #9A9A92;
font-size: 16px;
line-height: 25px;
letter-spacing: -0.48px;
margin-bottom: 72px;
}
/* portrait media block: 566x800 like the design, video fills it */
.activitiesSection .activitiesMedia{
position: relative;
width: 100%;
max-width: 566px;
margin: 0 auto;
aspect-ratio: 566 / 800;
height: auto !important;
min-height: 0 !important;
overflow: hidden;
}
.activitiesSection .activitiesMedia .video-portrait-wrap{
position: absolute;
inset: 0;
}
.activitiesSection .activitiesMedia .video-portrait-wrap .mbYTP_wrapper{
height: 100% !important;
}
.activitiesSection .activitiesMedia #myPlayer2{
height: 100% !important;
min-height: 0 !important;
}
@media (min-width: 768px) {
.activitiesTitle{
font-size: 48px;
letter-spacing: -1.92px;
}
}
@media (max-width: 1199.98px) {
.activitiesText{
margin: 0 0 48px;
}
.activitiesSection .activitiesMedia{
max-width: 480px;
}
}
/* Tablet (768-1199px) - layout per Figma node 10108:25572. Shared by the
homepage Experience section and every room-detail "Tailor Your Own
Experience" section so they read as one design. */
@media (min-width: 768px) and (max-width: 1199.98px){
.activitiesSection{ background: #f1f0e7; }
.activitiesSection > .h-96px{ height: 120px; padding: 0; }
.activitiesSection > .container-fluid{ width: 79%; max-width: 810px; padding: 0; }
.activitiesSection .activitiesRow{ margin: 0; }
.activitiesSection .activitiesRow > [class*="col-"]{ padding: 0; width: 100%; }
.activitiesSection .activitiesText{ max-width: 472px; margin: 0 auto 100px; text-align: center; }
.activitiesSection .activitiesEyebrow{
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif !important; font-size: 14px; line-height: 1.1;
letter-spacing: 1.8px; margin-bottom: 12px; text-align: center;
}
.activitiesSection .activitiesTitle{
font-size: 48px; line-height: 1.1; letter-spacing: -1.92px;
color: #111; margin: 0 0 32px; text-align: center;
}
.activitiesSection .activitiesBody{
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif !important; font-size: 16px; line-height: 25px;
letter-spacing: -0.48px; color: #9a9a92; margin-bottom: 72px; text-align: center;
}
.activitiesSection .buttonBoxWrap{ display: flex; justify-content: center; }
.activitiesSection .activitiesMedia{
max-width: none; width: 100%; aspect-ratio: 810 / 800; margin: 0;
}
/* play pill centered inside the media block */
.activitiesSection .activitiesMedia .CentrePosision{ display: block; }
.activitiesSection .activitiesMedia .CenterVH{ display: block; position: static; }
}
/* Activities media: real ![]()
poster under the video layer, so the block
is never blank when YouTube is blocked/slow (the CSS-background poster
proved unreliable underneath the YTPlayer layer stack). */
.activitiesSection .activitiesMedia .activitiesPoster{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
.activitiesSection .activitiesMedia .video-portrait-wrap{
z-index: 1;
}
/* #myPlayer2 carries .img-bg's black background — keep it clear so the
poster shows through until the video iframe actually appears */
.activitiesSection .activitiesMedia #myPlayer2{
background-color: transparent !important;
}
/* ==========================================================
About page — live Google Map with a dark-brown brand tint.
The embed cannot be styled directly, so a sepia/hue filter
recolours it to match the location-map artwork.
========================================================== */
.samabeMapWrap{
position: relative;
width: 100%;
height: 60vh !important; /* stacked layout (mobile/tablet) */
min-height: 420px;
overflow: hidden;
background-color: #EDEAE2;
margin-left: auto;
margin-right: auto; /* centred horizontally within its column */
}
/* Desktop: the whole map section is one viewport tall, content vertically
centred; the map is sized to 80% of the text column's height and
centred within it on both axes. Absolute positioning (not flex) is used
because the shared .img-bg rule forces width:auto !important — inside a
flex column with align-items:stretch that resolves to a 0-width box, but
with left:0/right:0 set on an absolutely positioned element, width:auto
correctly fills the space between them instead. */
@media (min-width: 1200px) {
.aboutMapSection{
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
}
.aboutMapSection .aboutMapSpacer{
display: none; /* flex centring replaces the fixed spacer */
}
.aboutMapSection .col-xl-6{
position: relative;
}
.samabeMapWrap{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin-top: auto;
margin-bottom: auto;
height: 80% !important;
min-height: 384px;
}
}
.samabeMapWrap iframe{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.samabeMapLink{
position: absolute;
right: 16px;
bottom: 16px;
z-index: 2;
background: #816F5C;
color: #FAF7F5 !important;
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif !important;
font-size: 13px;
letter-spacing: 0.4px;
padding: 10px 16px;
text-decoration: none !important;
}
.samabeMapLink:hover{
background: #2F2718;
}
/* =====================================================================
Booking availability bar (Figma 6552:89240 / 89315 / 89787)
===================================================================== */
.bookingBarSection{
position: relative;
z-index: 60; /* popovers must sit above the following section */
background-color: #FFFFFF;
}
.bookingBarInner{
position: relative;
max-width: 1440px;
margin: 0 auto;
}
.bookingBarFields{
display: flex;
align-items: center;
justify-content: center;
min-height: 90px;
}
.bookingField{
display: flex;
align-items: center;
gap: 16px;
flex: 0 1 333px;
max-width: 333px;
height: 100px;
padding: 0 16px 0 32px;
background: none;
border: 0;
border-right: 1px solid #E5E5E0;
cursor: pointer;
text-align: left;
}
.bookingField:focus-visible{
outline: 2px solid #816F5C;
outline-offset: -2px;
}
.bookingFieldIcon{
width: 16px;
height: 16px;
flex: 0 0 16px;
}
.bookingFieldText{
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.bookingFieldLabel{
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif !important;
font-size: 10px;
line-height: 15px;
letter-spacing: 0.5px;
text-transform: uppercase;
color: #5A5A55;
white-space: nowrap;
}
.bookingFieldValue{
font-family: 'Philosopher', 'Philosopher Fallback', serif !important;
font-size: 18px;
line-height: 28px;
color: #1A1A1A;
white-space: nowrap;
}
.bookingField.is-placeholder .bookingFieldValue{
color: #A3A19C;
}
/* Check Rates button — same skeleton as the primary button */
.bookingCheckBtn{
box-sizing: border-box;
display: inline-flex;
align-items: center;
gap: 24px;
height: 50px;
padding: 0 6px 0 24px;
margin-left: 32px;
background-color: #816F5C;
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif !important;
font-size: 16px;
font-weight: 400;
line-height: 1;
letter-spacing: -0.8px;
white-space: nowrap;
color: #FAF7F5 !important;
text-decoration: none !important;
transition: background-color 300ms ease;
}
.bookingCheckBtn:hover, .bookingCheckBtn:focus-visible{
background-color: #675949;
color: #FAF7F5 !important;
}
.bookingCheckArrow{
flex: 0 0 40px;
width: 40px;
height: 40px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012.957%209.062'%3E%3Cg%20transform='rotate(90%206.4785%206.4785)'%3E%3Cpath%20d='M0.311%206.525C1.511%205.571%202.558%204.431%203.357%203.124C3.956%202.144%204.531%200.956%204.531%200M4.531%2012.957L4.531%200C4.531%200.956%205.106%202.145%205.705%203.124C6.505%204.431%207.552%205.571%208.75%206.525'%20fill='none'%20stroke='black'%20stroke-width='1.1'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 13px auto;
mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012.957%209.062'%3E%3Cg%20transform='rotate(90%206.4785%206.4785)'%3E%3Cpath%20d='M0.311%206.525C1.511%205.571%202.558%204.431%203.357%203.124C3.956%202.144%204.531%200.956%204.531%200M4.531%2012.957L4.531%200C4.531%200.956%205.106%202.145%205.705%203.124C6.505%204.431%207.552%205.571%208.75%206.525'%20fill='none'%20stroke='black'%20stroke-width='1.1'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 13px auto;
}
/* ---- popovers ---- */
.bookingPop{
position: absolute;
top: 100%;
left: 0;
z-index: 70;
background-color: #FFFFFF;
box-shadow: 0 18px 40px rgba(0,0,0,0.12);
opacity: 0;
transform: translateY(8px);
transition: opacity 220ms ease, transform 220ms ease;
pointer-events: none;
}
.bookingPop.is-open{
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
/* ---- calendar ---- */
.bookingCalPop{
width: 752px;
max-width: calc(100vw - 32px);
padding: 32px 32px 24px;
}
.bookingCalMonths{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
}
.bookingCalTitle{
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif !important;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
text-align: center;
color: #1A1A1A;
margin-bottom: 20px;
}
.bookingCalTable{
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
.bookingCalTable th{
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif !important;
font-size: 12px;
font-weight: 400;
color: #5A5A55;
text-align: center;
padding-bottom: 10px;
border-bottom: 1px solid #E5E5E0;
}
.bookingCalTable td{
padding: 0;
text-align: center;
}
.bookingCalDay{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 46px;
border: 0;
background: none;
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif !important;
font-size: 14px;
color: #1A1A1A;
cursor: pointer;
transition: background-color 150ms ease, color 150ms ease;
}
.bookingCalDay:hover{
background-color: #F1EEE9;
}
.bookingCalDay:disabled{
color: #C9C7C2;
cursor: default;
background: none;
}
.bookingCalDay.is-inrange{
background-color: #F1EEE9;
}
.bookingCalDay.is-selected{
background-color: #816F5C;
color: #FFFFFF;
}
.bookingCalNav{
position: absolute;
top: 26px;
width: 32px;
height: 32px;
border: 0;
background: none;
cursor: pointer;
padding: 0;
}
.bookingCalNav::before{
content: "";
display: block;
width: 9px;
height: 9px;
margin: 0 auto;
border-left: 1.4px solid #816F5C;
border-bottom: 1.4px solid #816F5C;
}
.bookingCalPrev{ left: 28px; }
.bookingCalPrev::before{ transform: rotate(45deg); }
.bookingCalNext{ right: 28px; }
.bookingCalNext::before{ transform: rotate(-135deg); }
.bookingClearDates{
margin-top: 18px;
padding: 0;
border: 0;
background: none;
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif !important;
font-size: 12px;
color: #5A5A55;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.bookingClearDates:hover{ color: #1A1A1A; }
/* ---- rooms & guests ---- */
.bookingGuestPop{
width: 320px;
max-width: calc(100vw - 32px);
padding: 28px 32px 32px;
}
.bookingRoom{ margin-bottom: 24px; }
.bookingRoomHead{
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 10px;
margin-bottom: 18px;
border-bottom: 1px solid #E5E5E0;
}
.bookingRoomTitle{
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif !important;
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;
color: #1A1A1A;
}
.bookingRoomRemove{
border: 0;
background: none;
padding: 0;
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif !important;
font-size: 11px;
color: #5A5A55;
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
}
.bookingRoomRemove:hover{ color: #1A1A1A; }
.bookingGuestRow{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.bookingGuestLabel{
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif !important;
font-size: 14px;
color: #1A1A1A;
}
.bookingStepper{
display: flex;
align-items: center;
gap: 14px;
}
.bookingStepBtn{
width: 28px;
height: 28px;
border: 1px solid #C9C7C2;
border-radius: 50%;
background: none;
color: #5A5A55;
font-size: 15px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: border-color 150ms ease, color 150ms ease;
padding: 0;
}
.bookingStepBtn:hover:not(:disabled){
border-color: #816F5C;
color: #816F5C;
}
.bookingStepBtn:disabled{
opacity: 0.35;
cursor: default;
}
.bookingStepCount{
min-width: 20px;
text-align: center;
font-family: 'Philosopher', 'Philosopher Fallback', serif !important;
font-size: 18px;
color: #1A1A1A;
}
.bookingAddRoom{
width: 100%;
height: 44px;
border: 1px solid #E5E5E0;
background: none;
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif !important;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
color: #1A1A1A;
cursor: pointer;
transition: border-color 150ms ease;
}
.bookingAddRoom:hover{ border-color: #816F5C; }
/* ---- responsive ---- */
@media (max-width: 991.98px){
.bookingBarFields{
flex-wrap: wrap;
padding: 8px 0 24px;
}
.bookingField{
flex: 1 1 100%;
max-width: none;
height: 64px;
border-right: 0;
border-bottom: 1px solid #E5E5E0;
padding: 0 24px;
}
.bookingCheckBtn{
margin: 24px 24px 0;
width: calc(100% - 48px);
justify-content: center;
}
.bookingBar::after{ display: none; }
.bookingPop{
left: 16px !important;
right: 16px;
width: auto;
}
.bookingCalMonths{
grid-template-columns: 1fr;
gap: 32px;
}
.bookingCalMonth + .bookingCalMonth{ display: none; }
}
/* ---- sticky (pinned) state ---- */
.bookingBarSection.is-stuck{
border-bottom: 1px solid #E5E5E0;
}
.bookingBarSection.is-stuck .bookingBar::after{
display: none; /* drop the 40px breathing strip while pinned */
}
/* compact summary row — only used while stuck on small screens */
.bookingCompact{
display: none;
align-items: center;
justify-content: space-between;
width: 100%;
height: 56px;
padding: 0 24px;
background: none;
border: 0;
cursor: pointer;
text-align: left;
}
.bookingCompactText{
font-family: 'Philosopher', 'Philosopher Fallback', serif !important;
font-size: 16px;
color: #1A1A1A;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bookingCompactChevron{
flex: 0 0 12px;
width: 12px;
height: 12px;
margin-left: 16px;
position: relative;
transition: transform 220ms ease;
}
.bookingCompactChevron::before{
content: "";
position: absolute;
left: 1px;
top: 2px;
width: 8px;
height: 8px;
border-left: 1.4px solid #816F5C;
border-bottom: 1.4px solid #816F5C;
transform: rotate(-45deg);
}
.is-expanded .bookingCompactChevron{
transform: rotate(180deg);
}
@media (max-width: 991.98px){
.bookingBarSection.is-stuck .bookingCompact{
display: flex;
}
.bookingBarSection.is-stuck .bookingBarFields{
display: none;
}
.bookingBarSection.is-stuck.is-expanded .bookingBarFields{
display: flex;
border-top: 1px solid #E5E5E0;
}
}
/* While pinned, ScrollTrigger locks the section's height, so the expanded
mobile panel overflows it — paint the panel itself as an opaque sheet
and let the section behind it go transparent. */
@media (max-width: 991.98px){
.bookingBarSection.is-stuck{
background: transparent;
box-shadow: none;
}
.bookingBarSection.is-stuck .bookingBarInner{
background: #FFFFFF;
border-bottom: 1px solid #E5E5E0;
}
.bookingBarSection.is-stuck.is-expanded .bookingBarInner{
border-bottom: 1px solid #E5E5E0;
}
}
/* Booking bar lifted out of the smooth-scroll transform: fixed at body
level, positioned each frame from its flow placeholder */
.bookingBarSection.is-fixed{
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 900; /* above content, below the header (999) and nav overlay */
will-change: transform;
}
/* =====================================================================
Footer — mobile layout (Figma 10010:28981)
Desktop (≥992px) keeps its existing layout; below that everything is
centred: logo, address, Discover links, then Follow/Contact as a
left/right row, divider, BACK TO TOP, copyright, legal links.
===================================================================== */
@media (max-width: 991.98px){
.footer_content{
width: 100%;
padding: 64px 16px;
}
.footer_topContent{
display: flex !important;
flex-direction: column;
align-items: center;
gap: 64px;
padding-bottom: 48px;
}
.footer_leftMenu{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 38px;
}
.footer_leftMenu .logoProperty{
max-width: 120px !important;
height: auto;
max-height: none !important;
opacity: 0.8;
}
.footer_leftMenu .footer_addressText{
margin: 0 !important;
text-align: center;
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif !important;
font-size: 14px;
font-weight: 300;
line-height: 2.07; /* 21px line + 8px gap, per design */
letter-spacing: 0.5px;
color: rgba(255,255,255,0.5);
}
.footer_rightMenu{
width: 100%;
display: flex !important;
flex-direction: column;
align-items: center;
gap: 64px;
}
.footer_menu{
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
}
.footer_menu > p{
margin: 0 !important;
}
.footer .footer_Heading{
opacity: 1;
font-size: 10px !important;
font-weight: 400;
line-height: 15px;
letter-spacing: 3px !important;
text-transform: uppercase;
color: rgba(255,255,255,0.5);
}
.footer_menu ul{
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
text-align: center;
}
.footer_menu ul li{
margin: 0 !important;
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif !important;
font-size: 16px;
font-weight: 500;
line-height: 25px;
letter-spacing: -0.48px;
color: #FFFFFF;
}
.footer_socmed{
width: 100%;
display: flex !important;
flex-direction: row !important;
justify-content: space-between;
align-items: flex-start;
gap: 24px;
}
.footer_socmed-1, .footer_socmed-2{
display: flex;
flex-direction: column;
gap: 32px;
}
.footer_socmed-2{
align-items: flex-end;
}
.footer_socmed .footer_Heading{
margin: 0 !important;
}
.footer_socmed-icons{
gap: 32px;
}
.footer_socmed-icons a{
display: block;
line-height: 0;
}
.footer_socmed-icons a img{
width: 16px !important;
max-width: 16px !important;
padding: 0 !important;
}
/* the design shows three social icons on mobile */
.footer_socmed-1 .footer_socmed-icons a:nth-child(4){
display: none;
}
/* ---- bottom block ---- */
.footer_botContent{
display: flex !important;
flex-direction: column;
align-items: center;
gap: 32px;
opacity: 1; /* per-element colours below instead of a blanket fade */
padding-top: 72px;
border-top: 1px solid rgba(255,255,255,0.3);
}
.footer_botContent-right{
order: -1; /* BACK TO TOP sits right under the divider, per design */
width: 100%;
text-align: center;
}
.footer_botContent-right p{
margin: 0 !important;
}
.footer_botContent-right a{
display: inline-flex;
align-items: center;
gap: 12px;
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif !important;
font-size: 11px !important;
font-weight: 300;
letter-spacing: 3px !important;
text-transform: uppercase;
color: #FFFFFF !important;
}
.footer_botContent-right a::after{
content: "";
width: 13px;
height: 13px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012.957%209.062'%3E%3Cg%20transform='rotate(90%206.4785%206.4785)'%3E%3Cpath%20d='M0.311%206.525C1.511%205.571%202.558%204.431%203.357%203.124C3.956%202.144%204.531%200.956%204.531%200M4.531%2012.957L4.531%200C4.531%200.956%205.106%202.145%205.705%203.124C6.505%204.431%207.552%205.571%208.75%206.525'%20fill='none'%20stroke='black'%20stroke-width='1.1'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 13px auto;
mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012.957%209.062'%3E%3Cg%20transform='rotate(90%206.4785%206.4785)'%3E%3Cpath%20d='M0.311%206.525C1.511%205.571%202.558%204.431%203.357%203.124C3.956%202.144%204.531%200.956%204.531%200M4.531%2012.957L4.531%200C4.531%200.956%205.106%202.145%205.705%203.124C6.505%204.431%207.552%205.571%208.75%206.525'%20fill='none'%20stroke='black'%20stroke-width='1.1'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 13px auto;
transform: rotate(-90deg); /* right-arrow glyph turned upward */
}
.footer_botContent-link{
width: 100%;
display: flex !important;
flex-direction: column;
align-items: center;
gap: 25px !important;
}
.footer_copyright p{
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0 !important;
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif !important;
font-size: 10px !important;
font-weight: 300;
letter-spacing: 3px !important;
text-transform: uppercase;
color: #FFFFFF;
}
.footer_copyright p::after{
content: "";
width: 4px;
height: 4px;
background-color: #FFFFFF;
}
.footer_legalLink{
width: 100%;
display: flex !important;
justify-content: space-between;
gap: 0 !important; /* space-between spreads the row; extra gap forces a wrap */
}
.footer_legalLink p{
margin: 0 !important;
white-space: nowrap;
}
.footer_legalLink a{
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif !important;
font-size: 10px !important;
font-weight: 300;
letter-spacing: 3px !important;
text-transform: uppercase;
color: rgba(255,255,255,0.5) !important;
}
}
/* =====================================================================
Experience cards — 2-line description clamp + Read More (Figma 10010:68278)
===================================================================== */
.slider-card .cardDesc{
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.slider-card.is-open .cardDesc{
display: block;
overflow: visible;
}
/* ≥1920px: when the description already fits in 2 lines (nothing is
clamped) the Read More button is pointless — JS adds .is-fit */
@media (min-width: 1920px){
.slider-card.is-fit .cardReadMore{
display: none;
}
}
.slider-card .cardReadMore,
.sustainCards .cardReadMore{
display: inline-block;
margin-top: 16px;
padding: 0 2px 4px;
background: none;
border: 0;
border-bottom: 1px solid currentColor;
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif !important;
font-size: 13px;
letter-spacing: 2px;
text-transform: uppercase;
color: #1A1A1A;
cursor: pointer;
transition: color 200ms ease;
}
.slider-card .cardReadMore:hover,
.sustainCards .cardReadMore:hover{
color: #816F5C;
}
/* =====================================================================
Fullscreen menu — Figma 10018:68467 (desktop) / 9907:7112 (mobile)
Opening/closing is animated by GSAP (samabe-js-2026.js): the bg layer
scales down from the top, then the items stagger in. The CSS here only
defines layout + the closed resting state.
===================================================================== */
.menuOverlay{
position: fixed;
inset: 0;
z-index: 999999;
visibility: hidden;
pointer-events: none;
}
.menuOverlay.is-open{
visibility: visible;
pointer-events: auto;
}
/* dimmed page behind the desktop dropdown panel (JS animates opacity) */
.menuOverlayScrim{
position: absolute;
inset: 0;
background: rgba(0,0,0,0.5);
opacity: 0;
}
.menuPanel{
position: absolute;
inset: 0;
}
/* desktop: full-height sidebar on the right (Figma 10019:68900);
the rest of the page stays visible behind the scrim */
@media (min-width: 992px){
.menuPanel{
left: auto;
right: 0;
top: 0;
bottom: 0;
width: 640px;
max-width: calc(100vw - 48px);
}
}
@media (max-width: 991.98px){
.menuOverlayScrim{ display: none; }
}
.menuOverlayBg{
position: absolute;
inset: 0;
background-color: #FFFFFF;
transform: scaleY(0);
transform-origin: top center;
will-change: transform;
}
/* mobile ground: warm paper w/ texture (Figma 9907:7112) */
@media (max-width: 991.98px){
.menuOverlayBg{
background-color: #FAF8F5;
}
.menuOverlayBg::after{
content: "";
position: absolute;
inset: 0;
background: url("../component-img/menu-paper-texture.webp") center / cover repeat;
opacity: 0.2;
}
}
.menuOverlayInner{
position: relative;
height: 100%;
display: flex;
flex-direction: column;
padding: 0 48px 48px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
@media (min-width: 992px){
.menuFooter{
margin-top: auto;
padding-top: 48px;
}
}
/* ---- top bar ---- */
.menuTopBar{
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px 0;
flex: 0 0 auto;
}
.menuLogo{
display: block;
line-height: 0;
}
.menuLogo img{
width: 90px;
/*height: 65px;*/
height: auto;
object-fit: cover;
}
.menuTopActions{
display: flex;
align-items: flex-end;
gap: 9px;
}
/* close ✕ — 50px bordered square, two crossed lines */
.menuCloseBtn{
position: relative;
width: 50px;
height: 50px;
flex: 0 0 50px;
border: 1px solid rgba(129,111,92,0.5);
background: none;
cursor: pointer;
padding: 0;
transition: border-color 200ms ease;
}
.menuCloseBtn span{
position: absolute;
left: 50%;
top: 50%;
width: 18px;
height: 1.4px;
background-color: #816F5C;
transition: background-color 200ms ease;
}
.menuCloseBtn span:first-child{ transform: translate(-50%,-50%) rotate(45deg); }
.menuCloseBtn span:last-child{ transform: translate(-50%,-50%) rotate(-45deg); }
.menuCloseBtn:hover{ border-color: #816F5C; }
/* mobile language chip */
.menuLang{
display: inline-flex;
align-items: center;
gap: 10px;
border: 0;
background: none;
padding: 0;
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif !important;
font-size: 12px;
letter-spacing: 1.8px;
text-transform: uppercase;
color: #816F5C;
cursor: pointer;
}
/* down chevron: the box MUST stay square — unequal sides rotate into a
lopsided tick that reads as a checkmark rather than a chevron */
.menuLangChevron{
display: inline-block;
width: 7px;
height: 7px;
border-left: 1.2px solid #816F5C;
border-bottom: 1.2px solid #816F5C;
transform: rotate(-45deg);
margin-top: -4px;
transition: transform 250ms ease, margin-top 250ms ease;
}
/* mobile language chip + its dropdown */
.menuLangWrap{
position: relative;
z-index: 3;
}
.menuLangWrap.is-open .menuLangChevron{
transform: rotate(135deg);
margin-top: 3px;
}
.menuLangDrop{
position: absolute;
top: calc(100% + 12px);
left: 0;
min-width: 92px;
display: flex;
flex-direction: column;
background: #FAF7F5;
border: 1px solid rgba(129,111,92,0.3);
padding: 6px 0;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
}
.menuLangWrap.is-open .menuLangDrop{
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.menuLangDrop a{
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif !important;
font-size: 12px;
line-height: 1.1;
letter-spacing: 1.8px;
text-transform: uppercase;
color: #816F5C !important;
text-decoration: none !important;
padding: 10px 16px;
opacity: 0.55;
transition: opacity 200ms ease, background-color 200ms ease;
}
.menuLangDrop a.is-active,
.menuLangDrop a:hover{
opacity: 1;
background-color: rgba(129,111,92,0.08);
}
/* ---- links ---- */
.menuDivider{
height: 1px;
background: rgba(0,0,0,0.1);
flex: 0 0 auto;
}
.menuLinks{
padding-top: 48px;
display: flex;
flex-direction: column;
gap: 16px;
flex: 0 0 auto;
}
.menuItem{
padding-bottom: 12px;
}
.menuLink,
.menuLink a,
.menuLinkRow a{
font-family: 'Philosopher', 'Philosopher Fallback', serif !important;
font-size: 28px;
line-height: 1.1;
letter-spacing: -0.28px;
color: #816F5C !important;
text-decoration: none !important;
transition: color 200ms ease;
}
.menuLink a:hover,
a.menuLink:hover{
color: #5F5142 !important;
}
.menuLinkRow{
display: flex;
align-items: center;
gap: 12px;
}
.menuSubToggle{
border: 0;
background: none;
padding: 0;
cursor: pointer;
line-height: 0;
}
.menuChevron{
display: inline-block;
width: 11px;
height: 11px;
border-left: 1.4px solid #816F5C;
border-bottom: 1.4px solid #816F5C;
transform: rotate(-45deg);
margin-top: -5px;
transition: transform 250ms ease;
}
.menuItem--dining.is-open .menuChevron{
transform: rotate(135deg);
margin-top: 4px;
}
.menuSub{
overflow: hidden;
height: 0;
opacity: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.menuSub a{
font-family: 'Philosopher', 'Philosopher Fallback', serif !important;
font-size: 19px;
line-height: 1.2;
color: #816F5C !important;
text-decoration: none !important;
opacity: 0.75;
transition: opacity 200ms ease;
}
.menuSub a:first-child{ margin-top: 14px; }
.menuSub a:hover{ opacity: 1; }
/* ---- footer ---- */
.menuFooter{
margin-top: auto;
padding-top: 64px;
display: flex;
align-items: flex-start;
justify-content: space-between;
flex: 0 0 auto;
}
.menuFooterCol{
display: flex;
flex-direction: column;
gap: 16px;
}
.menuFooterCol--contact{ align-items: center; }
.menuFooterCol--lang{ align-items: flex-end; }
.menuFooterHead{
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif !important;
font-size: 10px;
line-height: 15px;
letter-spacing: 3px;
text-transform: uppercase;
color: #816F5C;
}
.menuFooterIcons{
display: flex;
gap: 32px;
}
.menuFooterIcons a{
display: inline-flex;
line-height: 0;
text-decoration: none;
}
.menuIcon{
width: 16px;
height: 16px;
background-color: #816F5C;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
transition: background-color 200ms ease;
}
.menuFooterIcons a:hover .menuIcon{ background-color: #5F5142; }
.menuIcon--fb{ -webkit-mask-image: url("../component-img/facebook.svg"); mask-image: url("../component-img/facebook.svg"); }
.menuIcon--ig{ -webkit-mask-image: url("../component-img/instagram.svg"); mask-image: url("../component-img/instagram.svg"); }
.menuIcon--yt{ -webkit-mask-image: url("../component-img/youtube.svg"); mask-image: url("../component-img/youtube.svg"); }
.menuIcon--tt{ -webkit-mask-image: url("../component-img/tiktok.svg"); mask-image: url("../component-img/tiktok.svg"); }
.menuIcon--wa{ -webkit-mask-image: url("../component-img/whatsapp.svg"); mask-image: url("../component-img/whatsapp.svg"); }
.menuIcon--mail{ -webkit-mask-image: url("../component-img/email.svg"); mask-image: url("../component-img/email.svg"); }
.menuLangList{
display: flex;
gap: 24px;
}
.menuLangList a{
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif !important;
font-size: 14px;
line-height: 1.1;
letter-spacing: 1.8px;
text-transform: uppercase;
color: #816F5C !important;
text-decoration: none !important;
opacity: 0.55;
transition: opacity 200ms ease;
}
.menuLangList a.is-active,
.menuLangList a:hover{ opacity: 1; }
/* ---- mobile CTA ---- */
.menuMobileCta{
flex: 0 0 auto;
margin-top: 0;
padding-top: 32px;
border-top: 0;
}
.menuCtaBtn{
width: 100% !important;
max-width: none;
height: 58px;
justify-content: space-between;
}
/* Book Your Stay dropdown inside the full menu (same two options as the header) */
.menuBookWrap{
position: relative;
}
.menuBookArrow{
transition: transform 0.25s ease;
}
.menuBookWrap.is-open .menuBookArrow{
transform: rotate(90deg);
}
.menuBookDrop{
display: none;
flex-direction: column;
border: 1px solid rgba(129,111,92,0.3);
border-top: 0;
background: rgba(255,255,255,0.6);
}
.menuBookWrap.is-open .menuBookDrop{
display: flex;
}
.menuBookDrop a{
display: block;
padding: 16px 20px;
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif !important;
font-size: 12px;
line-height: 1.1;
letter-spacing: 1.8px;
text-transform: uppercase;
color: #816F5C !important;
text-decoration: none !important;
border-top: 1px solid rgba(129,111,92,0.15);
transition: background-color 0.2s ease, color 0.2s ease;
}
.menuBookDrop a:first-child{ border-top: 0; }
.menuBookDrop a:hover{
background-color: #816F5C;
color: #FFFFFF !important;
}
/* ---- mobile layout ---- */
@media (max-width: 991.98px){
.menuOverlayInner{
padding: 0 20px 24px;
}
.menuTopBar{
position: relative;
padding: 24px 0;
/* the menu-open animation puts a transform on this bar, which makes
it a stacking context — without a z-index the language dropdown
inside it is painted behind the nav links below */
z-index: 5;
}
.menuLogo{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.menuLogo img{ width: 82px; height: 59px; }
/* small bordered close chip */
.menuCloseBtn{
width: 25px;
height: 25px;
flex: 0 0 25px;
border-width: 0.5px;
border-color: rgba(129,111,92,0.4);
}
.menuCloseBtn span{ width: 10px; height: 1px; }
.menuLinks{
padding-top: 34px;
}
.menuLink,
.menuLink a,
.menuLinkRow a{
font-size: 20px;
letter-spacing: -0.2px;
}
.menuSub a{ font-size: 16px; }
.menuFooter{ padding-top: 40px; }
.menuFooterCol--contact{ align-items: flex-end; }
}
/* scroll lock while the menu is open */
html.menuOpen,
html.menuOpen body{
overflow: hidden !important;
}
/* About page sustainability cards — same Read More as the experience cards.
The hidden detail list animates open via GSAP (height), so it needs a
measurable collapsed state instead of the legacy display:none toggle. */
.sustainCards .sub-content-ShowAll{
display: block;
height: 0;
opacity: 0;
overflow: hidden;
margin-bottom: 0;
}
/* =====================================================================
About page — expandable awards list (Figma 4998:20275)
Collapsed by default; .awardsToggle animates it open via GSAP.
===================================================================== */
.awardsMore{
height: 0;
opacity: 0;
overflow: hidden;
}
.awardsYearRow{
display: grid;
grid-template-columns: 1fr;
gap: 24px;
padding-top: 64px;
}
.awardsYear{
font-family: 'Philosopher', 'Philosopher Fallback', serif !important;
font-size: 28px;
line-height: 1.1;
color: #1A1A1A;
}
.awardsCols{
display: grid;
grid-template-columns: 1fr;
gap: 0 48px;
align-items: start;
}
.awardsList{
list-style: none;
margin: 0;
padding: 0;
}
.awardsList li{
position: relative;
padding: 0 0 20px 24px;
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif !important;
font-size: 16px;
line-height: 1.5;
letter-spacing: -0.32px;
}
.awardsList li::before{
content: "";
position: absolute;
left: 0;
top: 8px;
width: 7px;
height: 7px;
}
.awardsList .is-parent{
color: #1A1A1A;
font-weight: 600;
}
.awardsList .is-parent::before{
background-color: #3A3A35;
}
.awardsList .is-parent span{
color: #9A9A92;
font-weight: 400;
}
.awardsList .is-sub{
color: #9A9A92;
font-weight: 400;
}
.awardsList .is-sub::before{
background-color: #D8D6CF;
}
@media (min-width: 992px){
.awardsYearRow{
grid-template-columns: 180px 1fr;
gap: 0 48px;
padding-top: 96px;
}
.awardsYearRow:first-child{ padding-top: 48px; }
.awardsCols{
grid-template-columns: 1fr 1fr;
}
}
/* =====================================================================
Center slider (custom engine in samabe-js-2026.js, no library).
Used by the homepage dining slider AND the wedding page's
"Wedding by The Beach" slider — same classes, same mechanics:
uniform cards, transform-only motion, centered card scaled 1.3x,
rotate-and-reset infinite loop.
===================================================================== */
.dineSlider{
overflow: hidden;
padding: 80px 0; /* room for the 1.3x card (400 -> 520, 60px each side) */
cursor: grab;
touch-action: pan-y;
}
.dineSlider.is-dragging{
cursor: grabbing;
}
.dineTrack{
display: flex;
align-items: center;
gap: 27px;
will-change: transform;
}
.dineTrack.is-animating{
transition: transform 0.6s cubic-bezier(0.33, 0, 0.2, 1);
}
.dineSlider.is-dragging .dineTrack{
transition: none;
}
.dineSlide{
flex: 0 0 330px;
transform: translateX(0) scale(1);
transition: transform 0.6s cubic-bezier(0.33, 0, 0.2, 1); /* same curve as the track */
will-change: transform;
}
.dineSlide img{
width: 330px;
height: 400px;
object-fit: cover;
display: block;
-webkit-user-drag: none;
user-select: none;
-webkit-user-select: none;
pointer-events: none;
}
/* 330 x 0.3 / 2 = 49.5px growth per side — neighbours slide outward by
exactly that, so the 27px gap holds around the enlarged card */
.dineSlide.is-prev{ transform: translateX(-49.5px); }
.dineSlide.is-next{ transform: translateX(49.5px); }
.dineSlide.is-active{
transform: scale(1.3);
position: relative;
z-index: 2;
}
@media (max-width: 767.98px) {
.dineSlider{ padding: 56px 0; }
.dineTrack{ gap: 16px; }
.dineSlide{ flex-basis: 240px; }
.dineSlide img{ width: 240px; height: 300px; }
/* 240 x 0.3 / 2 = 36px per side */
.dineSlide.is-prev{ transform: translateX(-36px); }
.dineSlide.is-next{ transform: translateX(36px); }
.dineSlide.is-active{ transform: scale(1.3); }
}
/* =====================================================================
Room pages — benefits tabs (Figma 10025:68992 / 69301).
"Standard Benefits | Honeymoon Benefits": the active tab is dark, the
inactive one faded; switching swaps the icon grid and retargets the
View More popup (#standardBenefits / #honeymoonBenefits).
===================================================================== */
.benefitsTabs{
display: flex;
align-items: center;
gap: 24px;
}
.benefitsTab{
background: none;
border: 0;
padding: 0;
cursor: pointer;
font: inherit;
letter-spacing: inherit;
text-transform: uppercase;
color: #1A1A1A;
opacity: 0.35;
transition: opacity 0.25s ease;
}
.benefitsTab.is-active,
.benefitsTab:hover{
opacity: 1;
}
.benefitsTabDivider{
width: 1px;
height: 14px;
background: rgba(0,0,0,0.25);
}
/* Both panes are row-aligned grids (Figma 10025:68992 / 69330): items in
row-major order, labels hang after the 16px icon instead of wrapping
under it, rows stay aligned across all three columns. */
.bpStandardGrid,
.benefitsRow.show-honeymoon .bpHoneymoonGrid{
display: grid !important;
grid-template-columns: 1fr;
gap: 24px 32px;
align-items: start;
padding-bottom: 12px;
}
@media (min-width: 576px){
.bpStandardGrid,
.benefitsRow.show-honeymoon .bpHoneymoonGrid{
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 768px){
.bpStandardGrid,
.benefitsRow.show-honeymoon .bpHoneymoonGrid{
grid-template-columns: repeat(3, 1fr);
}
}
/* honeymoon View More popup: identical icon treatment to the standard
popup (16px, per .Standard-Benefits img). Explicit here because the
swan SVG declares width="1em", which an ![]()
can't resolve and
otherwise renders oversized. */
#honeymoonBenefits .icon-Img-Wraper img{
width: 16px;
height: 16px;
}
/* pane switching */
.benefitsRow .bpHoneymoon{
display: none !important;
}
.benefitsRow.show-honeymoon .bpStandardGrid{
display: none !important;
}
.benefitsRow .bpItem{
display: flex;
align-items: flex-start;
gap: 12px;
}
/* standard pane: 32px icons, label centered against the larger glyph */
.bpStandardGrid .bpItem{
align-items: flex-start;
}
.bpStandardGrid .bpItem img{
flex: 0 0 32px;
width: 32px;
height: 32px;
}
/* honeymoon pane: 16px icons aligned to the label's first line */
.bpHoneymoonGrid .bpItem img{
flex: 0 0 16px;
width: 16px;
height: 16px;
margin-top: 2px;
}
.benefitsRow .bpItem span{
line-height: 1.5;
}
/* Wedding page "Wedding by The Beach": the slider only runs on phones.
Desktop/tablet show a static centered trio — middle image enlarged,
neighbours nudged outward — with the duplicate loop sets hidden. */
@media (min-width: 768px){
.dineSlider--mobileOnly{
cursor: default;
touch-action: auto;
}
.dineSlider--mobileOnly .dineTrack{
transform: none !important;
transition: none !important;
justify-content: center;
}
.dineSlider--mobileOnly .dineSlide{
transition: none !important;
}
.dineSlider--mobileOnly .dineSlide:nth-child(n+4){
display: none;
}
.dineSlider--mobileOnly .dineSlide:nth-child(1){ transform: translateX(-49.5px); }
.dineSlider--mobileOnly .dineSlide:nth-child(2){
transform: scale(1.3);
position: relative;
z-index: 2;
}
.dineSlider--mobileOnly .dineSlide:nth-child(3){ transform: translateX(49.5px); }
}
/* =====================================================================
Wedding gallery navigation (Figma 10035:69709)
Slim bar below the hero: back link left, Wedding/Reception dropdowns
right. JS lifts it out of the smoother and clamps it under the main
header once they meet (same placeholder technique as the booking bar).
===================================================================== */
.galleryNav{
background-color: #FAF8F5;
border-bottom: 1px solid rgba(0,0,0,0.06);
}
.galleryNav.is-fixed{
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 900; /* above content, below the header (999) */
will-change: transform;
}
.galleryNav.is-stuck{
border-bottom: 1px solid rgba(0,0,0,0.06);
}
.galleryNavInner{
max-width: 1440px;
margin: 0 auto;
height: 80px;
padding: 0 30px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.galleryNavBack{
display: inline-flex;
align-items: center;
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif !important;
font-size: 12px;
letter-spacing: 1.8px;
text-transform: uppercase;
color: #1A1A1A !important;
text-decoration: none !important;
white-space: nowrap;
transition: color 200ms ease;
}
.galleryNavBack:hover{ color: #816F5C !important; }
.galleryNavBackArrow{
width: 13px;
height: 20px;
margin-right: 14px;
flex: 0 0 13px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012.957%209.062'%3E%3Cg%20transform='rotate(-90%204.531%204.531)'%3E%3Cpath%20d='M0.311%206.525C1.511%205.571%202.558%204.431%203.357%203.124C3.956%202.144%204.531%200.956%204.531%200M4.531%2012.957L4.531%200C4.531%200.956%205.106%202.145%205.705%203.124C6.505%204.431%207.552%205.571%208.75%206.525'%20fill='none'%20stroke='black'%20stroke-width='1.1'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 13px auto;
mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2012.957%209.062'%3E%3Cg%20transform='rotate(-90%204.531%204.531)'%3E%3Cpath%20d='M0.311%206.525C1.511%205.571%202.558%204.431%203.357%203.124C3.956%202.144%204.531%200.956%204.531%200M4.531%2012.957L4.531%200C4.531%200.956%205.106%202.145%205.705%203.124C6.505%204.431%207.552%205.571%208.75%206.525'%20fill='none'%20stroke='black'%20stroke-width='1.1'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / 13px auto;
}
.galleryNavMenus{
display: flex;
align-items: center;
gap: 32px;
}
.galleryNavItem{
position: relative;
}
.galleryNavToggle{
display: inline-flex;
align-items: center;
gap: 8px;
background: none;
border: 0;
padding: 0;
cursor: pointer;
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif !important;
font-size: 12px;
letter-spacing: 1.8px;
text-transform: uppercase;
color: #1A1A1A;
transition: color 200ms ease;
}
.galleryNavToggle:hover,
.galleryNavItem.is-open .galleryNavToggle{ color: #816F5C; }
.galleryNavChevron{
width: 7px;
height: 7px;
border-left: 1.2px solid currentColor;
border-bottom: 1.2px solid currentColor;
transform: rotate(-45deg);
margin-top: -4px;
transition: transform 250ms ease;
}
.galleryNavItem.is-open .galleryNavChevron{
transform: rotate(135deg);
margin-top: 3px;
}
.galleryNavDropdown{
position: absolute;
top: 100%;
right: 0;
padding-top: 14px;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
z-index: 60;
}
.galleryNavItem.is-open .galleryNavDropdown{
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.galleryNavDropdown{
min-width: 210px;
}
.galleryNavDropdown a{
display: block;
padding: 12px 22px;
background: #FFFFFF;
font-family: 'Montserrat', 'Montserrat Fallback', sans-serif !important;
font-size: 12px !important;
letter-spacing: 1.8px;
text-transform: uppercase;
color: #5A5A55 !important;
text-decoration: none !important;
white-space: nowrap;
border-bottom: 1px solid rgba(0,0,0,0.05);
transition: color 0.2s ease, background-color 0.2s ease;
}
.galleryNavDropdown a:first-child{ box-shadow: 0 14px 34px rgba(0,0,0,0.1); }
.galleryNavDropdown > a{ box-shadow: 0 14px 34px rgba(0,0,0,0.1); }
.galleryNavDropdown a:hover{
color: #1A1A1A !important;
background: #F6F2EC;
}
@media (max-width: 767.98px){
.galleryNavInner{
height: 64px;
padding: 0 16px;
gap: 12px;
}
.galleryNavBack{ font-size: 10px; letter-spacing: 1.2px; }
.galleryNavBackArrow{ width: 26px; }
.galleryNavMenus{ gap: 20px; }
.galleryNavToggle{ font-size: 10px; letter-spacing: 1.2px; }
}
/* =====================================================================
SINGLE-DATE CALENDAR (enquiry forms) — same look as the booking bar
calendar; the month grid reuses the bookingCal* classes above. Only
the popover container is new: one month, anchored under the input.
===================================================================== */
.singleCalWrap{
position: relative;
}
.singleCalPop{
width: 376px;
max-width: calc(100vw - 32px);
padding: 32px 28px 24px;
z-index: 80;
}
.singleCalPop .bookingCalPrev{ left: 24px; }
.singleCalPop .bookingCalNext{ right: 24px; }
/* the calendar drives the field — hide the caret, keep the pointer */
.custom-date-input{
caret-color: transparent;
cursor: pointer;
}
/* =====================================================================
FAQ / Q&A accordions — the answer text is brown across every page
that uses the .ContentFAQ accordion (all-inclusive, restaurant,
weddings, events, special promotions, …). Questions keep their own
colour; only the revealed answer is re-coloured. Lists and inline
links inside an answer inherit it too — links stay underlined, so
they remain recognisable.
===================================================================== */
.subContentFAQ,
.subContentFAQ li,
.subContentFAQ a{
color: var(--text-Brown);
}