:root {
--citrus:#DDD82A;
--green-dark:#03211D;
--beige:#F3F3EF;
--petronas:#06AF9B;
--width-desktop:1240px;
--width-desktop-small:880px;
--width-tablet:730px;
--width-mobile:350px;
--width-site:1440px;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
--logo-svg:url("data:image/svg+xml,");
}
.select2-container--default .select2-selection--single {
height: 52px !important;
max-height: 52px !important;
line-height: 52px;
.select2-selection__rendered{
line-height: 52px !important;
padding:0 20px !important;
}
}
@font-face{font-family:poppins;src:url("../fonts/Poppins-Regular.ttf") format("truetype");}
@font-face{font-family:poppinsSemiBold;src:url("../fonts/Poppins-SemiBold.ttf") format("truetype");}
@font-face{font-family:poppinsBold;src:url("../fonts/Poppins-Bold.ttf") format("truetype");}
@font-face{font-family:montserrat;src:url("../fonts/Montserrat-Regular.ttf") format("truetype");}
@font-face{font-family:montserratSemiBold;src:url("../fonts/Montserrat-SemiBold.ttf") format("truetype");}
@font-face{font-family:montserratBold;src:url("../fonts/Montserrat-Bold.ttf") format("truetype");}
.poppinsSemiBold{
font-family: poppinsSemiBold;
}
.poppinsBold{
font-family: poppinsBold;
}
.montserrat{
font-family: montserrat;
}
.montserratSemiBold{
font-family: montserratSemiBold;
}
.montserratBold{
font-family: montserratBold;
}
*{margin:0;padding:0;outline: none;box-sizing: border-box;-webkit-text-size-adjust:none;font-family: poppins;}
a{text-decoration:none;}
html{margin:0;padding:0;width:100%; height:100%;background:#F8F8F8;font-size:16px; scroll-behavior: smooth;}
body{ font-family:"Quicksand","Helvetica Neue", Helvetica, Arial, sans-serif;margin:0;padding:0;width:100%; color:#555;height:calc(100% - 44px);line-height: 1.42857;}
ul{list-style-type:none;list-style-position:inside;}
h1,h2,h3{
color:#042D26;
font-family: montserratSemiBold ;
}
h1{
/* convert rem to 56px */
font-size:3.5rem;
font-weight: 400;
}
main{
display: flex;
flex-direction: column;
align-items: center;
> section{
/*border: 1px solid purple;*/
}
}
section{
/*width: var(--width-site);*/
/*border:1px solid red;*/
}
.section_full{
display: flex;
/*align-items: center;*/
width: 100%;
justify-content: center;
.section_inner{
width: var(--width-site);
/*border: 1px solid yellow;*/
color:#919191;
display: flex;
gap:60px;
flex-direction: column;
padding:75px 0px;
}
}
.inner_title{
display: flex;
gap:25px;
align-items: center;
flex-direction: column;
padding: 0 150px;
/*background: purple;*/
.div_title{
display: flex;
/*gap:10px;*/
* {
font-size: 2.93rem;
font-family: montserratSemiBold;
color: #042d26;
letter-spacing: -0.05em;
line-height: 1.2;
}
&#div_title_rooms{
display: flex;
flex-direction: column;
align-items: center;
}
&#div_title_why{
gap:10px
}
}
.p_title{
display: flex;
flex-direction: column;
span{
text-align: center;
}
}
.anim-child {
/*display: block; !* conteneur simple *!*/
opacity: 0;
transform: translateY(99px); /* départ depuis le bas relatif */
transition: transform 0.8s cubic-bezier(0.55,0,0.1,1),
opacity 0.8s cubic-bezier(0.55,0,0.1,1);
}
&.show .anim-child {
opacity: 1;
transform: translateY(0);
}
}
.inner_box{
.anim-child {
/*display: block; !* conteneur simple *!*/
opacity: 0;
transform: translateY(99px); /* départ depuis le bas relatif */
transition: transform 0.8s cubic-bezier(0.55,0,0.1,1),
opacity 0.8s cubic-bezier(0.55,0,0.1,1);
}
&.show .anim-child {
opacity: 1;
transform: translateY(0);
}
}
.select_valdomicil{
appearance: none;
}
.arnaud{
image-rendering: pixelated;
flex-shrink: 0;
background-size: 100% 100%;
background-image: url("data:image/svg+xml,");
transform: rotate(270deg);
width: 13px;
height: 9px;
transition: transform 0.3s ease;
}
.arnaud_caret_down{
transform: rotate(360deg);
}
.h2_anchor{
color: #042D26;
border: 1px solid #042D26;
border-radius: 500px;
padding: 0px 18px;
display: flex;
height: 38px;
justify-content: center;
align-items: center;
span {
font-size: 1rem;
}
}
.h2_anchor_white{
/*color: #042D26;*/
border: 1px solid #fff;
border-radius: 500px;
padding: 0px 18px;
display: flex;
height: 38px;
justify-content: center;
align-items: center;
span {
font-size: 1rem;
color:#fff;
}
}
.fullwidth{
width: 100%;
}
header{
display: flex;
justify-content: center;
position: fixed;
z-index: 10;
width: 100%;
border-radius:60px;
#header_main {
transition: all 0.3s ease;
width: var(--width-site);
gap: 50px;
height:55px;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20px;
margin-bottom: 20px;
>div {
display: flex;
align-items: center;
place-content: center space-between;
flex: 1;
transition: all 0.3s ease;
#header_logo {
width: 185px;
height: 55px;
position: relative;
image-rendering: pixelated;
flex-shrink: 0;
background-size: 100% 100%;
background-image: var(--logo-svg);
opacity: 1;
transition: all 0.3s ease;
}
#header_nav {
display: flex;
justify-content: space-between;
align-items: center;
#nav_header {
ul {
display: flex;
gap: 49px;
transition: all 0.3s ease;
li:hover{
a {
color: rgb(101, 186, 105);
text-decoration: underline;
}
}
}
}
}
#header_burger{
display: none;
}
a {
color: #fff;
font-family: poppinsSemiBold;
transition: all 0.3s ease;
}
#btn_contact {
--btn-width: 194px;
border: 1px solid #65BA69;
background: transparent;
> div:nth-child(2) {
background: #ebebeb;
}
}
}
}
}
.gradient_txt{
background-image: linear-gradient(103deg, var(--citrus, rgb(221, 216, 42)) 0%, var(--petronas, rgb(6, 175, 155)) 100%);
-webkit-text-fill-color: transparent;
background-clip: text;
}
.gradient_bg{
background: linear-gradient(103deg, var(--citrus, rgb(221, 216, 42)) 0%, var(--petronas, rgb(6, 175, 155)) 100%);
}
.btn_animate {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: var(--btn-width);
height: 39px;
border: none;
border-radius: 31px;
overflow: hidden;
cursor: pointer;
/*background: transparent;*/
transition: all 0.3s ease;
color:#fff;
> div {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
/*transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);*/
/*transition: transform 0.5s cubic-bezier(0, 0, 0.2, 1);*/
/*transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);*/
transition: transform 0.6s cubic-bezier(0.5, 0.4, 0.2, 1);
}
> div:nth-child(1) {
left: 20px;
white-space: nowrap;
order: 1;
}
> div:nth-child(2) {
right: 3px;
width: 33px;
height: 32px;
border-radius: 50%;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
order: 2;
padding:8px;
/*transform: rotate(-31deg);*/
svg{
overflow: visible;
}
}
&.btn_animate_rotate{
> div:nth-child(2) {
transform: rotate(-31deg);
}
}
&:hover {
padding: 3px 20px 3px 2px;
}
&:hover > div:nth-child(1) {
/*transform: translate3d(50px, 0, 0); !* texte glisse vers la droite *!*/
/*order:2;*/
transform: translateX(28px);
}
&:hover > div:nth-child(2) {
/*transform: translate3d(-137px, 0, 0); !* icône glisse vers la gauche *!*/
/*order:1;*/
transform: translateX(calc(-1 * (var(--btn-width) - 40px)));
}
}
footer{
background: #042d26;
height: 240px;
color:#fff;
display: flex;
justify-content: center;
#footer_main {
width: var(--width-site);
gap: 50px;
flex-direction: column;
padding: 30px 40px 0 40px;
display: flex;
#footer_nav {
display: flex;
justify-content: space-between;
align-items: center;
#nav_footer {
ul {
display: flex;
gap: 40px;
}
}
a {
color: #fff;
}
}
#footer_link {
display: flex;
justify-content: space-between;
border-top: 1px solid #103731;
padding-top: 30px;
color: #a3a3a3;
/** converter 14px to rem width 16px of base **/
font-size: 0.875rem;
a {
color: #a3a3a3;
}
> div:nth-child(2) {
display: flex;
gap:20px;
align-items: center;
}
}
#logo_footer {
width: 246px;
height: 72px;
position: relative;
image-rendering: pixelated;
flex-shrink: 0;
background-size: 100% 100%;
background-image: var(--logo-svg);
opacity: 1;
}
}
}
/*div_all_form*/
@media (min-width: 1080px){
header {
&.scrolled {
#header_main {
background: #fff;
border-radius: 3000px;
padding: 30px 15px 30px 30px;
height: 66px;
box-shadow: rgba(0, 0, 0, 0.05) 0px 3px 16px 0px;
a {
color: #042d26;
}
#header_logo {
width: 32px;
height: 39px;
background-image: url("data:image/svg+xml,");
}
#header_contact {
#btn_contact {
background: linear-gradient(103deg, var(--citrus, rgb(221, 216, 42)) 0%, var(--petronas, rgb(6, 175, 155)) 100%);
border-color: #fff;
color: #fff;
& > div:nth-child(2) {
background: #fff;
}
}
}
}
}
}
}
@media (max-width: 1700px){
:root {
--width-site: 100%; /*section_inner => 100%*/
}
section{
/*background:darkseagreen;*/
}
main{
section{
.section_padded {
/*border:1px solid green;*/
padding-left: 150px !important;
padding-right: 150px !important;
}
}
}
header{
margin-left:92px;
margin-right:92px;
width: calc(100% - calc(2 * 92px));
}
}
@media (max-width: 1440px) {
header{
margin-left:20px;
margin-right:20px;
width: calc(100% - calc(2 * 20px));
#header_main {
margin-top: 16px;
> div {
#header_logo{
width: 156px !important;
height: 46px !important;
}
}
}
}
main{
section{
.section_padded {
padding-left: 97px !important;
padding-right: 97px !important;
}
}
}
}
@media (max-width: 1080px){
/*:root {*/
/* --width-site: var(--width-desktop-small);*/
/*}*/
/*section{*/
/* background:darkseagreen;*/
/*}*/
main{
section{
.section_padded {
padding-left: 38px !important;
padding-right: 38px !important;
}
}
}
.section_full{
.inner_title {
padding: 0 100px;
.div_title{
flex-direction: column;
align-items: center;
gap:0;
*{
font-size: 2.3rem;
line-height: 1.15;
}
}
}
}
header{
/*background:yellow;*/
margin:0;
width: 100%;
border-radius: 0;
padding:15px 20px;
#header_main{
margin:0;
height: auto;
/*border:1px solid red;*/
#header_logo{
background-image: var(--logo-svg) !important;
width: 140px !important;
height: 39px !important;
}
#header_nav{
/*display: none;*/
}
#header_contact{
/*display: none;*/
order:4;
width: 100%;
display: flex;
justify-content: center;
}
}
}
header{
position: relative;
background: #042d26;
/*background:yellow;*/
/*margin:0;*/
/*width: 100%;*/
/*border-radius: 0;*/
/*padding:15px 20px;*/
#header_main{
> div {
flex-wrap: wrap !important;
justify-content: space-between !important;
gap:30px;
#a_header_logo {
}
/*margin:0;*/
/*height: auto;*/
#header_nav {
display: none;
order: 3;
width: 100%;
/*border:1px solid red;*/
align-items: center;
/*max-height: 0;*/
/*overflow: hidden;*/
#nav_header {
width: 100%;
ul {
flex-direction: column;
align-items: center;
}
}
&.active{
opacity: 1;
/*visibility: visible;*/
}
}
#header_contact {
display: none;
}
#header_burger {
display: flex !important;
color:#fff;
font-size:22px;
cursor: pointer;
}
}
}
}
}
@media (max-width: 950px) {
footer{
height: auto;
#footer_main{
#footer_nav {
flex-direction: column;
gap:50px;
align-items: start;
#nav_footer{
ul {
gap: 50px;
}
}
}
#footer_link {
padding-bottom:30px;
justify-content: start;
gap:20px;
align-items: center;
> div:nth-child(2) {
}
}
}
}
}
@media (max-width: 810px){
/*:root {*/
/* --width-site: var(--width-tablet)*/
/*}*/
footer{
#footer_main{
#footer_nav {
/*flex-direction: column;*/
/*gap:50px;*/
align-items: center;
#nav_footer{
ul {
gap: 50px;
flex-direction: column;
align-items: center;
}
}
}
#footer_link {
flex-direction: column;
> div:nth-child(2) {
flex-direction: column;
}
}
}
}
.section_full {
.inner_title {
padding: 0 0px;
}
.section_inner{
padding:50px 0px;
}
}
}
@media (max-width: 680px) {
#div_info_contact{
align-items: center !important;
width: 100% !important;
.one_info,#description,#big_titre{
text-align: center;
}
}
}
@media (max-width: 390px){
/*:root {*/
/* --width-site: var(--width-mobile)*/
/*}*/
}