/*
* Breakpoints
*/
$breakpoints: (
'mob': 'screen and (max-width: 480px)', //sm - tailwind
'thumb': 'screen and (min-width: 480px)', //sm - tailwind
'lap': 'screen and (min-width: 768px)', //md - tailwind
'desk': 'screen and (min-width: 992px)', //lg - tailwind
'widescreen': 'screen and (min-width: 1280px)', //xl - tailwind
'widescreen-4k': 'screen and (min-width: 1536px)', //2xl - tailwind
);
@mixin mq($alias) {
// Search breakpoint map for alias
$query: map-get($breakpoints, $alias);
// If alias exists, print out media query
@if $query {
@media #{$query} {
@content;
}
} @else {
@error 'No breakpoint found for #{$alias}';
}
}
body {
&::before {
content: 'thumb';
display: none;
visibility: hidden;
@include mq(lap) {
content: 'lap';
}
@include mq(desk) {
content: 'desk';
}
@include mq(widescreen) {
content: 'widescreen';
}
@include mq(widescreen-4k) {
content: 'widescreen-4k';
}
}
}
// -----------------------------------
/* Accessibility */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width:0;
color: #000;
}
.sr-only:focus {
position: static;
width: auto;
height: auto;
padding: 0;
margin: 0;
overflow: visible;
clip: auto;
white-space: normal;
border: solid 1px black;
position: absolute;
top: 0;
left: 0;
z-index: 999;
}
/* Set color style to inherit */
.inherit-color * {
color: inherit;
}
/* Focus state style for keyboard navigation for the focusable elements */
*[tabindex]:focus-visible,
input[type="file"]:focus-visible {
outline: 0.125rem solid #4d65ff;
outline-offset: 0.125rem;
}
/* Prevent all click and hover interaction with an element */
.pointer-events-off {
pointer-events: none;
}
/* Enables all click and hover interaction with an element */
.pointer-events-on {
pointer-events: auto;
}
/* Create a class of .div-square which maintains a 1:1 dimension of a div */
.div-square::after {
content: "";
display: block;
padding-bottom: 100%;
}
/* Make sure containers never lose their center alignment */
.container-medium,.container-small, .container-large {
margin-right: auto !important;
margin-left: auto !important;
}
/*
Make the following elements inherit typography styles from the parent and not have hardcoded values.
Important: You will not be able to style for example "All Links" in Designer with this CSS applied.
Uncomment this CSS to use it in the project. Leave this message for future hand-off.
*/
/*
a,
.w-input,
.w-select,
.w-tab-link,
.w-nav-link,
.w-dropdown-btn,
.w-dropdown-toggle,
.w-dropdown-link {
color: inherit;
text-decoration: inherit;
font-size: inherit;
}
*/
/* Apply "..." after 3 lines of text */
.text-style-3lines {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
/* Apply "..." after 2 lines of text */
.text-style-2lines {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* Adds inline flex display */
.display-inlineflex {
display: inline-flex;
}
/* These classes are never overwritten */
.hide {
display: none !important;
}
@media screen and (max-width: 991px) {
.hide, .hide-tablet {
display: none !important;
}
}
@media screen and (max-width: 767px) {
.hide-mobile-landscape{
display: none !important;
}
}
@media screen and (max-width: 479px) {
.hide-mobile{
display: none !important;
}
}
.margin-0 {
margin: 0rem !important;
}
.padding-0 {
padding: 0rem !important;
}
.spacing-clean {
padding: 0rem !important;
margin: 0rem !important;
}
.margin-top {
margin-right: 0rem !important;
margin-bottom: 0rem !important;
margin-left: 0rem !important;
}
.padding-top {
padding-right: 0rem !important;
padding-bottom: 0rem !important;
padding-left: 0rem !important;
}
.margin-right {
margin-top: 0rem !important;
margin-bottom: 0rem !important;
margin-left: 0rem !important;
}
.padding-right {
padding-top: 0rem !important;
padding-bottom: 0rem !important;
padding-left: 0rem !important;
}
.margin-bottom {
margin-top: 0rem !important;
margin-right: 0rem !important;
margin-left: 0rem !important;
}
.padding-bottom {
padding-top: 0rem !important;
padding-right: 0rem !important;
padding-left: 0rem !important;
}
.margin-left {
margin-top: 0rem !important;
margin-right: 0rem !important;
margin-bottom: 0rem !important;
}
.padding-left {
padding-top: 0rem !important;
padding-right: 0rem !important;
padding-bottom: 0rem !important;
}
.margin-horizontal {
margin-top: 0rem !important;
margin-bottom: 0rem !important;
}
.padding-horizontal {
padding-top: 0rem !important;
padding-bottom: 0rem !important;
}
.margin-vertical {
margin-right: 0rem !important;
margin-left: 0rem !important;
}
.padding-vertical {
padding-right: 0rem !important;
padding-left: 0rem !important;
}
/* Apply "..." at 100% width */
.truncate-width {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Removes native scrollbar */
.no-scrollbar {
-ms-overflow-style: none;
overflow: -moz-scrollbars-none;
}
.no-scrollbar::-webkit-scrollbar {
display: none;
}
// SOME RESETS
ul, li {
padding-left: 0;
margin-top: 0;
margin-bottom: 0;
}
a {
color: inherit;
}
// NAV
svg.nav_menu-icon line {
transition: transform ease-in-out 300ms;
transform-origin: center;
}
.nav_menu-button-wrapper.w-nav-button {
&~.nav_decor {
transform-origin: center;
}
}
.nav_menu-button-wrapper.w-nav-button.w--open {
color: var(--text-color--text-alternate);
&~* {
color: var(--text-color--text-alternate);
}
&~.nav_decor {
opacity: 0;
transform: scaleX(0);
@media only screen and (max-width: 767px) {
opacity: 1;
transform: scaleX(1) translateX(-50%);
background-color: var(--background-color--background-secondary);
}
}
svg.nav_menu-icon line:first-child {
transform: rotate(-15deg) translateY(32%);
}
svg.nav_menu-icon line:last-child {
transform: rotate(15deg) translateY(-32%);
}
.nav_menu-icon-text {
opacity: 0;
&.is-close{
opacity: 1;
}
}
}
.w-nav-overlay {
position: absolute;
top: 0;
left: 0;
overflow: visible;
height: 100vh;
width: 100vw;
}
// FOOTER
.footer {
.horizontal-line {
&.is-top {
height: 1.5px;
top: -1px;
}
}
}
// HERO
.hero_header-rich-text h1 br {
@media (max-width: 767px) {
display: none;
}
}
.section_hero-booking {
&[data-wf--hero---booking-engine--variant=heading-is-larger] {
h1 {
@media (min-width: 992px) {
font-size: 3.75rem;
}
}
}
}
// BANNER PARAGRAPH
.banner-paragraph_paragraph * {
@media only screen and (max-width: 767px) {
font-style: normal;
}
}
// MASKED IMAGES
.mask-images_item-title-wrap {
.mask-images_item-radio.fs-cmsfilter_active {
&~.mask-images_item-title.mask-images_item-title.mask-images_item-title {
opacity: 1;
}
}
}
// LOGOS
.logos_item:last-child {
.vertical-line {
display: none;
}
}
// @media only screen and (max-width: 767px) {
// .logos_item:first-child {
// .vertical-line.logos_vertical-line.is-first {
// display: block;
// }
// }
// .logos_item:last-child {
// .vertical-line.logos_vertical-line:not(.is-first) {
// display: block;
// }
// }
// }
// BG ACCORDION
.bg-accordion_item-radio-field.fs-cmsfilter_active {
&~.bg-accordion_names-article {
.bg-accordion_item-title {
font-weight: 500;
}
.bg-accordion_item-sizer {
height: auto;
}
}
&~.bg-accordion_item-x {
transform: rotate(45deg);
}
&~.bg-accordion_invisible-closer {
display: block;
}
}
.section_bg-accordion.is-alternate {
.vertical-line, .horizontal-line {
background-color: var(--border-color--border-alternate)
}
}
// CARDS
.cards_item:last-child {
.vertical-line {
display: none;
}
}
.cards-2_item.w-dyn-item:nth-child(even) {
.vertical-line {
display:none;
}
}
.cards-2_item.w-dyn-item:nth-child(odd):last-child {
.horizontal-line {
display:none
}
}
.card_link-wrap:hover {
figure {
img {
transform: scale(1.05);
}
}
}
// FORMS
.form-field {
border: none;
border-bottom: 0.5px solid currentColor;
color: inherit;
}
.form-field::placeholder {
color: inherit;
}
.contact_form .form-field::placeholder {
color: #7a7a7a;
}
// ROOMS
.sliders_item:nth-child(even) {
.sliders_item-article {
.sliders_item-right {
grid-column: 1;
grid-row: 1;
}
.sliders_item-left {
grid-column: 2;
grid-row: 1;
}
}
&:not(.is-light) {
.vertical-line, .horizontal-line {
background-color: var(--border-color--border-alternate);
}
}
}
// ALL SWIPERS
.swiper-pagination-bullet {
transition: background-color 300ms ease-in-out;
flex: none;
}
.swiper-pagination-bullets {
display: flex;
gap: 0.75rem;
@media only screen and (max-width: 767px) {
gap: 0.625rem;
}
@media only screen and (max-width: 479px) {
gap: 0.5rem;
}
position: absolute;
z-index: 2;
align-items: center;
justify-content: center;
.swiper-pagination-bullet {
width: 1.25rem;
height: 1.25rem;
@media only screen and (max-width: 767px) {
width: 0.875rem;
height: 0.875rem;
}
@media only screen and (max-width: 479px) {
width: 0.75rem;
height: 0.75rem;
}
border: 1px solid var(--base-color-brand--brand-light);
background-color: transparent;
&.swiper-pagination-bullet-active {
background-color: var(--base-color-brand--brand-light);
}
}
}
// EXPERIENCES SWIPER
.experiences_subcollection-pagination {
display: flex;
gap: 0.75rem;
align-items: center;
justify-content: center;
}
.experiences_subcollection-pagination {
display: none;
@media only screen and (max-width: 767px) {
display: flex;
}
.swiper-pagination-bullet {
width: 1rem;
height: 1rem;
border: 1px solid var(--base-color-neutral--neutral-light);
background-color: transparent;
&.swiper-pagination-bullet-active {
background-color: var(--base-color-brand--brand-light);
}
}
}
.experiences_subcontent.is-active {
* {
font-weight: inherit;
}
}
// ROOMS INDIV
.text-rich-text.sticky-hero_sub-richtext ul {
li {
position: relative;
margin-left: 12px;
}
li::before {
width: 4px;
height: 4px;
border-radius: 100px;
background-color: currentColor;
display: block;
position: absolute;
top: 0.75em;
left: -6px;
transform: translate(-100%, -50%);
}
}
.detail-boxes_richtext ul {
li::before {
width: 0.875em;
height: 1px;
background-color: var(--border-color--border-primary);
display: block;
position: absolute;
top: 0.75em;
left: -0.5em;
transform: translate(-100%, -50%);
}
li {
position: relative;
margin-left: 1.375em;
}
}
.more-collec_item {
&:nth-child(even) {
.more-collec_item-article {
.more-collec_item-header {
grid-column: 1;
grid-row: 1;
}
.more-collec_item-figwrap {
grid-column: 2;
grid-row: 1;
}
}
}
}
// LINK UNDERLINE
[anim=link-underline] {
position: relative;
&::after {
position: absolute;
display: block;
background-color: currentColor;
width: 100%;
height: 1px;
left: 0;
bottom: -1px;
transform: scale(0);
transform-origin: left;
transition: transform 300ms ease-in-out;
}
&:hover::after{
transform: scale(1);
}
}
a:hover {
[anim=link-underline]::after{
transform: scale(1);
}
}
.cta-simple[anim=link-underline][data-wf--cta-simple--variant*=underline-first]::after {
transform: scale(1);
transform-origin: right;
}
.cta-simple[anim=link-underline][data-wf--cta-simple--variant*=underline-first]:hover::after {
transform: scale(0);
}
// PRIVACY
.texts_header br {
@media (max-width: 479px) {
display: none;
}
}
// STICKY HERO
.sticky-hero_content::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.sticky-hero_content{
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
// TOO SPECIFIC FOR CAPUCINES
.section_bg-accordion.is-map-accordion,
.section_bg-accordion.is-faqs {
.bg-accordion_item-title, .bg-accordion_item-x {
font-size: 1.125rem;
}
}
// NAV ICON CHANGE FOR CAPUCINES
.nav_menu-button-wrapper.w-nav-button.w--open svg.nav_menu-icon line:first-child {
transform: rotate(-45deg) translateY(32%) scaleX(0.6);
}
.nav_menu-button-wrapper.w-nav-button.w--open svg.nav_menu-icon line:last-child {
transform: rotate(45deg) translateY(-32%) scaleX(0.6) ;
}
.nav_menu-button-wrapper.w-nav-button.w--open svg.nav_menu-icon line {
transform-origin: center;
}
svg.nav_menu-icon {
overflow: visible;
}
// RICHTEXT UL
.text-rich-text ul {
list-style-type: none;
list-style: none;
li {
list-style-type: none;
list-style: none;
position: relative;
margin-left: 0.75em;
}
li::before {
width: 4px;
height: 4px;
border-radius: 100px;
background-color: currentColor;
display: block;
position: absolute;
top: 0.75em;
left: -0.375em;
transform: translate(-100%, -50%);
}
}
// RICHTEXT LINKS
.text-rich-text {
a {
word-wrap: anywhere;
overflow-wrap: anywhere;
}
}
// STICKY SECTION MODIFICATIONS
.section_sticky-hero.js-desktop-slider {
.sticky-hero_collection {
padding-bottom: 0;
display: flex;
flex-direction: row;
flex-flow: row;
gap: 0;
width: fit-content;
height: 100%;
}
.sticky-hero_collection-wrap {
overflow: hidden;
width: 100%;
height: 100%;
}
.sticky-hero_item {
width: 50vw;
flex-shrink: 0;
height: 100%;
}
.sticky-hero_item-figure {
position: static;
width: 100%;
height: 100%;
}
.sticky-hero_pagination {
bottom: 0;
margin-bottom: 1.5rem;
width: 100%;
justify-content: center;
align-items: center;
}
.sticky-hero_pagination.is-desk {
display: none;
}
.sticky-hero_pagination.is-mob {
display: flex;
}
.sticky-hero_images-side {
position: relative;
}
}
// locale switcher
[data-wf-locale="en"] a[locale="en"],
[data-wf-locale="fr"] a[locale="fr"]{
display: none;
}
@media(max-width: 480px) {
[data-wf-locale="fr"] {
.nav_cta-button {
font-size: clamp(0.5rem, 0rem + 2.5vw, 0.75rem);
}
}
}
Profitez
de
notre
piscine
chauffée,
accessible
toute
l’année
de
8h
à
22h.
Bordée
de
transats
confortables
avec
serviettes
à
disposition,
elle
invite
à
un
moment
de
détente
absolue
sous
le
soleil
tropézien.
Un
lieu
idéal
pour
se
rafraîchir
et
savourer
un
instant
hors
du
temps.
Offrez-vous
un
pur
moment
de
bien-être
avec
notre
jacuzzi
extérieur
chauffé
à
34°C,
disponible
toute
l’année
de
8h
à
22h.
Laissez-vous
envelopper
par
la
chaleur
des
bulles
et
vivez
une
expérience
de
relaxation
profonde,
idéale
après
une
journée
d’exploration
ou
simplement
pour
le
plaisir.
Un
jardin
secret
où
des
pins
centenaires
créent
des
espaces
naturels
de
méditation.
Plongez
dans
un
écrin
de
verdure,
où
transats
et
coins
ombragés
offrent
un
refuge
paisible
loin
de
l’agitation.
Cet
espace
calme
et
arboré
est
parfait
pour
se
ressourcer,
lire
un
livre
ou
siroter
un
cocktail
grâce
à
notre
service
bar.
