2190 lines
37 KiB
CSS
2190 lines
37 KiB
CSS
/*=============== GOOGLE FONTS ===============*/
|
|
@import url("https://fonts.googleapis.com/css2?family=Montagu+Slab:wght@500&family=Poppins:wght@400;500;600&display=swap");
|
|
|
|
/*=============== VARIABLES CSS ===============*/
|
|
:root {
|
|
--header-height: 3.5rem;
|
|
|
|
/*========== Colors ==========*/
|
|
/*Color mode HSL(hue, saturation, lightness)*/
|
|
--first-color: hsl(230, 62%, 56%);
|
|
--title-color: hsl(230, 70%, 16%);
|
|
--text-color: hsl(230, 16%, 45%);
|
|
--border-color: hsl(230, 50%, 90%);
|
|
--white-color: hsl(0, 0%, 100%);
|
|
--body-color: hsl(230, 100%, 96%);
|
|
--container-color: hsl(230, 100%, 97%);
|
|
--dark-color: hsl(239.34, 93.81%, 19.02%);
|
|
--gray-color: hsl(0, 0%, 95.69%);
|
|
--second-color: hsl(18, 88%, 58%);
|
|
--second-color-alt: hsl(201.7, 100%, 27.65%);
|
|
--gray-light-color: hsl(0, 0%, 95.69%);
|
|
|
|
/*========== Font and typography ==========*/
|
|
/*.5rem = 8px | 1rem = 16px ...*/
|
|
--body-font: "Poppins", sans-serif;
|
|
--second-font: "Montagu Slab", serif;
|
|
--biggest-font-size: 2rem;
|
|
--h1-font-size: 1.5rem;
|
|
--h2-font-size: 1.25rem;
|
|
--h3-font-size: 1rem;
|
|
--normal-font-size: .938rem;
|
|
--small-font-size: .813rem;
|
|
--smaller-font-size: .75rem;
|
|
|
|
/*========== Font weight ==========*/
|
|
--font-regular: 400;
|
|
--font-medium: 500;
|
|
--font-semi-bold: 600;
|
|
--font-bold: 700
|
|
|
|
/*========== z index ==========*/
|
|
--z-tooltip: 10;
|
|
--z-fixed: 100;
|
|
}
|
|
|
|
/*========== Responsive typography ==========*/
|
|
@media screen and (min-width: 1150px) {
|
|
:root {
|
|
--biggest-font-size: 3.5rem;
|
|
--h1-font-size: 2.25rem;
|
|
--h2-font-size: 1.5rem;
|
|
--h3-font-size: 1.25rem;
|
|
--normal-font-size: 1rem;
|
|
--small-font-size: .875rem;
|
|
--smaller-font-size: .813rem;
|
|
}
|
|
}
|
|
|
|
/*=============== BASE ===============*/
|
|
* {
|
|
box-sizing: border-box;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body,
|
|
input,
|
|
button {
|
|
font-family: var(--body-font);
|
|
font-size: var(--normal-font-size);
|
|
}
|
|
|
|
body {
|
|
background-color: var(--body-color);
|
|
color: var(--text-color);
|
|
transition: background-color .4s;
|
|
}
|
|
|
|
input,
|
|
button {
|
|
border: none;
|
|
outline: none;
|
|
}
|
|
|
|
h1, h2, h3, h4 {
|
|
color: var(--title-color);
|
|
/*font-family: var(--second-font);*/
|
|
font-family: var(--body-font);
|
|
font-weight: var(--font-medium);
|
|
}
|
|
|
|
ul {
|
|
list-style: none;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
img {
|
|
display: block;
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
/*=============== THEME ===============*/
|
|
/*========== Variables Dark theme ==========*/
|
|
|
|
|
|
/*==========
|
|
Color changes in some parts of
|
|
the website, in dark theme
|
|
==========*/
|
|
|
|
|
|
/*=============== REUSABLE CSS CLASSES ===============*/
|
|
.container {
|
|
max-width: 1220px;
|
|
margin-inline: 1.5rem;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.section {
|
|
padding-block: 5rem 1rem;
|
|
}
|
|
|
|
.section__title {
|
|
text-align: center;
|
|
font-size: var(--h1-font-size);
|
|
/*font-family: var(--second-font);*/
|
|
font-family: var(--body-font);
|
|
margin-bottom: 2rem;
|
|
font-weight: var(--font-semi-bold);
|
|
}
|
|
|
|
.main {
|
|
overflow: hidden; /* For animation ScrollReveal */
|
|
}
|
|
|
|
/*=============== HEADER & NAV ===============*/
|
|
.header {
|
|
position: fixed;
|
|
width: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
background-color: var(--body-color);
|
|
z-index: var(--z-fixed);
|
|
transition: box-shadow .4s;
|
|
}
|
|
|
|
.nav {
|
|
height: var(--header-height);
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav__logo img {
|
|
width: 3.5rem;
|
|
height: 3.5rem;
|
|
}
|
|
|
|
.nav__actions {
|
|
display: flex;
|
|
align-items: center;
|
|
column-gap: 1.5rem;
|
|
}
|
|
|
|
.nav__actions i {
|
|
font-size: 1rem;
|
|
color: var(--title-color);
|
|
cursor: pointer;
|
|
transition: color .4s;
|
|
}
|
|
|
|
.localize {
|
|
margin-top: .25rem;
|
|
}
|
|
|
|
.nav__actions i:hover {
|
|
color: var(--first-color);
|
|
}
|
|
|
|
.nav__toggle,
|
|
.nav__close {
|
|
display: flex;
|
|
font-size: 1.5rem;
|
|
color: var(--title-color);
|
|
cursor: pointer;
|
|
}
|
|
/* Navigation for mobile devices */
|
|
@media screen and (max-width: 1150px) {
|
|
.nav__menu {
|
|
position: fixed;
|
|
top: -120%;
|
|
left: 0;
|
|
background-color: var(--body-color);
|
|
width: 100%;
|
|
padding-block: 4.5rem 3.5rem;
|
|
box-shadow: 0 4px 16px hsla(353, 100%, 8%, .1);
|
|
transition: top .4s;
|
|
}
|
|
|
|
.dropdownagency__content,
|
|
.dropdown__content {
|
|
max-height: 580px;
|
|
overflow-y: scroll;
|
|
}
|
|
}
|
|
|
|
.nav__list {
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
row-gap: 2rem;
|
|
font-size: var(--normal-font-size);
|
|
justify-content: center;
|
|
}
|
|
|
|
.nav__link,
|
|
.dropdown__button {
|
|
position: relative;
|
|
color: var(--title-color);
|
|
font-family: var(--body-font);
|
|
}
|
|
|
|
.nav__close {
|
|
position: absolute;
|
|
top: 1rem;
|
|
right: 1.5rem;
|
|
}
|
|
|
|
/*=============== DROPDOWN ===============*/
|
|
.dropdown__button {
|
|
cursor: pointer;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.dropdown__arrow {
|
|
font-weight: initial;
|
|
transition: transform .4s;
|
|
}
|
|
|
|
.dropdown__content,
|
|
.dropdown__group,
|
|
.dropdown__list {
|
|
display: grid;
|
|
}
|
|
|
|
.dropdownagency__container,
|
|
.dropdown__container {
|
|
background-color: var(--gray-color);
|
|
height: 0;
|
|
overflow: hidden;
|
|
transition: height .4s;
|
|
}
|
|
|
|
.dropdownagency__content,
|
|
.dropdown__content {
|
|
row-gap: 1.75rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.dropdown__group {
|
|
padding-left: 2.5rem;
|
|
row-gap: .5rem;
|
|
}
|
|
|
|
.dropdown__group:first-child {
|
|
margin-top: 1.25rem;
|
|
}
|
|
|
|
.dropdown__group:last-child {
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.agencies__separator {
|
|
border-left: 1px solid var(--second-color);
|
|
height: 150px;
|
|
padding-left: 3rem;
|
|
}
|
|
|
|
.products__separator {
|
|
border-left: 1px solid var(--second-color);
|
|
height: 410px;
|
|
padding-left: 3rem;
|
|
}
|
|
|
|
.dropdown__icon {
|
|
display: grid;
|
|
place-items: center;
|
|
}
|
|
|
|
.dropdown__icon img {
|
|
width: 50%;
|
|
border-radius: 2rem;
|
|
margin: .5rem;
|
|
}
|
|
|
|
.dropdown__title {
|
|
font-size: var(--small-font-size);
|
|
font-weight: var(--font-semi-bold);
|
|
color: var(--title-color);
|
|
}
|
|
|
|
.dropdown__list {
|
|
row-gap: .25rem;
|
|
}
|
|
|
|
.dropdown__link {
|
|
font-size: var(--smaller-font-size);
|
|
font-weight: var(--font-medium);
|
|
color: var(--text-color);
|
|
transition: color .3s;
|
|
}
|
|
|
|
.dropdown__link:hover {
|
|
color: var(--title-color);
|
|
}
|
|
|
|
/* Rotate dropdown icon */
|
|
.show-dropdown .dropdown__arrow {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
/* Show menu */
|
|
.show-menu {
|
|
top: 0;
|
|
}
|
|
|
|
/* Add shadow header */
|
|
.shadow-header {
|
|
box-shadow: 0 2px 16px hsla(0, 0%, 0%, .1);
|
|
}
|
|
|
|
/* Active link */
|
|
.active-link::after {
|
|
width: 60%;
|
|
}
|
|
|
|
/*=============== LOGIN ===============*/
|
|
.login {
|
|
position: fixed;
|
|
top: -100%;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: var(--z-fixed);
|
|
background-color: hsla(230, 12%, 96%, .6);
|
|
backdrop-filter: blur(16px);
|
|
align-items: center;
|
|
padding: 1.5rem;
|
|
text-align: center;
|
|
transition: top .4s;
|
|
}
|
|
|
|
.login__form {
|
|
background-color: var(--container-color);
|
|
padding: 2rem 1.5rem;
|
|
border: 1px solid var(--border-color);
|
|
row-gap: 1.25rem;
|
|
border-radius: .5rem;
|
|
}
|
|
|
|
.login__title {
|
|
font-size: var(--h2-font-size);
|
|
}
|
|
|
|
.login__group {
|
|
row-gap: 1.25rem;
|
|
}
|
|
|
|
.login__label {
|
|
display: block;
|
|
text-align: initial;
|
|
color: var(--title-color);
|
|
font-weight: var(--font-medium);
|
|
margin-bottom: .25rem;
|
|
}
|
|
|
|
.login__input {
|
|
width: 100%;
|
|
background-color: var(--container-color);
|
|
border: 2px solid var(--border-color);
|
|
padding: 1rem;
|
|
color: var(--text-color);
|
|
border-radius: .5rem;
|
|
}
|
|
|
|
.login__signup,
|
|
.login__forgot {
|
|
display: block;
|
|
font-size: var(--small-font-size);
|
|
}
|
|
|
|
.login__signup {
|
|
margin-bottom: .5rem;
|
|
}
|
|
|
|
.login__signup a {
|
|
color: var(--first-color);
|
|
font-weight: var(--font-medium);
|
|
}
|
|
|
|
.login__forgot {
|
|
color: var(--first-color);
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.login__button {
|
|
width: 100%;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.login__close {
|
|
position: absolute;
|
|
top: 2rem;
|
|
right: 2rem;
|
|
font-size: 2rem;
|
|
color: var(--title-color);
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Show login */
|
|
.show-login {
|
|
top: 0;
|
|
}
|
|
|
|
/*=============== MODAL ===============*/
|
|
.modal {
|
|
position: fixed;
|
|
top: -100%;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: var(--z-fixed);
|
|
background-color: hsla(230, 12%, 96%, .6);
|
|
backdrop-filter: blur(16px);
|
|
align-items: center;
|
|
padding: 1.5rem;
|
|
text-align: center;
|
|
transition: top .4s;
|
|
}
|
|
|
|
.modal__form {
|
|
background-color: var(--container-color);
|
|
padding: 2rem 1.5rem;
|
|
border: 1px solid var(--border-color);
|
|
row-gap: 1.25rem;
|
|
border-radius: .5rem;
|
|
}
|
|
|
|
.modal__title {
|
|
font-size: var(--h2-font-size);
|
|
}
|
|
|
|
.modal__close {
|
|
position: absolute;
|
|
top: 2rem;
|
|
right: 2rem;
|
|
font-size: 2rem;
|
|
color: var(--title-color);
|
|
cursor: pointer;
|
|
}
|
|
|
|
/*=============== DÉPOSER ANNONCE ===============*/
|
|
.depannonce {
|
|
background-color: var(--gray-color);
|
|
height: 80vh;
|
|
}
|
|
|
|
.depannonce__form {
|
|
background-color: var(--white-color);
|
|
padding: 3rem 1.5rem;
|
|
margin: 2rem 0;
|
|
text-align: center;
|
|
row-gap: 1.25rem;
|
|
border-radius: .5rem;
|
|
}
|
|
|
|
.depannonce__title {
|
|
font-size: var(--normal-font-size);
|
|
font-weight: var(--font-regular);
|
|
color: var(--text-color);
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.depannonce__group {
|
|
row-gap: 1.25rem;
|
|
}
|
|
|
|
.depannonce__label {
|
|
display: block;
|
|
text-align: initial;
|
|
color: var(--text-color);
|
|
font-weight: var(--font-regular);
|
|
margin-bottom: .5rem;
|
|
}
|
|
|
|
.depannonce__input {
|
|
width: 100%;
|
|
height: 2.5rem;
|
|
background-color: var(--container-color);
|
|
border: 1px solid var(--border-color);
|
|
padding: 1rem;
|
|
color: var(--text-color);
|
|
border-radius: .5rem;
|
|
}
|
|
|
|
.depannonce__button {
|
|
width: 100%;
|
|
height: 2.5rem;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
margin-bottom: 3rem;
|
|
}
|
|
|
|
.depannonce__member {
|
|
margin-bottom: 1rem;
|
|
font-size: var(--smaller-font-size);
|
|
}
|
|
|
|
.depannonce__bring {
|
|
display: grid;
|
|
margin-bottom: 1rem;
|
|
font-size: var(--smaller-font-size);
|
|
row-gap: 1rem;
|
|
}
|
|
|
|
.depannonce__amount,
|
|
.depannonce__rental {
|
|
background-color: var(--container-color);
|
|
}
|
|
|
|
.depannonce__login {
|
|
width: 100%;
|
|
height: 2.5rem;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
margin-bottom: 3rem;
|
|
font-weight: var(--font-semi-bold);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/*=============== INSCRIPTION ANNONCE ===============*/
|
|
.inscription {
|
|
padding: 8rem 0;
|
|
}
|
|
|
|
.inscription h2 {
|
|
color: var(--text-color);
|
|
font-size: var(--font-regular);
|
|
}
|
|
|
|
.inscription__wrapper {
|
|
display: grid;
|
|
row-gap: 2rem;
|
|
}
|
|
|
|
.inscription__card {
|
|
position: relative;
|
|
text-align: center;
|
|
background-color: var(--white-color);
|
|
padding: 2rem;
|
|
overflow: hidden;
|
|
transition: border .4s, background-color .4s;
|
|
border-radius: .5rem;
|
|
height: 250px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.inscription__card i {
|
|
font-size: var(--biggest-font-size);
|
|
margin: 0 auto .75rem;
|
|
border-radius: .5rem;
|
|
color: var(--second-color);
|
|
}
|
|
|
|
.inscription__title {
|
|
font-size: var(--h2-font-size);
|
|
margin-bottom: .5rem;
|
|
margin-top: 1rem;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
|
|
|
|
/*=============== BOOKING ===============*/
|
|
.booking {
|
|
background: linear-gradient(rgba(0, 84, 121, 0.7), rgba(0, 84, 121, 0.7)), url('/public/assets/img/tools/home-bg.jpg') no-repeat center center/cover;
|
|
height: 80vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
color: var(--body-color);
|
|
padding-top: var(--header-height);
|
|
}
|
|
|
|
.booking h1 {
|
|
color: var(--body-color);
|
|
font-size: 2.5rem;
|
|
margin-bottom: 0.5rem;
|
|
font-weight: var(--font-semi-bold);
|
|
}
|
|
|
|
.booking p {
|
|
font-size: 1.2rem;
|
|
margin-bottom: 2.5rem;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.booking-form {
|
|
display: flex;
|
|
gap: 1rem;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
padding: 1.5rem;
|
|
border-radius: 12px;
|
|
backdrop-filter: blur(10px);
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-block;
|
|
padding: 12px 28px;
|
|
border-radius: 10px;
|
|
font-weight: 600;
|
|
transition: all 0.3s ease;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--second-color);
|
|
color: var(--body-color);
|
|
}
|
|
.btn-primary:hover {
|
|
background: var(--second-color-alt);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.booking-form .btn {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.form-group {
|
|
position: relative;
|
|
flex: 1;
|
|
min-width: 200px;
|
|
}
|
|
|
|
.form-group i {
|
|
position: absolute;
|
|
left: 15px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: #888;
|
|
}
|
|
|
|
.form-group input {
|
|
width: 100%;
|
|
padding: 15px 15px 15px 45px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-size: 1rem;
|
|
font-family: var(--body-font);
|
|
background-color: var(--body-color);
|
|
}
|
|
|
|
/*=============== HOME ===============*/
|
|
.home__swiper {
|
|
margin: initial;
|
|
}
|
|
|
|
.home__container {
|
|
padding-top: 2rem;
|
|
row-gap: 2.5rem;
|
|
}
|
|
|
|
.home__data {
|
|
text-align: center;
|
|
}
|
|
|
|
.home__title {
|
|
font-size: var(--h1-font-size);
|
|
margin-bottom: 1rem;
|
|
font-weight: var(--font-semi-bold);
|
|
}
|
|
|
|
.home__description {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.home__images {
|
|
display: grid;
|
|
}
|
|
|
|
.home__article,
|
|
.home__img {
|
|
width: 220px;
|
|
transition: scale .4s;
|
|
}
|
|
|
|
.home__article {
|
|
scale: .8;
|
|
}
|
|
|
|
/* Swiper class */
|
|
.swiper-slide-active,
|
|
.swiper-slide-duplicate-active {
|
|
scale: 1;
|
|
}
|
|
|
|
/*=============== BUTTON ===============*/
|
|
.button {
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
background-color: var(--second-color);
|
|
color: var(--white-color);
|
|
padding: 1rem 1.5rem;
|
|
font-weight: var(--font-semi-bold);
|
|
border-radius: .5rem;
|
|
box-shadow: 0 4px 32px hsla(230, 72%, 32%, .4);
|
|
transition: background-color .4s;
|
|
margin-bottom: 2rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.button:hover {
|
|
background: var(--second-color-alt);
|
|
}
|
|
|
|
.slim-button {
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
background-color: var(--second-color);
|
|
color: var(--white-color);
|
|
padding: .1rem 1rem;
|
|
border-radius: .5rem;
|
|
box-shadow: 0 4px 32px hsla(230, 72%, 32%, .4);
|
|
transition: background-color .4s;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.slim-button:hover {
|
|
background: var(--second-color-alt);
|
|
}
|
|
|
|
|
|
/*=============== SERVICES ===============*/
|
|
.services__container {
|
|
row-gap: 3rem;
|
|
}
|
|
|
|
.services__card {
|
|
text-align: center;
|
|
}
|
|
|
|
.services__card i {
|
|
display: block;
|
|
font-size: 3rem;
|
|
color: var(--first-color);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.services__title {
|
|
font-size: var(--h3-font-size);
|
|
margin-bottom: .5rem;
|
|
}
|
|
|
|
.swiper-button-prev, .swiper-button-next {
|
|
font-size: var(--h3-font-size) !important;
|
|
border-radius: .5rem;
|
|
border: 1px solid var(--white-color) !important;
|
|
}
|
|
|
|
.swiper-button-prev i {
|
|
color: var(--second-color);
|
|
}
|
|
|
|
.swiper-button-next i {
|
|
color: var(--second-color);
|
|
}
|
|
|
|
/*=============== FARMLANDS ===============*/
|
|
.farmland__card {
|
|
position: relative;
|
|
text-align: center;
|
|
background-color: var(--white-color);
|
|
border: 1px solid var(--border-color);
|
|
padding: 2rem;
|
|
overflow: hidden;
|
|
transition: border .4s, background-color .4s;
|
|
border-radius: .5rem;
|
|
}
|
|
|
|
.farmland__img {
|
|
width: 150px;
|
|
margin: 0 auto .75rem;
|
|
border-radius: .5rem;
|
|
}
|
|
|
|
.farmland__title {
|
|
font-size: var(--h2-font-size);
|
|
margin-bottom: .5rem;
|
|
}
|
|
|
|
.farmland__prices {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
column-gap: .75rem;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.farmland__discount {
|
|
color: var(--title-color);
|
|
}
|
|
|
|
.farmland__price {
|
|
font-size: var(--small-font-size);
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.farmland__card .button {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.farmland__actions {
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
row-gap: .75rem;
|
|
position: absolute;
|
|
top: 2rem;
|
|
right: -1.5rem;
|
|
transition: right .4s;
|
|
}
|
|
|
|
.farmland__actions button {
|
|
background: none;
|
|
font-size: 1.25rem;
|
|
color: var(--first-color);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.farmland__card:hover .farmland__actions {
|
|
right: 1.5rem;
|
|
}
|
|
|
|
|
|
/*=============== BUILDING ===============*/
|
|
.building__card {
|
|
position: relative;
|
|
text-align: center;
|
|
background-color: var(--white-color);
|
|
border: 1px solid var(--border-color);
|
|
padding: 2rem;
|
|
overflow: hidden;
|
|
transition: border .4s, background-color .4s;
|
|
border-radius: .5rem;
|
|
}
|
|
|
|
.building__img {
|
|
width: 150px;
|
|
margin: 0 auto .75rem;
|
|
border-radius: .5rem;
|
|
}
|
|
|
|
.building__title {
|
|
font-size: var(--h2-font-size);
|
|
margin-bottom: .5rem;
|
|
}
|
|
|
|
.building__prices {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
column-gap: .75rem;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.building__discount {
|
|
color: var(--title-color);
|
|
}
|
|
|
|
.building__price {
|
|
font-size: var(--small-font-size);
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.building__card .button {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.building__actions {
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
row-gap: .75rem;
|
|
position: absolute;
|
|
top: 2rem;
|
|
right: -1.5rem;
|
|
transition: right .4s;
|
|
}
|
|
|
|
.building__actions button {
|
|
background: none;
|
|
font-size: 1.25rem;
|
|
color: var(--first-color);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.building__card:hover .building__actions {
|
|
right: 1.5rem;
|
|
}
|
|
|
|
/* Swiper class */
|
|
.swiper-button-prev::after,
|
|
.swiper-button-next::after {
|
|
content: '';
|
|
}
|
|
|
|
.swiper-button-prev,
|
|
.swiper-button-next {
|
|
width: initial;
|
|
height: initial;
|
|
background-color: var(--container-color);
|
|
border: 2px solid var(--border-color);
|
|
padding: .5rem;
|
|
font-size: 1.5rem;
|
|
color: var(--first-color);
|
|
transition: border .4s background-color .4s;
|
|
}
|
|
|
|
/*=============== DISCOUNT ===============*/
|
|
.discount__container {
|
|
row-gap: 3.5rem;
|
|
}
|
|
|
|
.discount__data {
|
|
text-align: center;
|
|
}
|
|
|
|
.discount__title {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.discount__description {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.discount__images {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.discount__img-1,
|
|
.discount__img-2 {
|
|
width: 170px;
|
|
}
|
|
|
|
.discount__img-1 {
|
|
transform: translateX(1rem) rotate(-10deg);
|
|
}
|
|
|
|
.discount__img-2 {
|
|
transform: translateX(-1rem) rotate(10deg);
|
|
}
|
|
|
|
/*=============== VEHICLE ===============*/
|
|
.vehicle__card {
|
|
display: flex;
|
|
align-items: center;
|
|
column-gap: 2.5rem;
|
|
background-color: var(--white-color);
|
|
border: 1px solid var(--border-color);
|
|
padding: 1.5rem 1rem;
|
|
color: var(--text-color);
|
|
transition: border .4s, background-color .4s;
|
|
border-radius: .5rem;
|
|
}
|
|
|
|
.vehicle__card:hover {
|
|
border: 1px solid var(--text-color);
|
|
}
|
|
|
|
.vehicle__img {
|
|
width: 100px;
|
|
}
|
|
|
|
.vehicle__title {
|
|
font-size: var(--h3-font-size);
|
|
margin-bottom: .5rem;
|
|
}
|
|
|
|
.vehicle__prices {
|
|
display: flex;
|
|
align-items: center;
|
|
column-gap: .75rem;
|
|
margin-bottom: .75rem;
|
|
}
|
|
|
|
.vehicle__discount {
|
|
color: var(--title-color);
|
|
}
|
|
|
|
.vehicle__price {
|
|
font-size: var(--small-font-size);
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.vehicle__stars {
|
|
color: var(--first-color);
|
|
}
|
|
|
|
.vehicle__swiper:nth-child(1) {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
/*=============== JOIN ===============*/
|
|
.join__container {
|
|
position: relative;
|
|
padding-block: 3rem;
|
|
}
|
|
|
|
.join__bg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: center;
|
|
}
|
|
|
|
.join__data {
|
|
position: relative;
|
|
}
|
|
|
|
.join__title {
|
|
color: var(--white-color);
|
|
}
|
|
|
|
.join__form {
|
|
display: grid;
|
|
row-gap: 1rem;
|
|
}
|
|
|
|
.join__input {
|
|
padding: 1.25rem 1rem;
|
|
background-color: var(--body-color);
|
|
color: var(--title-color);
|
|
transition: background-color .4s;
|
|
border-radius: .5rem;
|
|
}
|
|
|
|
.join__input::placeholder {
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.join__button {
|
|
padding-block: 1.25rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/*=============== TESTIMONIAL ===============*/
|
|
.testimonial__card {
|
|
text-align: center;
|
|
background-color: var(--white-color);
|
|
padding: 2rem 3rem 2.5rem;
|
|
border: 1px solid var(--border-color);
|
|
transition: border .4s, background-color .4s;
|
|
border-radius: .5rem;
|
|
}
|
|
|
|
.testimonial__img {
|
|
width: 100px;
|
|
border-radius: 50px;
|
|
margin: 0 auto 1.5rem;
|
|
}
|
|
|
|
.testimonial__title {
|
|
font-size: var(--h2-font-size);
|
|
margin-bottom: .75rem;
|
|
}
|
|
|
|
.testimonial__description {
|
|
font-size: var(--small-font-size);
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.testimonial__stars {
|
|
color: var(--first-color);
|
|
}
|
|
|
|
/*=============== FOOTER ===============*/
|
|
.footer {
|
|
padding-block: 4rem 6rem;
|
|
}
|
|
|
|
.footer__container {
|
|
row-gap: 3rem;
|
|
}
|
|
|
|
.footer__logo {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
column-gap: .5rem;
|
|
color: var(--first-color);
|
|
font-size: var(--h3-font-size);
|
|
/*font-family: var(--second-font);*/
|
|
font-family: var(--body-font);
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.footer__data {
|
|
grid-template-columns: repeat(2, max-content);
|
|
gap: 3rem 2rem;
|
|
}
|
|
|
|
.footer__title {
|
|
font-size: var(--h3-font-size);
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.footer__links {
|
|
display: grid;
|
|
row-gap: .5rem;
|
|
}
|
|
|
|
.footer__link {
|
|
color: var(--text-color);
|
|
transition: color .4s;
|
|
}
|
|
|
|
.footer__link:hover {
|
|
color: var(--first-color);
|
|
}
|
|
|
|
.footer__info {
|
|
font-style: normal;
|
|
}
|
|
|
|
.footer__social {
|
|
display: flex;
|
|
column-gap: 1.25rem;
|
|
}
|
|
|
|
.footer__social-link {
|
|
font-size: 1.25rem;
|
|
color: var(--first-color);
|
|
}
|
|
|
|
.footer__copy {
|
|
display: block;
|
|
margin-top: 5rem;
|
|
text-align: center;
|
|
font-size: var(--small-font-size);
|
|
}
|
|
|
|
/*=============== SCROLL BAR ===============*/
|
|
::-webkit-scrollbar {
|
|
width: .6rem;
|
|
border-radius: .5rem;
|
|
background-color: hsl(230, 16%, 85%);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
border-radius: .5rem;
|
|
background-color: hsl(230, 16%, 65%);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background-color: hsl(230, 16%, 55%);
|
|
}
|
|
|
|
/*=============== SCROLL UP ===============*/
|
|
.scrollup {
|
|
position: fixed;
|
|
right: 1rem;
|
|
bottom: -50%;
|
|
background-color: var(--container-color);
|
|
box-shadow: 0 2px 8px hsla(0, 0%, 0%, .1);
|
|
color: var(--title-color);
|
|
display: inline-flex;
|
|
padding: 6px;
|
|
font-size: 1.25rem;
|
|
z-index: var(--z-tooltip);
|
|
transition: bottom .4s, transform .4s, background-color .4s;
|
|
}
|
|
|
|
.scrollup:hover {
|
|
transform: translateY(-.5rem);
|
|
}
|
|
|
|
/* Show Scroll Up */
|
|
.show-scroll {
|
|
bottom: 6rem;
|
|
}
|
|
|
|
/*=============== EXPLORE ===============*/
|
|
.explore {
|
|
background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('/public/assets/img/explore-materiels.avif');
|
|
background-size: cover;
|
|
background-position: center;
|
|
height: 60vh;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.explore-content { color: var(--body-color); }
|
|
|
|
.explore h1 {
|
|
font-size: 3.5rem;
|
|
line-height: 1.1;
|
|
margin-bottom: 15px;
|
|
font-weight: 900;
|
|
color: var(--body-color);
|
|
}
|
|
|
|
.explore .highlight { color: var(--second-color); }
|
|
|
|
.explore p {
|
|
font-size: 1.2rem;
|
|
margin-bottom: 30px;
|
|
max-width: 500px;
|
|
}
|
|
|
|
.btn-primary {
|
|
display: inline-block;
|
|
background-color: var(--second-color);
|
|
color: var(--black);
|
|
padding: 15px 35px;
|
|
font-weight: 700;
|
|
border-radius: 4px;
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.btn-primary:hover { transform: translateY(-2px); }
|
|
|
|
/*=============== CATEGORIES ===============*/
|
|
.explore-categories { padding: 60px 0; }
|
|
.bg-light { background-color: var(--gray-light-color); }
|
|
.section-title {
|
|
font-size: 1.8rem;
|
|
margin-bottom: 30px;
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.section-title::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 50%;
|
|
height: 4px;
|
|
background: var(--second-color);
|
|
bottom: -8px;
|
|
left: 0;
|
|
}
|
|
|
|
.category-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20px;
|
|
}
|
|
|
|
.cat-card {
|
|
flex: 1 1 150px; /* Grow, Shrink, Basis */
|
|
background: var(--white-color);
|
|
padding: 30px 10px;
|
|
text-align: center;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
|
|
transition: 0.3s;
|
|
cursor: pointer;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.cat-card:hover {
|
|
border-color: var(--second-color);
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.cat-icon {
|
|
font-size: 2.5rem;
|
|
color: var(--second-color);
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.cat-card h3 { font-size: 1rem; font-weight: 500; }
|
|
|
|
/*==================== PRODUCT SPOTLIGHT ====================*/
|
|
.product-spotlight {
|
|
padding: 60px 0;
|
|
/*background-color: var(--white-color);*/
|
|
}
|
|
|
|
.flex-row-between {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.mb-2 { margin-bottom: 20px; }
|
|
|
|
.see-all {
|
|
color: var(--text-color);
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.product-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 25px;
|
|
}
|
|
|
|
.product-card {
|
|
flex: 1 1 250px;
|
|
background: var(--white-color);
|
|
border: 1px solid var(--gray-border);
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.product-card:hover { box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
|
|
|
|
.product-card:hover .btn-add {
|
|
background: var(--second-color);
|
|
/*border-color: var(--white-color);*/
|
|
color: var(--white-color);
|
|
}
|
|
|
|
.tag {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 10px;
|
|
background: var(--text-color);
|
|
color: var(--white-color);
|
|
padding: 4px 10px;
|
|
font-size: 0.7rem;
|
|
font-weight: 700;
|
|
border-radius: 4px;
|
|
z-index: 2;
|
|
}
|
|
|
|
.tag.promo { background: #d32f2f; }
|
|
|
|
.product-card:hover .prod-image img { transform: scale(1.05); }
|
|
|
|
.prod-image {
|
|
height: 180px;
|
|
overflow: hidden;
|
|
background: #f9f9f9;
|
|
}
|
|
|
|
.prod-image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: transform 0.5s;
|
|
}
|
|
|
|
.prod-details {
|
|
padding: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.prod-details .category {
|
|
font-size: 0.75rem;
|
|
color: var(--text-color);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.prod-details h4 {
|
|
margin: 5px 0 15px;
|
|
font-size: 1.1rem;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.price-block { margin-top: auto; margin-bottom: 15px; }
|
|
.price-block .label { font-size: 0.8rem; color: var(--text-color); }
|
|
.price-block .price { font-size: 1.3rem; font-weight: 700; color: var(--text-color); }
|
|
.price-block .per { font-size: 0.9rem; color: var(--text-color); }
|
|
|
|
.btn-add {
|
|
width: 100%;
|
|
padding: 10px;
|
|
background: transparent;
|
|
border: 2px solid var(--gray-border);
|
|
border-radius: 4px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*=============== SONGON ===============*/
|
|
.songon {
|
|
height: 60vh;
|
|
margin-top: 50px;
|
|
background-color: var(--white-color);
|
|
}
|
|
|
|
.songon__container {
|
|
row-gap: 3.5rem;
|
|
margin-top: 4rem;
|
|
}
|
|
|
|
.songon__data {
|
|
text-align: center;
|
|
}
|
|
|
|
.songon__title {
|
|
margin-bottom: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.songon__description {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.songon__images {
|
|
/*display: flex;
|
|
justify-content: center;*/
|
|
width: 100%;
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
padding: 1rem;
|
|
position: relative;
|
|
}
|
|
|
|
.songon__img-1 {
|
|
width: 100%;
|
|
}
|
|
|
|
.songon__images img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.pin {
|
|
background-color: #4362f8;
|
|
position: absolute;
|
|
width: .7em;
|
|
height: .7em;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.pin::before {
|
|
content: '';
|
|
background-color: #4362f8;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
animation: pulse 1.3s ease-in-out infinite;
|
|
}
|
|
|
|
.pin span {
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
position: absolute;
|
|
left: 1.5rem;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: var(--second-color);
|
|
border-radius: 3em;
|
|
padding: .3em .6em;
|
|
font-size: .5em;
|
|
color: var(--white-color);
|
|
}
|
|
|
|
.sp {
|
|
top: 62%;
|
|
left: 46%;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
100% {
|
|
opacity: 0;
|
|
transform: translate(-50%, -50%) scale(2.5);
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 600px) {
|
|
.songon {
|
|
height: 80vh;
|
|
}
|
|
|
|
.songon__images {
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
|
|
/* Show modal */
|
|
.show-modal {
|
|
top: 0;
|
|
}
|
|
|
|
/*=============== EVENT ROOMS ===============*/
|
|
.eventrooms {
|
|
background-color: var(--gray-color);
|
|
}
|
|
|
|
.skinny__button {
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
/*background-color: var(--first-color);*/
|
|
background-color: var(--second-color);
|
|
color: var(--white-color);
|
|
/*padding: 1rem 1.5rem;*/
|
|
font-weight: var(--font-semi-bold);
|
|
border-radius: .5rem;
|
|
box-shadow: 0 4px 32px hsla(230, 72%, 32%, .4);
|
|
transition: background-color .4s;
|
|
margin-bottom: 1rem;
|
|
height: 28px;
|
|
width: 180px;
|
|
font-size: .7rem;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.skinny__border__button {
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
border: 1px solid var(--second-color);
|
|
color: var(--title-color);
|
|
font-weight: var(--font-semi-bold);
|
|
border-radius: .5rem;
|
|
box-shadow: 0 4px 32px hsla(230, 72%, 32%, .4);
|
|
transition: background-color .4s;
|
|
margin-bottom: 1rem;
|
|
height: 28px;
|
|
width: 180px;
|
|
font-size: .7rem;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.skinny__button i {
|
|
color: var(--title-color);
|
|
margin-right: .4rem;
|
|
}
|
|
|
|
.skinny__border__button i {
|
|
color: var(--title-color);
|
|
margin-right: .4rem;
|
|
}
|
|
|
|
.eventrooms__card {
|
|
position: relative;
|
|
text-align: center;
|
|
background-color: var(--white-color);
|
|
border: 1px solid var(--border-color);
|
|
padding: 2rem;
|
|
overflow: hidden;
|
|
transition: border .4s, background-color .4s;
|
|
border-radius: .5rem;
|
|
}
|
|
|
|
.eventrooms__card .button {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.eventrooms__card:hover .eventrooms__actions {
|
|
right: 1.5rem;
|
|
}
|
|
|
|
.eventrooms__img {
|
|
width: 150px;
|
|
margin: 0 auto .75rem;
|
|
border-radius: .5rem;
|
|
}
|
|
|
|
.eventrooms__title {
|
|
font-size: var(--h2-font-size);
|
|
margin-bottom: .5rem;
|
|
}
|
|
|
|
.eventrooms__prices {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
column-gap: .75rem;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.eventrooms__discount {
|
|
color: var(--title-color);
|
|
}
|
|
|
|
.eventrooms__price {
|
|
font-size: var(--small-font-size);
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.eventrooms__actions {
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
row-gap: .75rem;
|
|
position: absolute;
|
|
top: 2rem;
|
|
right: -1.5rem;
|
|
transition: right .4s;
|
|
}
|
|
|
|
.eventrooms__actions button {
|
|
background: none;
|
|
font-size: 1.25rem;
|
|
color: var(--first-color);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.eventrooms__card:hover .eventrooms__actions {
|
|
right: 1.5rem;
|
|
}
|
|
|
|
/*=============== TARPAULIN ===============*/
|
|
.tarpaulin {
|
|
background-color: var(--white-color);
|
|
}
|
|
|
|
.tarpaulin__card {
|
|
position: relative;
|
|
text-align: center;
|
|
background-color: var(--white-color);
|
|
border: 1px solid var(--border-color);
|
|
padding: 2rem;
|
|
overflow: hidden;
|
|
transition: border .4s, background-color .4s;
|
|
border-radius: .5rem;
|
|
}
|
|
|
|
.tarpaulin__card .button {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.tarpaulin__card:hover .tarpaulin__actions {
|
|
right: 1.5rem;
|
|
}
|
|
|
|
.tarpaulin__img {
|
|
width: 150px;
|
|
margin: 0 auto .75rem;
|
|
border-radius: .5rem;
|
|
}
|
|
|
|
.tarpaulin__title {
|
|
font-size: var(--h2-font-size);
|
|
margin-bottom: .5rem;
|
|
}
|
|
|
|
.tarpaulin__prices {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
column-gap: .75rem;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.tarpaulin__discount {
|
|
color: var(--title-color);
|
|
}
|
|
|
|
.tarpaulin__price {
|
|
font-size: var(--small-font-size);
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.tarpaulin__actions {
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
row-gap: .75rem;
|
|
position: absolute;
|
|
top: 2rem;
|
|
right: -1.5rem;
|
|
transition: right .4s;
|
|
}
|
|
|
|
.tarpaulin__actions button {
|
|
background: none;
|
|
font-size: 1.25rem;
|
|
color: var(--first-color);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.tarpaulin__card:hover .tarpaulin__actions {
|
|
right: 1.5rem;
|
|
}
|
|
|
|
|
|
/*=============== BREAKPOINTS ===============*/
|
|
/* For small devices */
|
|
@media screen and (max-width: 320px) {
|
|
.container {
|
|
margin-inline: 1rem;
|
|
}
|
|
|
|
.nav__menu,
|
|
.nav__actions {
|
|
column-gap: .25rem;
|
|
}
|
|
|
|
.dropdownagency__content,
|
|
.dropdown__content {
|
|
max-height: 500px;
|
|
overflow-y: scroll;
|
|
text-align: initial;
|
|
}
|
|
|
|
.dropdown__group {
|
|
padding-left: 1.5rem;
|
|
}
|
|
|
|
.discount__img-1,
|
|
.discount__img-2 {
|
|
width: 140px;
|
|
}
|
|
|
|
.vehicle__card {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.testimonial__card {
|
|
padding-inline: 1rem;
|
|
}
|
|
|
|
.footer__data {
|
|
grid-template-columns: 1fr;
|
|
row-gap: 2rem;
|
|
}
|
|
}
|
|
|
|
/* For medium devices */
|
|
@media screen and (min-width: 450px) {
|
|
.farmland__card,
|
|
.featured__card,
|
|
.eventrooms__card,
|
|
.tarpaulin__card {
|
|
width: 290px;
|
|
}
|
|
|
|
.vehicle__card {
|
|
width: 390px;
|
|
}
|
|
|
|
.testimonial__card {
|
|
width: 320px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 576px) {
|
|
.dropdownagency__content {
|
|
text-align: center;
|
|
}
|
|
|
|
.dropdown__content {
|
|
text-align: initial;
|
|
}
|
|
|
|
.login__form,
|
|
.modal__form {
|
|
width: 400px;
|
|
justify-self: center;
|
|
}
|
|
|
|
.depannonce__form {
|
|
width: 400px;
|
|
justify-self: center;
|
|
}
|
|
|
|
.login__close,
|
|
.modal__close {
|
|
width: max-content;
|
|
top: 4rem;
|
|
left: 0;
|
|
right: 0;
|
|
margin-inline: auto;
|
|
}
|
|
|
|
.modal__content{
|
|
margin: auto;
|
|
width: 380px;
|
|
border-radius: 1.25rem;
|
|
}
|
|
|
|
.modal__img{
|
|
width: 170px;
|
|
}
|
|
|
|
.home__container,
|
|
.discount__container,
|
|
.songon__container {
|
|
grid-template-columns: 420px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.join__form {
|
|
width: 328px;
|
|
justify-self: center;
|
|
}
|
|
|
|
.footer__data {
|
|
grid-template-columns: repeat(3, max-content);
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 768px) {
|
|
.home__container {
|
|
grid-template-columns: 580px;
|
|
}
|
|
|
|
.home__data {
|
|
width: 420px;
|
|
justify-self: center;
|
|
}
|
|
|
|
.services__container {
|
|
grid-template-columns: repeat(3, max-content);
|
|
justify-content: center;
|
|
column-gap: 5rem;
|
|
}
|
|
|
|
.footer__container {
|
|
grid-template-columns: repeat(2, max-content);
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
|
|
|
|
/* For large devices */
|
|
@media screen and (min-width: 1150px) {
|
|
.section {
|
|
padding-block: 5rem 2rem;
|
|
}
|
|
|
|
.section__title {
|
|
margin-bottom: 4rem;
|
|
}
|
|
|
|
.nav {
|
|
height: calc(var(--header-height) + 2rem);
|
|
column-gap: 4rem;
|
|
}
|
|
|
|
.container {
|
|
margin-inline: auto;
|
|
}
|
|
|
|
.nav__menu {
|
|
width: initial;
|
|
margin-inline: auto 0;
|
|
}
|
|
|
|
.nav__toggle,
|
|
.nav__close {
|
|
display: none;
|
|
}
|
|
|
|
.nav__list {
|
|
flex-direction: row;
|
|
column-gap: 4rem;
|
|
}
|
|
|
|
.nav__logo img {
|
|
width: 5rem;
|
|
height: 5rem;
|
|
}
|
|
|
|
.dropdown__button {
|
|
column-gap: 0.25rem;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.dropdownagency__container,
|
|
.dropdown__container {
|
|
height: max-content;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 6.5rem;
|
|
background-color: var(--body-color);
|
|
box-shadow: 0 6px 8px hsla(220, 68%, 12%, 0.05);
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transition: top 0.4s, opacity 0.3s;
|
|
max-height: 580px;
|
|
overflow-y: scroll;
|
|
text-align: initial;
|
|
}
|
|
|
|
.dropdownagency__content {
|
|
max-width: 1120px;
|
|
margin-inline: auto;
|
|
}
|
|
|
|
.dropdown__content {
|
|
grid-template-columns: repeat(4, max-content);
|
|
max-width: 1120px;
|
|
margin-inline: auto;
|
|
}
|
|
|
|
.dropdown__group {
|
|
padding: 4rem 0;
|
|
align-content: baseline;
|
|
row-gap: 1.25rem;
|
|
width: 300px;
|
|
height: 100%;
|
|
}
|
|
.dropdown__group:first-child, .dropdown__group:last-child {
|
|
margin: 0;
|
|
}
|
|
.dropdown__list {
|
|
row-gap: 0.75rem;
|
|
}
|
|
|
|
.dropdown__icon {
|
|
width: 60px;
|
|
height: 60px;
|
|
background-color: var(--container-color);
|
|
border-radius: 50%;
|
|
display: grid;
|
|
place-items: center;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.dropdown__icon i {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.dropdown__title {
|
|
font-size: var(--normal-font-size);
|
|
}
|
|
.dropdown__link {
|
|
font-size: var(--small-font-size);
|
|
}
|
|
.dropdown__link:hover {
|
|
color: var(--first-color);
|
|
}
|
|
.dropdown__item {
|
|
cursor: pointer;
|
|
}
|
|
.dropdown__item:hover .dropdown__arrow {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.dropdownagency__item {
|
|
cursor: pointer;
|
|
}
|
|
.dropdownagency__item:hover .dropdown__arrow {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.dropdownagency__item:hover > .dropdownagency__container {
|
|
top: 3.6rem;
|
|
opacity: 1;
|
|
pointer-events: initial;
|
|
position: fixed;
|
|
|
|
left: 45rem;
|
|
right: 45rem;
|
|
}
|
|
|
|
.dropdown__item:hover > .dropdown__container {
|
|
top: 3.6rem;
|
|
opacity: 1;
|
|
pointer-events: initial;
|
|
position: fixed;
|
|
}
|
|
|
|
.home__data {
|
|
width: initial;
|
|
}
|
|
|
|
.services__container {
|
|
column-gap: 10rem;
|
|
}
|
|
|
|
.services__card i {
|
|
font-size: 3.5rem;
|
|
}
|
|
|
|
.inscription__container,
|
|
.farmland__container,
|
|
.building__container,
|
|
.eventrooms__container,
|
|
.tarpaulin__container {
|
|
padding-top: 2rem;
|
|
}
|
|
|
|
.farmland__title,
|
|
.building__title,
|
|
.eventrooms__title,
|
|
.tarpaulin__title {
|
|
font-size: var(--h3-font-size);
|
|
}
|
|
|
|
.discount__container,
|
|
.songon__container {
|
|
grid-template-columns: 615px 500px;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.discount__data {
|
|
order: 1;
|
|
}
|
|
|
|
.discount__data,
|
|
.discount__title {
|
|
text-align: initial;
|
|
}
|
|
|
|
.discount__description {
|
|
margin-bottom: 3.5rem;
|
|
}
|
|
|
|
.discount__img-1,
|
|
.discount__img-2 {
|
|
width: 300px;
|
|
}
|
|
|
|
.vehicle__container {
|
|
padding-top: 2rem;
|
|
}
|
|
|
|
.vehicle__card {
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
.vehicle__img {
|
|
width: 120px;
|
|
}
|
|
|
|
.vehicle__title {
|
|
font-size: var(--h3-font-size);
|
|
}
|
|
|
|
.join__bg {
|
|
object-position: 0 -5rem;
|
|
}
|
|
|
|
.testimonial__container {
|
|
padding-top: 2rem;
|
|
}
|
|
|
|
.testimonial__card {
|
|
padding-inline: 2rem;
|
|
}
|
|
|
|
.testimonial__title {
|
|
font-size: var(--h3-font-size);
|
|
}
|
|
|
|
.testimonial__description {
|
|
font-size: var(--normal-font-size);
|
|
}
|
|
|
|
.footer {
|
|
padding-block: 6rem 3rem;
|
|
}
|
|
|
|
.footer__data {
|
|
grid-template-columns: repeat(4, max-content);
|
|
column-gap: 4.5rem;
|
|
}
|
|
|
|
.footer__logo,
|
|
.footer__title {
|
|
font-size: var(--h2-font-size);
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.footer__links {
|
|
row-gap: 1rem;
|
|
}
|
|
|
|
.footer__social {
|
|
column-gap: 1.5rem;
|
|
}
|
|
|
|
.footer__social-link {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.footer__copy {
|
|
margin-top: 7.5rem;
|
|
}
|
|
|
|
.scrollup {
|
|
right: 3rem;
|
|
}
|
|
|
|
.show-scroll {
|
|
bottom: 3rem;
|
|
}
|
|
|
|
}
|
|
|
|
@media screen and (min-width: 1220px) {
|
|
.container {
|
|
margin-inline: auto;
|
|
}
|
|
|
|
.home__container {
|
|
grid-template-columns: 435px 745px;
|
|
align-items: center;
|
|
padding-block: 5rem 2rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.home__data {
|
|
text-align: initial;
|
|
}
|
|
|
|
.home__description {
|
|
margin-bottom: 4rem;
|
|
}
|
|
|
|
.home__article,
|
|
.home__img {
|
|
/*width: 290px;*/
|
|
width: 400px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.booking {
|
|
height: auto;
|
|
padding: 150px 0 100px 0;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 992px) {
|
|
.booking-form {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.explore h1 { font-size: 2.5rem; }
|
|
}
|
|
|
|
|