/*
Theme Name: Côte Dorée Beach Club
Based on: Panagea v.2.8
Author: Ansonika (base) — Beach Club Edition
[Table of contents]
1. SITE STRUCTURE and TYPOGRAPHY
- 1.1 Typography
- 1.2 Buttons
- 1.3 Structure
2. CONTENT
- 2.1 Home / Hero
- 2.2 About
- 2.3 Listing
- 2.4 Detail page
- 2.5 Login/register
- 2.6 Map styles
- 2.7 Contacts
- 2.8 404 page
- 2.9 Cart section
- 2.10 Media Gallery
- 2.11 Faq
- 2.12 Adventure
- 2.13 Home AirBnb
- 2.14 Half screen map
- 2.15 Autocomplete Address Search
- 2.16 OpenStreet Map
- 2.17 Parallax Video Background
- 2.18 Other Headers
- 2.19 Home Categories Hover effect
- 2.20 Home Search Radio categories
3. COMMON
- 3.1 Misc
- 3.2 Accordion
- 3.3 List
- 3.4 Spacing
- 3.5 Block reveal
- 3.6 Cookie bar
- 3.7 Sign In Modal
- 3.8 Input Switcher
- 3.9 Datepicker
- 3.10 Modal Generic
- 3.11 Pricing tables
- 3.12 Styles Switcher
- 3.13 Time picker
4. BEACH CLUB THEME
- 4.1 Design tokens
- 4.2 Typography overrides
- 4.3 Header — transparent
- 4.4 Header — sticky / scrolled
- 4.5 Hero slider — cinematic
- 4.6 Scroll indicator
- 4.7 Experiences section
- 4.8 Testimonials section
- 4.9 CTA section
- 4.10 Events / News cards
- 4.11 Footer
- 4.12 Language switcher
- 4.13 Mobile menu
- 4.14 Scroll reveal animations
- 4.15 Utility overrides
- 4.16 Scrollbar & selection
*/
/*============================================================================================*/
/* 1. SITE STRUCTURE and TYPOGRAPHY */
/*============================================================================================*/
/* MAIN NAVIGATION */
@media only screen and (min-width: 992px) {
nav#menu.main-menu { display: block !important; }
#mm-menu.main-menu { display: none !important; }
header .btn_mobile { display: none !important; }
.main-menu {
position: relative;
z-index: 9;
width: auto;
top: 12px;
right: 15px;
float: right;
transition: all 0.3s ease-in-out;
color: #fff;
}
.main-menu ul,
.main-menu ul li {
position: relative;
display: inline-block;
margin: 0;
padding: 0;
}
.main-menu ul a,
.main-menu ul li a {
position: relative;
margin: 0;
padding: 5px 10px;
display: block;
white-space: nowrap;
}
.main-menu > ul > li span > a {
color: rgba(255, 255, 255, 0.8);
padding: 0 8px 15px 8px;
font-size: 0.75rem;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
}
header.sticky .main-menu > ul > li span > a { color: #3A2E1E; }
header.sticky .main-menu > ul > li span:hover > a {
opacity: 1;
color: #1B6B7A;
}
.main-menu ul ul {
position: absolute;
z-index: 1;
visibility: hidden;
left: 3px;
top: 100%;
margin: 0;
display: block;
padding: 0;
background: rgba(250, 246, 239, 0.98);
min-width: 200px;
box-shadow: 0 20px 60px rgba(58, 46, 30, 0.12);
transform: scale(0.4);
transform-origin: 10% top;
transition: all 0.2s ease;
border-radius: 2px;
border: 0.5px solid rgba(200, 169, 110, 0.2);
}
.main-menu ul ul:before {
bottom: 100%;
left: 15%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-bottom-color: rgba(250, 246, 239, 0.98);
border-width: 7px;
margin-left: -7px;
}
.main-menu ul ul li { display: block; height: auto; padding: 0; }
.main-menu ul ul li a {
font-size: 0.75rem;
font-weight: 400;
letter-spacing: 1px;
color: #3A2E1E;
border-bottom: 0.5px solid rgba(200, 169, 110, 0.15);
display: block;
padding: 15px 10px;
line-height: 1;
}
.main-menu ul li:hover > ul {
padding: 0;
visibility: visible;
opacity: 1;
transform: scale(1);
transition-delay: 0.2s;
transition-duration: 0s, 0.2s, 0.2s;
}
.main-menu ul ul li:first-child a:hover { border-radius: 2px 2px 0 0; }
.main-menu ul ul li:last-child a { border-bottom: none; }
.main-menu ul ul li:last-child a:hover { border-radius: 0 0 2px 2px; }
.main-menu ul ul li:hover > a {
background-color: rgba(200, 169, 110, 0.08);
color: #1B6B7A;
padding-left: 18px;
}
}
.main-menu ul ul.second_level_right { left: auto; right: 3px; }
.main-menu ul ul.second_level_right:before { right: 15%; left: auto; }
.main-menu ul ul li span a { font-weight: 400 !important; }
.main-menu ul ul li span a:hover { color: #1B6B7A; padding-left: 18px; opacity: 1; }
.main-menu ul ul li span a:after {
font-family: 'ElegantIcons';
content: "\35";
float: right;
font-size: 1rem;
margin-top: -2px;
}
.main-menu ul ul ul {
position: absolute;
border-top: 0;
z-index: 1;
height: auto;
left: 100%;
top: 0;
margin: 0;
padding: 0;
background: rgba(250, 246, 239, 0.98);
min-width: 190px;
box-shadow: 0 6px 12px rgba(58, 46, 30, 0.1);
}
.main-menu ul ul ul.third_level_left { right: 100%; left: auto; }
.main-menu ul ul ul li a { border-bottom: 0.5px solid rgba(200, 169, 110, 0.15) !important; }
.main-menu ul ul ul li:last-child a { border-bottom: none !important; }
.main-menu ul ul ul:before { border-width: 0; margin-left: 0; }
@media only screen and (max-width: 991px) {
nav#menu { display: none !important; }
.mm-menu { background: #FAF6EF; }
.main-menu { top: 0; right: 0; float: none; }
ul.mm-listview { line-height: 25px; }
ul.mm-listview li a { color: #3A2E1E !important; display: block; }
}
#menu.fake_menu { display: none !important; visibility: hidden !important; }
/*-------- Preloader --------*/
#preloader {
position: fixed;
top: 0; left: 0; right: 0;
width: 100%; height: 100%; bottom: 0;
background-color: #FAF6EF;
z-index: 99999999999 !important;
}
[data-loader="circle-side"] {
position: absolute;
width: 50px; height: 50px;
top: 50%; left: 50%;
margin-left: -25px; margin-top: -25px;
animation: circle infinite .95s linear;
border: 2px solid #C8A96E;
border-top-color: rgba(0, 0, 0, 0.1);
border-right-color: rgba(0, 0, 0, 0.1);
border-bottom-color: rgba(0, 0, 0, 0.1);
border-radius: 100%;
}
@keyframes circle {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
/*-------- 1.1 Typography --------*/
html * {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html {
scroll-behavior: smooth;
overflow-x: hidden; /* prevent horizontal scroll from overflowing elements */
/* scroll-behavior yalnızca reduced-motion isteği yoksa çalışsın */
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
body {
overflow-x: hidden;
}
body {
background: #FAF6EF;
font-size: 0.875rem;
line-height: 1.7;
font-family: 'Jost', 'Poppins', Helvetica, sans-serif;
color: rgba(26, 18, 8, 0.65);
}
h1, h2, h3, h4, h5, h6 {
color: #1A1208;
font-family: 'Cormorant Garamond', Georgia, serif;
font-weight: 400;
letter-spacing: 0.02em;
}
p { margin-bottom: 30px; }
strong { font-weight: 600; }
label { font-weight: 500; margin-bottom: 3px; }
hr {
margin: 30px 0;
border-color: rgba(200, 169, 110, 0.2);
opacity: 1;
}
hr.large {
border-color: rgba(200, 169, 110, 0.2);
height: 4px;
margin-top: 60px;
}
@media (max-width: 991px) { hr.large { margin-top: 45px; } }
@media (max-width: 767px) { hr.large { margin-bottom: 45px; } }
ul, ol { list-style: none; margin: 0 0 25px 0; padding: 0; }
.main_title { text-align: center; margin-bottom: 45px; position: relative; }
.main_title span {
content: "";
display: block;
width: 60px; height: 2px;
margin: auto;
margin-bottom: 20px;
opacity: 1;
background-color: #C8A96E;
visibility: hidden;
transform: scaleX(0);
transition: all 0.6s;
}
.main_title.animated span { visibility: visible; transform: scaleX(1); }
.main_title_2 { text-align: center; margin-bottom: 45px; position: relative; }
.main_title_2 span {
width: 120px; height: 2px;
background-color: rgba(200, 169, 110, 0.2);
display: block; margin: auto;
}
.main_title_2 span em {
width: 60px; height: 2px;
background-color: #1B6B7A;
display: block; margin: auto;
}
@media (max-width: 767px) { .main_title_2 { margin-bottom: 10px; } }
.main_title_2 h2 { margin: 25px 0 0 0; }
@media (max-width: 767px) { .main_title_2 h2 { font-size: 1.625rem; } }
.main_title_2 h3 { margin: 25px 0 0 0; }
@media (max-width: 767px) { .main_title_2 h3 { font-size: 1.5rem; } }
.main_title_2 p { font-size: 1.5rem; font-weight: 500; line-height: 1.4; }
@media (max-width: 767px) { .main_title_2 p { font-size: 1.125rem; } }
.main_title_3 { margin-bottom: 25px; position: relative; }
.main_title_3 span {
width: 120px; height: 2px;
background-color: rgba(200, 169, 110, 0.2);
display: block;
}
.main_title_3 span em {
width: 60px; height: 2px;
background-color: #1B6B7A;
display: block;
}
@media (max-width: 767px) { .main_title_3 { margin-bottom: 10px; } }
.main_title_3 h2, .main_title_3 h3 { font-size: 1.4375rem; margin: 25px 0 0 0; }
@media (max-width: 767px) { .main_title_3 h2, .main_title_3 h3 { font-size: 1.3125rem; } }
.main_title_3 p { font-size: 1.125rem; font-weight: 500; line-height: 1.4; }
a {
color: #1B6B7A;
text-decoration: none;
transition: all 0.3s ease-in-out;
outline: none;
}
a:hover, a:focus { color: #0F4650; text-decoration: none; outline: none; }
/*-------- 1.2 Buttons --------*/
a.btn_1,
.btn_1 {
border: none;
color: #fff;
background: #1B6B7A;
outline: none;
cursor: pointer;
display: inline-block;
text-decoration: none;
padding: 14px 32px;
font-weight: 500;
font-size: 0.72rem;
letter-spacing: 2.5px;
text-transform: uppercase;
text-align: center;
line-height: 1;
transition: all 0.35s ease;
border-radius: 2px;
font-family: 'Jost', sans-serif;
}
a.btn_1:hover,
.btn_1:hover {
background: #0F4650;
color: #fff;
box-shadow: 0 8px 30px rgba(27, 107, 122, 0.2);
}
a.btn_1.full-width,
.btn_1.full-width { display: block; width: 100%; text-align: center; margin-bottom: 5px; }
a.btn_1.full-width.purchase,
.btn_1.full-width.purchase { background-color: #2E8B57; }
a.btn_1.full-width.purchase:hover,
.btn_1.full-width.purchase:hover { background-color: #1B6B7A; }
a.btn_1.medium,
.btn_1.medium { font-size: 1rem; padding: 18px 40px; }
a.btn_1.rounded,
.btn_1.rounded { border-radius: 2px !important; }
a.btn_1.outline,
.btn_1.outline {
border: 1px solid #1B6B7A;
color: #1B6B7A;
padding: 13px 32px;
background: none;
}
a.btn_1.outline:hover,
.btn_1.outline:hover { background: #1B6B7A; color: #fff; border-color: #1B6B7A; }
/* Sand variant */
a.btn_sand,
.btn_sand {
background: #C8A96E;
color: #1A1208;
border: none;
padding: 13px 32px;
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 2.5px;
text-transform: uppercase;
border-radius: 2px;
cursor: pointer;
display: inline-block;
text-decoration: none;
transition: all 0.35s ease;
font-family: 'Jost', sans-serif;
}
a.btn_sand:hover,
.btn_sand:hover { background: #FAF6EF; color: #1A1208; }
.closebt {
transition: all 0.3s ease-in-out;
cursor: pointer;
position: absolute;
font-size: 1.5rem;
top: 10px; right: 15px;
color: #fff;
opacity: 0.6;
width: 30px; height: 30px;
}
.closebt:hover { transform: rotate(90deg); opacity: 1; }
a.btn_map {
border-radius: 2px;
padding: 8px 12px;
line-height: 1;
margin-bottom: 5px;
display: inline-block;
border: 0.5px solid rgba(200, 169, 110, 0.3);
font-weight: 500;
font-size: 0.75rem;
color: rgba(26, 18, 8, 0.5);
}
a.btn_map:hover { color: #1B6B7A; }
a.btn_map:before {
font-family: 'ElegantIcons';
content: "\e081";
display: inline-block;
margin-right: 5px;
}
a.btn_map_in,
.btn_map_in {
border: none;
color: #fff;
background: #1B6B7A;
outline: none;
cursor: pointer;
display: inline-block;
text-decoration: none;
padding: 15px 30px;
font-weight: 500;
text-align: center;
width: 100%;
margin-bottom: 20px;
line-height: 1;
transition: all 0.3s ease-in-out;
border-radius: 2px;
}
a.btn_map_in:hover,
.btn_map_in:hover { background: #0F4650; color: #fff; }
/*-------- 1.3 Structure --------*/
/*
* HEADER LAYOUT
* Desktop (≥992px): [logo] [nav — flex-grow centre] [ul#top_menu: reserve + lang]
* Mobile (<992px): absolute three-zone bar
* LEFT → ul#top_menu (lang only, reserve hidden)
* CENTER → #logo
* RIGHT → a.btn_mobile (hamburger)
*/
/* ═══ BASE SHELL ════════════════════════════════════ */
header {
position: fixed;
left: 0; top: 0;
width: 100%;
z-index: 99999999;
height: 76px;
padding: 0 44px;
display: flex;
align-items: center;
border-bottom: 1px solid transparent;
transition: background 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
border-color 0.45s ease,
box-shadow 0.45s ease;
}
@media (max-width: 991px) {
header {
height: 60px;
padding: 0;
}
}
/* ═══ LOGO ══════════════════════════════════════════ */
#logo {
position: static !important;
float: none !important;
width: auto !important;
text-align: left !important;
flex-shrink: 0;
display: flex;
align-items: center;
order: 1;
z-index: 2;
}
#logo a {
display: flex;
align-items: center;
text-decoration: none;
line-height: 1;
}
#logo img {
height: 36px;
width: auto;
display: block;
}
#logo .logo_sticky { display: none; }
header.sticky #logo .logo_normal { display: none; }
header.sticky #logo .logo_sticky { display: block; }
@media (max-width: 991px) {
#logo {
position: absolute !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
order: 2;
z-index: 1;
}
#logo img { height: 28px; margin: 0 !important; }
}
/* ═══ DESKTOP NAV ═══════════════════════════════════ */
nav#menu.main-menu {
position: static !important;
float: none !important;
top: auto !important;
right: auto !important;
flex: 1;
display: flex !important;
align-items: center;
justify-content: center;
order: 2;
margin: 0;
padding: 0;
}
nav#menu.main-menu > ul {
display: flex;
align-items: center;
list-style: none;
margin: 0; padding: 0; gap: 0;
}
nav#menu.main-menu > ul > li {
display: inline-flex;
align-items: center;
position: relative;
margin: 0; padding: 0;
}
nav#menu.main-menu > ul > li span { display: inline-block; }
nav#menu.main-menu > ul > li span > a {
display: block;
padding: 6px 14px;
font-family: 'Jost', sans-serif;
font-size: 0.72rem;
font-weight: 400;
letter-spacing: 2.5px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.78);
white-space: nowrap;
text-decoration: none;
position: relative;
transition: color 0.3s ease;
}
nav#menu.main-menu > ul > li span > a::after {
content: '';
position: absolute;
bottom: -1px; left: 14px;
width: 0; height: 0.5px;
background: rgba(232, 213, 176, 0.8);
transition: width 0.32s ease;
}
nav#menu.main-menu > ul > li span > a:hover,
nav#menu.main-menu > ul > li span > a.active { color: #fff; opacity: 1; }
nav#menu.main-menu > ul > li span > a:hover::after,
nav#menu.main-menu > ul > li span > a.active::after { width: calc(100% - 28px); }
/* submenu */
nav#menu.main-menu ul ul {
position: absolute;
z-index: 999; visibility: hidden; opacity: 0;
left: 0; top: 100%;
background: rgba(250, 246, 239, 0.97);
border: 0.5px solid rgba(200, 169, 110, 0.2);
border-radius: 2px;
min-width: 180px;
box-shadow: 0 16px 50px rgba(58, 46, 30, 0.12);
padding: 4px;
transform: translateY(6px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
nav#menu.main-menu ul li:hover > ul { visibility: visible; opacity: 1; transform: translateY(0); }
nav#menu.main-menu ul ul li { display: block; padding: 0; }
nav#menu.main-menu ul ul li a {
display: block; padding: 11px 14px;
font-size: 0.75rem; font-weight: 400; letter-spacing: 1px;
color: rgba(26, 18, 8, 0.65);
border-bottom: 0.5px solid rgba(200, 169, 110, 0.1);
text-decoration: none; border-radius: 2px;
transition: all 0.2s ease;
}
nav#menu.main-menu ul ul li:last-child a { border-bottom: none; }
nav#menu.main-menu ul ul li a:hover { color: #1B6B7A; background: rgba(200, 169, 110, 0.06); padding-left: 20px; }
/* MUST hide on mobile — overrides Panagea JS */
@media (max-width: 991px) {
nav#menu.main-menu { display: none !important; }
}
/* sticky nav */
header.sticky nav#menu.main-menu > ul > li span > a { color: rgba(26, 18, 8, 0.55); }
header.sticky nav#menu.main-menu > ul > li span > a:hover,
header.sticky nav#menu.main-menu > ul > li span > a.active { color: #1B6B7A; }
header.sticky nav#menu.main-menu > ul > li span > a::after { background: #1B6B7A; }
/* ═══ TOP MENU (reserve + lang) ═════════════════════ */
ul#top_menu {
float: none !important;
margin: 0 !important;
padding: 0;
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
order: 3;
list-style: none;
}
ul#top_menu > li {
display: flex;
align-items: center;
margin: 0 !important;
line-height: 1;
}
/* Reserve button */
ul#top_menu > li > a.btn_1,
ul#top_menu > li > a.reserve-header {
display: inline-flex !important;
align-items: center;
position: static !important;
top: auto !important; width: auto !important; height: auto !important;
text-indent: 0 !important;
padding: 10px 24px !important;
font-family: 'Jost', sans-serif;
font-size: 0.68rem !important;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
color: #fff !important;
background: #1B6B7A;
border: none; border-radius: 2px;
text-decoration: none; white-space: nowrap;
transition: background 0.3s ease, transform 0.3s ease;
cursor: pointer;
}
ul#top_menu > li > a.btn_1:before,
ul#top_menu > li > a.reserve-header:before { display: none !important; }
ul#top_menu > li > a.btn_1:hover,
ul#top_menu > li > a.reserve-header:hover {
background: #0F4650; color: #fff !important;
}
header.sticky ul#top_menu > li > a.btn_1,
header.sticky ul#top_menu > li > a.reserve-header {
background: #C8A96E; color: #1A1208 !important;
}
header.sticky ul#top_menu > li > a.btn_1:hover,
header.sticky ul#top_menu > li > a.reserve-header:hover {
background: #1B6B7A; color: #fff !important;
}
/* Mobile: dil seçici sağda */
@media (max-width: 991px) {
ul#top_menu {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
gap: 0;
z-index: 2;
}
ul#top_menu > li:first-child { display: none !important; }
}
/* ═══ HAMBURGER ══════════════════════════════════════ */
a.btn_mobile {
display: none !important;
order: 4;
flex-shrink: 0;
z-index: 2;
}
@media (max-width: 991px) {
a.btn_mobile {
display: flex !important;
align-items: center;
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
}
}
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
background-color: rgba(255, 255, 255, 0.88) !important;
transition: background-color 0.4s ease;
}
header.sticky .hamburger-inner,
header.sticky .hamburger-inner::before,
header.sticky .hamburger-inner::after {
background-color: #1A1208 !important;
}
/* ═══ STICKY ═════════════════════════════════════════ */
header.sticky {
background-color: rgba(250, 246, 239, 0.97) !important;
border-bottom: 0.5px solid rgba(200, 169, 110, 0.2) !important;
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
box-shadow: 0 2px 24px rgba(58, 46, 30, 0.07);
}
/* ═══ SCROLL PROGRESS ═══════════════════════════════ */
header::after {
content: '';
position: absolute;
bottom: 0; left: 0;
height: 1.5px;
width: var(--scroll-progress, 0%);
background: linear-gradient(to right, #1B6B7A, #C8A96E);
transition: width 0.1s linear;
pointer-events: none;
}
/* ═══ DROPDOWN USER MENU ════════════════════════════ */
.dropdown-user .dropdown-menu {
border: 0.5px solid rgba(200, 169, 110, 0.2);
border-radius: 4px; padding: 0; width: 160px;
top: calc(100% + 10px); right: 0; left: auto; margin: 0;
background: rgba(250, 246, 239, 0.98);
box-shadow: 0 20px 60px rgba(58, 46, 30, 0.12);
backdrop-filter: blur(12px);
}
.dropdown-user .dropdown-menu:before {
bottom: 100%; right: 14%;
border: solid transparent; content: " "; height: 0; width: 0;
position: absolute; pointer-events: none;
border-bottom-color: rgba(250, 246, 239, 0.98);
border-width: 6px; margin-left: -6px;
}
.dropdown-user .dropdown-menu ul { padding: 4px; margin: 0 !important; list-style: none; }
.dropdown-user .dropdown-menu ul li {
border-bottom: 0.5px solid rgba(200, 169, 110, 0.1);
margin: 0; width: 100%; display: block; font-size: 0.8rem;
}
.dropdown-user .dropdown-menu ul li a {
color: rgba(26, 18, 8, 0.65) !important;
padding: 12px 14px; display: block; border-radius: 2px;
font-weight: 400; letter-spacing: 0.3px; transition: all 0.2s ease;
}
.dropdown-user .dropdown-menu ul li a:hover {
color: #1B6B7A !important; background: rgba(200, 169, 110, 0.06); padding-left: 20px;
}
.dropdown-user .dropdown-menu ul li:last-child { border-bottom: none; }
.hero_in {
width: 100%;
height: 450px;
position: relative;
overflow: hidden;
text-align: center;
color: #fff;
}
@media (max-width: 767px) { .hero_in { height: 350px; } }
.hero_in.general:before { background: url(../img/hero_in_bg_2.jpg) center center no-repeat; background-size: cover; }
.hero_in.general .wrapper { background-color: rgba(26, 18, 8, 0.55); }
.hero_in.tours:before { background: url(../img/hero_in_bg_1.jpg) center center no-repeat; background-size: cover; }
.hero_in.tours .wrapper { background-color: rgba(26, 18, 8, 0.55); }
.hero_in.hotels:before { background: url(../img/hero_in_bg_4.jpg) center center no-repeat; background-size: cover; }
.hero_in.hotels .wrapper { background-color: rgba(26, 18, 8, 0.55); }
.hero_in.restaurants:before { background: url(../img/hero_in_bg_5.jpg) center center no-repeat; background-size: cover; }
.hero_in.restaurants .wrapper { background-color: rgba(26, 18, 8, 0.55); }
.hero_in.tours_detail { height: 550px; }
@media (max-width: 575px) { .hero_in.tours_detail { height: 500px; } }
.hero_in.tours_detail:before { background: url(../img/hero_in_tours_detail.jpg) center center no-repeat; background-size: cover; }
.hero_in.tours_detail .wrapper { background-color: rgba(26, 18, 8, 0.55); }
.hero_in.hotels_detail { height: 550px; }
@media (max-width: 575px) { .hero_in.hotels_detail { height: 500px; } }
.hero_in.hotels_detail:before { background: url(../img/hero_in_hotels_detail.jpg) center center no-repeat; background-size: cover; }
.hero_in.hotels_detail .wrapper { background-color: rgba(26, 18, 8, 0.55); }
.hero_in.restaurants_detail { height: 550px; }
@media (max-width: 575px) { .hero_in.restaurants_detail { height: 500px; } }
.hero_in.restaurants_detail:before { background: url(../img/hero_in_restaurants_detail.jpg) center center no-repeat; background-size: cover; }
.hero_in.restaurants_detail .wrapper { background-color: rgba(26, 18, 8, 0.55); }
.hero_in.contacts:before { background: url(../img/hero_in_bg_3.jpg) center center no-repeat; background-size: cover; }
.hero_in.contacts .wrapper { background-color: rgba(26, 18, 8, 0.55); }
.hero_in:before {
/* No animation — instant visible, prevents empty-space bug */
content: "";
opacity: 1;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
transform: scale(1.04);
}
.hero_in .wrapper {
display: flex;
flex-direction: column;
justify-content: center;
/* height:100% only works when parent has explicit height.
Use min-height instead so it always fills the section. */
min-height: 360px;
padding: 100px 20px 60px;
box-sizing: border-box;
}
@media (max-width: 767px) {
.hero_in .wrapper {
min-height: 280px;
padding: 90px 20px 50px;
}
}
.hero_in .wrapper h1 {
color: #fff;
font-size: 2.625rem;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 4px;
margin-top: 30px;
}
@media (max-width: 767px) { .hero_in .wrapper h1 { font-size: 2rem; } }
.hero_in .wrapper h1 span {
width: 60px; height: 1px;
margin: auto;
background-color: #C8A96E;
display: block;
margin-bottom: 20px;
border-radius: 0;
opacity: 1;
}
.hero_in .wrapper p {
font-weight: 500;
margin-bottom: 0;
font-size: 1.25rem;
letter-spacing: 0.02em;
}
.hero_in a.btn_photos {
position: absolute;
left: 20px; bottom: 20px;
background-color: rgba(250, 246, 239, 0.9);
border-radius: 2px;
line-height: 1;
padding: 10px 15px;
color: #3A2E1E;
font-weight: 500;
font-size: 0.78rem;
letter-spacing: 1px;
}
.hero_in a.btn_photos:hover { color: #1B6B7A; }
/* pop-in animation removed — was causing opacity:0 empty space bug */
main {
background-color: #FAF6EF;
position: relative;
z-index: 1;
}
/* Footer base */
footer {
background-color: #1A1208 !important;
color: rgba(255, 255, 255, 0.5);
}
footer h5 {
color: #fff;
margin: 25px 0;
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 3px;
text-transform: uppercase;
font-family: 'Jost', sans-serif;
}
@media (max-width: 575px) { footer h5 { margin: 25px 0 10px 0; } }
footer ul li { margin-bottom: 5px; }
footer ul li a {
transition: all 0.3s ease-in-out;
display: inline-block;
position: relative;
color: rgba(255, 255, 255, 0.4) !important;
opacity: 1;
font-size: 0.88rem;
font-weight: 500;
}
footer ul li a:hover { color: #C8A96E !important; padding-left: 6px; }
footer ul li a i { margin-right: 10px; color: #C8A96E; }
footer hr { opacity: 0.06; border-color: #fff; }
footer #copy {
text-align: right;
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.2);
}
@media (max-width: 767px) { footer #copy { text-align: left; margin: 5px 0 20px 0; } }
#newsletter .form-group { position: relative; }
#newsletter h6 { color: #fff; margin: 15px 0; }
#newsletter input[type='email'] {
border: 0;
height: 40px;
border-radius: 0;
padding-left: 15px;
font-size: 0.875rem;
background-color: rgba(255, 255, 255, 0.05);
color: #fff;
}
#newsletter input[type='email']:focus { border: 0; box-shadow: none; }
#newsletter input[type='submit'] {
position: absolute;
right: 0;
color: #1A1208;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
top: 0;
border: 0;
padding: 0 12px;
height: 40px;
cursor: pointer;
border-radius: 0 2px 2px 0;
background-color: #C8A96E;
transition: all 0.3s ease-in-out;
outline: none;
}
#newsletter input[type='submit']:hover { background-color: #FAF6EF; color: #1A1208; }
.follow_us { margin-top: 15px; }
.follow_us h5 { color: #fff; }
.follow_us ul li { display: inline-block; margin-right: 10px; font-size: 1.25rem; }
.follow_us ul li:first-child {
color: rgba(255, 255, 255, 0.3);
text-transform: uppercase;
font-weight: 400;
letter-spacing: 2px;
font-size: 0.75rem;
}
.follow_us ul li a { color: rgba(255, 255, 255, 0.4); }
.follow_us ul li a:hover { opacity: 1; color: #C8A96E !important; }
ul#footer-selector { margin: 0; padding: 0; list-style: none; }
ul#footer-selector li { float: left; margin-right: 10px; }
@media (max-width: 575px) { ul#footer-selector li:last-child { margin-top: 5px; } }
ul#additional_links {
margin: 0;
padding: 8px 0 0 0;
color: rgba(255, 255, 255, 0.25);
font-size: 0.75rem;
float: right;
}
@media (max-width: 991px) { ul#additional_links { float: none; margin-top: 10px; } }
ul#additional_links li { display: inline-block; margin-right: 15px; }
ul#additional_links li:first-child { margin-right: 20px; }
ul#additional_links li:last-child:after { content: ""; }
ul#additional_links li span { color: rgba(255, 255, 255, 0.25); }
ul#additional_links li a { color: rgba(255, 255, 255, 0.25); transition: all 0.3s ease-in-out; }
ul#additional_links li a:hover { color: #C8A96E !important; opacity: 1; }
ul#additional_links li:after { content: "|"; font-weight: 500; position: relative; left: 10px; }
.styled-select {
width: 100%;
overflow: hidden;
height: 30px;
line-height: 30px;
border: none;
background-color: rgba(255, 255, 255, 0.05);
border-radius: 2px;
padding-right: 35px;
position: relative;
}
.styled-select#lang-selector:after { font-family: 'ElegantIcons'; content: "\e0e2"; color: rgba(255,255,255,0.5); position: absolute; right: 10px; top: 0; }
.styled-select#currency-selector:after { font-family: 'ElegantIcons'; content: "\33"; color: rgba(255,255,255,0.5); position: absolute; right: 10px; top: 0; }
.styled-select select {
background: transparent;
width: 110%;
padding-left: 10px;
border: 0;
border-radius: 0;
box-shadow: none;
height: 30px;
color: rgba(255,255,255,0.5);
font-size: 0.75rem;
margin: 0;
font-weight: 400;
-moz-appearance: window;
-webkit-appearance: none;
cursor: pointer;
outline: none;
}
.styled-select select:focus { color: #fff; outline: none; box-shadow: none; }
.styled-select select::-ms-expand { display: none; }
.wow { visibility: hidden; }
/*============================================================================================*/
/* 2. CONTENT */
/*============================================================================================*/
/*-------- 2.1 Home --------*/
.flex-container a:hover,
.flex-slider a:hover { outline: none; }
.slides, .slides > li, .flex-control-nav, .flex-direction-nav { margin: 0; padding: 0; list-style: none; }
.flex-pauseplay span { text-transform: capitalize; }
.flexslider { margin: 0; padding: 0; }
.flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; }
.flexslider .slides img { width: 100%; display: block; }
.flexslider .slides:after { content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
html[xmlns] .flexslider .slides { display: block; }
* html .flexslider .slides { height: 1%; }
.no-js .flexslider .slides > li:first-child { display: block; }
.flexslider { margin: 0; background: #FAF6EF; position: relative; zoom: 1; }
.flexslider .slides { zoom: 1; }
.flexslider .slides img { height: auto; -moz-user-select: none; }
.flex-viewport { max-height: 2000px; transition: all 1s ease; }
.loading .flex-viewport { max-height: 300px; }
.carousel li { margin-right: 5px; }
.flex-direction-nav { position: absolute; bottom: 50px; height: 30px; line-height: 1; right: 0; bottom: 0; width: 100%; z-index: 9999; }
.flex-direction-nav a {
text-decoration: none;
display: block !important;
width: 45px; height: 52px;
position: absolute;
top: -65px;
z-index: 10;
overflow: hidden;
opacity: 0;
cursor: pointer;
color: rgba(255, 255, 255, 0.8);
transition: all 0.3s ease-in-out;
}
.flex-direction-nav a:before { font-family: "ElegantIcons"; font-size: 46px; display: inline-block; content: '\34'; color: white; }
.flex-direction-nav a.flex-next:before { content: '\35'; }
.flex-direction-nav .flex-next { text-align: right; }
#carousel_slider .flex-direction-nav .flex-prev { opacity: 0.8; left: 15px; }
#carousel_slider .flex-direction-nav .flex-prev:hover { opacity: 1; }
#carousel_slider .flex-direction-nav .flex-next { opacity: 0.8; right: 15px; }
#carousel_slider .flex-direction-nav .flex-next:hover { opacity: 1; }
#carousel_slider .flex-direction-nav .flex-disabled { opacity: 0 !important; cursor: default; z-index: -1; }
.flex-control-nav { width: 100%; position: absolute; bottom: -40px; text-align: center; }
.flex-control-nav li { margin: 0 6px; display: inline-block; zoom: 1; }
#slider.flexslider li { position: relative; }
#slider.flexslider li .meta {
position: absolute;
bottom: 35%; left: 60px;
color: #fff;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
font-weight: 400;
z-index: 99;
padding-right: 45px;
}
@media (max-width: 767px) { #slider.flexslider li .meta { left: 45px; bottom: auto; top: 50%; } }
#slider.flexslider li h3 { font-size: 2.25rem; color: #fff; font-weight: 500; letter-spacing: 2px; }
@media (max-width: 767px) { #slider.flexslider li h3 { font-size: 1.5rem; } }
#slider.flexslider li .info { display: flex; flex-direction: row; }
#slider.flexslider li .info p { margin-bottom: 15px; font-size: 1rem; }
@media (max-width: 767px) { #slider.flexslider li .info p { font-size: 0.875rem; } }
#slider.flexslider li h3,
#slider.flexslider li .info p {
animation-duration: .6s;
animation-fill-mode: both;
animation-name: fadeOut;
}
#slider.flexslider li .meta a {
animation-duration: .3s;
animation-fill-mode: both;
animation-name: zoomOut;
padding: 12px 20px;
}
#slider.flexslider li.flex-active-slide .meta h3,
#slider.flexslider li.flex-active-slide .meta .info p {
animation-delay: .4s;
animation-duration: .6s;
animation-fill-mode: both;
animation-name: fadeInUp;
}
#slider.flexslider li.flex-active-slide .meta a {
animation-delay: 1s;
animation-duration: .3s;
animation-fill-mode: both;
animation-name: zoomIn;
}
#slider.flexslider li.flex-active-slide .meta .info p { animation-delay: .6s; }
.slider { position: relative; }
#slider.flexslider { overflow: hidden; }
#slider.flexslider .flex-direction-nav { opacity: 0; display: none; }
#slider.flexslider ul.slides li { height: 650px; background-color: #1A1208; }
@media (max-width: 1199px) { #slider.flexslider ul.slides li { height: 650px !important; } }
@media (max-width: 767px) { #slider.flexslider ul.slides li { height: 500px !important; } }
#slider.flexslider ul.slides li img {
opacity: 0.5;
width: 100%; height: auto;
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
}
@media (max-width: 1199px) { #slider.flexslider ul.slides li img { height: 650px !important; width: auto; } }
@media (max-width: 767px) { #slider.flexslider ul.slides li img { height: 500px !important; width: auto; } }
#icon_drag_mobile {
position: absolute;
right: 20px; bottom: 20px;
background: url(../img/drag_icon.svg) 0 0 no-repeat;
width: 50px; height: 30px;
opacity: 0.6;
z-index: 99;
display: none;
}
@media (max-width: 767px) { #icon_drag_mobile { display: block; } }
#carousel_slider_wp {
background: linear-gradient(to bottom, transparent, #1A1208);
position: absolute;
bottom: 0;
z-index: 9;
width: 100%;
padding: 0 60px 45px 60px;
}
@media (max-width: 767px) { #carousel_slider_wp { display: none; } }
#carousel_slider.flexslider { overflow: hidden; background-color: transparent; }
#carousel_slider.flexslider ul.slides { padding-top: 20px; }
#carousel_slider.flexslider ul.slides li {
position: relative;
border-radius: 2px;
background-color: #1A1208;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.5);
overflow: hidden;
cursor: pointer;
}
#carousel_slider.flexslider ul.slides li:hover img { transform: scale(1.2); }
#carousel_slider.flexslider ul.slides li img {
transform: scale(1);
opacity: 0.4;
transition: all 0.3s ease-in-out;
}
#carousel_slider.flexslider ul.slides li .caption { position: absolute; left: 0; top: 0; z-index: 9; width: 100%; height: 100%; padding: 20px; color: #fff; }
#carousel_slider.flexslider ul.slides li .caption h3 { font-size: 1.3125rem; color: #fff; font-weight: 400; }
#carousel_slider.flexslider ul.slides li .caption h3 span { margin: 3px 0 0 0; display: block; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 2px; }
#carousel_slider.flexslider ul.slides li .caption small {
opacity: 0;
transition: all 0.3s cubic-bezier(0.77, 0, 0.175, 1);
position: absolute;
bottom: 10px; left: 20px;
display: block;
width: 100%;
font-weight: 400;
font-size: 0.875rem;
transform: translate(0, 10px);
}
#carousel_slider.flexslider ul.slides li .caption small strong { float: right; display: inline-block; text-align: right; margin: 0 40px 0 0; padding: 3px 0 0 0; }
#carousel_slider.flexslider ul.slides li .caption small strong h6 { color: #fff; margin: 0; font-weight: 400; font-size: 0.875rem; }
#carousel_slider.flexslider ul.slides li:hover .caption small { opacity: 1; transform: translate(0, 0); }
.header-video { position: relative; overflow: hidden; background: #1A1208; height: 600px !important; }
@media (max-width: 991px) { .header-video { height: 620px !important; } }
.header-video video { width: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0.8; }
.header-video iframe { height: 100%; width: 100%; }
.owl-theme .owl-dots { margin-top: 10px !important; margin-bottom: 25px; }
.owl-theme .owl-dots .owl-dot { outline: none; }
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span { background: #C8A96E !important; }
.owl-theme .owl-dots .owl-dot span { width: 8px !important; height: 8px !important; }
a.box_news {
position: relative;
display: block;
padding-left: 230px;
color: rgba(26, 18, 8, 0.65);
margin-bottom: 30px;
min-height: 150px;
transition: all 0.35s ease;
}
@media (max-width: 767px) { a.box_news { min-height: inherit; padding-left: 0; } }
a.box_news figure { width: 200px; height: 150px; overflow: hidden; position: absolute; left: 0; top: 0; }
@media (max-width: 767px) { a.box_news figure { position: relative; width: auto; } }
a.box_news figure img {
width: 250px; height: auto;
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%) scale(1.05);
transition: all 0.35s ease;
backface-visibility: hidden;
}
@media (max-width: 767px) { a.box_news figure img { width: 100%; max-width: 100%; height: auto; } }
a.box_news figure figcaption {
background-color: #C8A96E;
text-align: center;
position: absolute;
right: 0; top: 0;
display: inline-block;
color: #1A1208;
width: 60px; height: 60px;
padding: 15px;
line-height: 1;
}
a.box_news figure figcaption strong { display: block; font-size: 1.3125rem; font-weight: 600; color: #1A1208; }
a.box_news h4 { font-size: 1.125rem; margin-bottom: 10px; color: #1A1208; }
@media (max-width: 767px) { a.box_news h4 { margin-bottom: 5px; } }
a.box_news:hover { transform: translateY(-3px); }
a.box_news:hover img { transform: translate(-50%, -50%) scale(1); }
a.box_news:hover h4 { color: #1B6B7A; }
a.box_news ul { margin: 0; padding: 10px 0 0 0; }
@media (max-width: 767px) { a.box_news ul { padding: 0; } }
a.box_news ul li {
display: inline-block;
font-weight: 500;
text-transform: uppercase;
color: rgba(200, 169, 110, 0.7);
font-size: 0.7rem;
letter-spacing: 1.5px;
margin-right: 5px;
}
a.box_news ul li:last-child { margin-right: 0; }
a.box_news ul li:last-child:after { content: ''; margin: 0; }
a.box_news ul li:after { content: '·'; margin: 0 0 0 10px; }
/*-------- 2.2 About --------*/
a.box_feat {
text-align: center;
background: #fff;
padding: 40px 30px 30px 30px;
display: block;
transition: all 500ms ease-in-out;
box-shadow: none;
border: 0.5px solid rgba(200, 169, 110, 0.15);
color: rgba(26, 18, 8, 0.65);
margin-bottom: 30px;
border-radius: 2px;
overflow: hidden;
}
@media (max-width: 767px) { a.box_feat { padding: 20px 20px 0 20px; } }
a.box_feat:hover {
transform: translateY(-8px);
border-color: rgba(27, 107, 122, 0.25);
box-shadow: 0 16px 50px rgba(27, 107, 122, 0.07);
}
a.box_feat i { font-size: 3rem; color: #1B6B7A; margin-bottom: 10px; }
a.box_feat h3 { font-size: 1.125rem; color: #1A1208; }
/*-------- 2.3 Listing --------*/
.filters_listing {
padding: 10px 0 5px 0;
background: rgba(250, 246, 239, 0.97);
border-bottom: 0.5px solid rgba(200, 169, 110, 0.2);
z-index: 999999 !important;
position: relative;
}
.filters_listing ul { margin: 0 15px; }
@media (max-width: 991px) { .filters_listing ul { margin: 0; } }
.filters_listing ul li { margin-right: 10px; }
.filters_listing ul li:first-child { float: left; }
.filters_listing ul li:nth-child(2) { float: right; margin-right: 0; }
.filters_listing ul li:nth-child(3) { float: right; }
.score strong {
background-color: #1B6B7A;
color: #fff;
line-height: 1;
border-radius: 5px 5px 5px 0;
padding: 10px;
display: inline-block;
}
.score span {
display: inline-block;
position: relative;
top: 7px;
margin-right: 8px;
font-size: 0.75rem;
text-align: right;
line-height: 1.1;
font-weight: 500;
}
.score span em { display: block; font-weight: normal; font-size: 0.6875rem; }
.wrapper-grid { padding: 0 20px; }
.box_grid {
background-color: #fff;
display: block;
position: relative;
margin-bottom: 30px;
box-shadow: 0 2px 20px rgba(58, 46, 30, 0.06);
border: 0.5px solid rgba(200, 169, 110, 0.1);
border-radius: 2px;
overflow: hidden;
transition: all 0.35s ease;
}
.box_grid:hover { box-shadow: 0 12px 40px rgba(27, 107, 122, 0.1); transform: translateY(-4px); }
.box_grid .price { display: inline-block; font-weight: 500; color: rgba(26, 18, 8, 0.5); }
.box_grid .price strong { color: #1B6B7A; }
.box_grid a.wish_bt {
position: absolute; right: 15px; top: 15px; z-index: 1;
background-color: rgba(26, 18, 8, 0.5);
padding: 9px 10px; display: inline-block;
color: #fff; line-height: 1; border-radius: 2px;
}
.box_grid a.wish_bt:after { font-family: 'ElegantIcons'; content: "\e030"; transition: all 0.5s ease; }
.box_grid a.wish_bt.liked:after { content: "\e089"; color: #C8A96E; }
.box_grid a.wish_bt:hover.liked:after { color: #C8A96E; }
.box_grid a.wish_bt:hover:after { content: "\e089"; color: #fff; }
.box_grid figure { margin-bottom: 0; overflow: hidden; position: relative; height: 210px; }
.box_grid figure small {
position: absolute;
background-color: rgba(26, 18, 8, 0.6);
left: 20px; top: 22px;
text-transform: uppercase;
color: rgba(232, 213, 176, 0.8);
font-weight: 500;
letter-spacing: 1.5px;
font-size: 0.65rem;
border-radius: 1px;
padding: 7px 10px 4px 10px;
line-height: 1;
}
.box_grid figure .read_more {
position: absolute; top: 50%; left: 0;
margin-top: -12px;
transform: translateY(10px);
text-align: center; opacity: 0; visibility: hidden;
width: 100%; transition: all 0.6s; z-index: 2;
}
.box_grid figure .read_more span {
background-color: rgba(250, 246, 239, 0.85);
border-radius: 20px;
display: inline-block;
color: #1A1208;
font-size: 0.75rem;
padding: 5px 10px;
}
.box_grid figure:hover .read_more { opacity: 1; visibility: visible; transform: translateY(0); }
.box_grid figure a img {
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%) scale(1.05);
backface-visibility: hidden;
width: 100%;
transition: all 0.4s ease;
}
.box_grid figure a:hover img { transform: translate(-50%, -50%) scale(1); }
.box_grid .wrapper { padding: 25px; }
.box_grid .wrapper h3 { font-size: 1.25rem; margin-top: 0; }
.box_grid ul { padding: 20px 15px; border-top: 0.5px solid rgba(200, 169, 110, 0.15); }
.box_grid ul li { display: inline-block; margin-right: 15px; }
.box_grid ul li .score { margin-top: -10px; }
.box_grid ul li:last-child { margin-right: 0; float: right; }
.cat_star i { margin-right: 2px; color: #C8A96E; }
.rating { color: rgba(200, 169, 110, 0.3); }
.rating .voted { color: #C8A96E; }
.rating i { margin-right: 2px; }
.box_list {
background-color: #fff;
display: block;
position: relative;
margin: 0 15px 30px 15px;
min-height: 310px;
box-shadow: 0 2px 20px rgba(58, 46, 30, 0.06);
border: 0.5px solid rgba(200, 169, 110, 0.1);
border-radius: 2px;
overflow: hidden;
transition: all 0.35s ease;
}
.box_list:hover { box-shadow: 0 12px 40px rgba(27, 107, 122, 0.1); transform: translateY(-3px); }
.box_list a.wish_bt {
position: absolute; right: 15px; top: 15px; z-index: 1;
background-color: rgba(26, 18, 8, 0.08);
padding: 9px 10px; display: inline-block;
color: rgba(26, 18, 8, 0.5); line-height: 1; border-radius: 2px;
}
.box_list a.wish_bt:after { font-family: 'ElegantIcons'; content: "\e030"; transition: all 0.5s ease; }
.box_list a.wish_bt.liked:after { content: "\e089"; color: #C8A96E; }
.box_list a.wish_bt:hover.liked:after { color: #C8A96E; }
.box_list a.wish_bt:hover:after { content: "\e089"; color: rgba(26, 18, 8, 0.5); }
.box_list figure { margin-bottom: 0; overflow: hidden; position: relative; min-height: 310px; }
@media (max-width: 991px) { .box_list figure { min-height: 220px; max-height: 220px; height: 220px; } }
.box_list figure small {
position: absolute; background-color: rgba(26, 18, 8, 0.6);
right: 20px; top: 20px;
text-transform: uppercase; color: rgba(232, 213, 176, 0.8);
font-weight: 500; letter-spacing: 1.5px; font-size: 0.65rem;
border-radius: 1px; padding: 7px 10px 4px 10px; line-height: 1; z-index: 99;
}
.box_list figure .read_more {
position: absolute; top: 50%; left: 0; margin-top: -12px;
transform: translateY(10px); text-align: center; opacity: 0;
visibility: hidden; width: 100%; transition: all 0.6s; z-index: 2;
}
.box_list figure .read_more span {
background-color: rgba(250, 246, 239, 0.85); border-radius: 20px;
display: inline-block; color: #1A1208; font-size: 0.75rem; padding: 5px 10px;
}
.box_list figure:hover .read_more { opacity: 1; visibility: visible; transform: translateY(0); }
.box_list figure a img {
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%) scale(1.05);
backface-visibility: hidden; width: 100%;
transition: all 0.4s ease; height: 360px; width: auto; max-width: none;
}
@media (max-width: 991px) { .box_list figure a img { max-width: inherit; height: 460px; width: auto; } }
@media (max-width: 767px) { .box_list figure a img { height: 350px; } }
.box_list figure a:hover img { transform: translate(-50%, -50%) scale(1); }
.box_list .wrapper { padding: 30px; min-height: 245px; position: relative; }
@media (max-width: 991px) { .box_list .wrapper { min-height: inherit; } }
.box_list .wrapper h3 { font-size: 1.25rem; margin-top: 0; }
.box_list .wrapper .price { display: inline-block; font-weight: 500; color: rgba(26, 18, 8, 0.5); }
.box_list .wrapper .price strong { color: #1B6B7A; }
.box_list small { text-transform: uppercase; color: rgba(26, 18, 8, 0.4); font-weight: 500; letter-spacing: 1.5px; font-size: 0.7rem; }
.box_list ul { padding: 20px 15px 20px 30px; border-top: 0.5px solid rgba(200, 169, 110, 0.15); margin-bottom: 0; }
.box_list ul li { display: inline-block; margin-right: 15px; }
.box_list ul li .score { margin-top: -10px; }
.box_list ul li:last-child { margin-right: 0; float: right; }
.layout_view { border-radius: 2px; border: 0.5px solid rgba(200, 169, 110, 0.2); padding: 4px 8px 3px 8px; }
.layout_view a { color: rgba(26, 18, 8, 0.4); }
.layout_view a.active { color: rgba(26, 18, 8, 0.8); }
.layout_view a:hover { color: #1B6B7A; }
.switch-field {
overflow: hidden;
border: 0.5px solid rgba(200, 169, 110, 0.2);
border-radius: 2px;
}
.switch-field input { position: absolute !important; clip: rect(0, 0, 0, 0); height: 1px; width: 1px; border: 0; overflow: hidden; }
.switch-field input:checked + label { box-shadow: none; color: rgba(26, 18, 8, 0.9); }
.switch-field label {
float: left; display: inline-block; min-width: 70px;
color: rgba(26, 18, 8, 0.4); font-weight: 500; font-size: 0.75rem;
text-align: center; text-shadow: none; padding: 10px 12px 8px 12px; line-height: 1;
border-right: 0.5px solid rgba(200, 169, 110, 0.2);
transition: all 0.2s ease-in-out; margin: 0;
}
@media (max-width: 575px) { .switch-field label { min-width: inherit; } }
.switch-field label:first-of-type { border-left: 0; }
.switch-field label:last-of-type { border-right: 0; }
.switch-field label:hover { cursor: pointer; color: #1B6B7A; }
#filters_col {
background-color: #fff;
padding: 20px;
margin-bottom: 25px;
border: 0.5px solid rgba(200, 169, 110, 0.15);
border-radius: 2px;
}
#filters_col label { color: #3A2E1E; font-weight: normal; font-size: 0.8125rem; }
a#filters_col_bt { display: block; color: #1A1208; position: relative; font-size: 1rem; font-weight: 600; }
a#filters_col_bt:before { font-family: "ElegantIcons"; content: "\66"; font-size: 1.625rem; position: absolute; right: 0; top: 0; line-height: 1; font-weight: normal; }
.filter_type h6 { border-top: 0.5px solid rgba(200, 169, 110, 0.15); margin: 15px 0; padding: 15px 0 0 0; font-size: 0.8125rem; }
.filter_type ul { list-style: none; padding: 0; margin: 0 0 15px 0; }
.filter_type ul li { margin-bottom: 5px; }
.filter_type ul li:last-child { margin-bottom: 0; }
/*-------- 2.4 Detail page --------*/
.secondary_nav {
background: rgba(250, 246, 239, 0.97);
border-bottom: 0.5px solid rgba(200, 169, 110, 0.2);
padding: 15px 0;
backdrop-filter: blur(8px);
}
.secondary_nav.is_stuck { z-index: 99; width: 100% !important; left: 0; }
.secondary_nav ul { margin-bottom: 0; }
.secondary_nav ul li { display: inline-block; margin-right: 20px; font-weight: 400; font-size: 0.8rem; letter-spacing: 1.5px; text-transform: uppercase; }
.secondary_nav ul li a { color: rgba(26, 18, 8, 0.4); }
.secondary_nav ul li a:hover { color: #1B6B7A; }
.secondary_nav ul li a.active { color: rgba(26, 18, 8, 0.85); }
.secondary_nav ul li:last-child { display: none; }
.secondary_nav ul li:last-child a { background-color: #C8A96E; color: #1A1208; border-radius: 2px; padding: 5px 15px; }
.secondary_nav ul li:last-child a:hover { background-color: #1B6B7A; color: #fff; }
@media (max-width: 575px) { .secondary_nav ul li:last-child { display: inline-block; float: right; margin-right: 0; } }
.intro_title h2 { display: inline-block; }
.intro_title ul { float: right; margin: 10px 0 0 0; }
.intro_title ul li { display: inline-block; margin-right: 20px; font-weight: 400; }
section#description, section#reviews { border-bottom: 2px solid rgba(200, 169, 110, 0.15); margin-bottom: 45px; }
section#description h2, section#reviews h2 { font-size: 1.5rem; }
section#description h3, section#reviews h3 { font-size: 1.3125rem; }
section#description h4, section#reviews h4 { font-size: 1.125rem; }
section#reviews { border-bottom: none; }
#review_summary {
text-align: center;
background-color: #1B6B7A;
color: #fff;
padding: 20px 10px;
border-radius: 5px 5px 5px 0;
}
@media (max-width: 991px) { #review_summary { margin-bottom: 15px; } }
#review_summary strong { font-size: 2.625rem; display: block; line-height: 1; }
#review_summary em { font-style: normal; font-weight: 400; display: block; }
.reviews-container .progress { margin-bottom: 12px; }
.reviews-container .progress-bar { background-color: #1B6B7A; }
.reviews-container .review-box { position: relative; margin-bottom: 25px; padding-left: 100px; min-height: 100px; }
@media (max-width: 767px) { .reviews-container .review-box { padding-left: 0; } }
.reviews-container .rev-thumb { position: absolute; left: 0; top: 0; width: 80px; height: 80px; background: #fff; border-radius: 5px; overflow: hidden; }
.reviews-container .rev-thumb img { width: 80px; height: auto; }
@media (max-width: 767px) { .reviews-container .rev-thumb { position: static; margin-bottom: 10px; } }
.reviews-container .rev-content { position: relative; padding: 25px 25px 0 25px; border: 0.5px solid rgba(200, 169, 110, 0.15); border-radius: 5px; }
.reviews-container .rev-info { font-size: 0.75rem; font-style: italic; color: rgba(26, 18, 8, 0.5); margin-bottom: 10px; }
.box_detail {
padding: 25px;
border: 0.5px solid rgba(200, 169, 110, 0.2);
background-color: #FAF6EF;
border-radius: 5px;
margin-bottom: 30px;
}
.box_detail .price { line-height: 1; border-bottom: 0.5px solid rgba(200, 169, 110, 0.2); margin: 0 -25px 25px -25px; padding: 0 25px 15px 25px; }
.box_detail .price > span { font-size: 1.9375rem; font-weight: 600; }
.box_detail .price > span > small { font-size: 0.6875rem; font-weight: 400; }
.box_detail .price .score { float: right; margin-top: -5px; }
.box_detail h3 { font-size: 1.25rem; margin: 25px 0 10px 0; }
.box_detail ul { margin-bottom: 0; }
.box_detail ul li { margin-bottom: 5px; }
.box_detail ul li i { margin-right: 8px; }
/*-------- 2.5 Login/register --------*/
#login_bg, #register_bg {
background: url(../img/hero_in_bg_3.jpg) center center no-repeat fixed;
background-size: cover;
min-height: 100vh; width: 100%;
}
#register_bg { background: url(../img/hero_in_bg_2.jpg) center center no-repeat fixed; background-size: cover; }
#login figure, #register figure { text-align: center; border-bottom: 0.5px solid rgba(200, 169, 110, 0.2); margin: -45px -60px 25px -60px; padding: 20px 60px 25px 60px; }
@media (max-width: 767px) { #login figure, #register figure { margin: -30px -30px 20px -30px; padding: 15px 60px 20px 60px; } }
#login aside, #register aside { width: 430px; padding: 45px 60px 60px 60px; position: absolute; left: 0; top: 0; overflow-y: auto; background-color: rgba(250, 246, 239, 0.98); min-height: 100vh; }
@media (max-width: 767px) { #login aside, #register aside { width: 100%; padding: 30px; } }
#login aside form, #register aside form { margin-bottom: 60px; display: block; }
#login aside form .form-group input, #register aside form .form-group input { padding-left: 40px; }
#login aside form .form-group i, #register aside form .form-group i { font-size: 1.3125rem; position: absolute; left: 12px; top: 34px; color: rgba(200, 169, 110, 0.5); width: 25px; height: 25px; display: block; font-weight: 400 !important; }
#login aside .copy, #register aside .copy { text-align: center; position: absolute; height: 30px; left: 0; bottom: 30px; width: 100%; color: rgba(26, 18, 8, 0.4); font-weight: 400; }
.divider { text-align: center; height: 1px; margin: 30px 0 15px 0; background-color: rgba(200, 169, 110, 0.2); }
.divider span { position: relative; top: -20px; background-color: rgba(250, 246, 239, 0.98); display: inline-block; padding: 10px; font-style: italic; color: rgba(26, 18, 8, 0.4); }
a.social_bt { border-radius: 2px; text-align: center; color: #fff; min-width: 200px; margin-bottom: 10px; display: block; padding: 12px; line-height: 1; position: relative; transition: all 0.3s ease-in-out; cursor: pointer; }
a.social_bt:hover { filter: brightness(115%); }
a.social_bt.facebook { background-color: #3B5998; }
a.social_bt.facebook:before { font-family: 'ElegantIcons'; content: "\e093"; position: absolute; left: 12px; top: 10px; font-size: 1rem; color: #fff; }
a.social_bt.google { background-color: #DC4E41; }
a.social_bt.google:before { font-family: 'ElegantIcons'; content: "\e096"; position: absolute; left: 12px; top: 12px; font-size: 1rem; color: #fff; }
.container_check {
display: block; position: relative; padding-left: 30px; line-height: 1.8; margin-bottom: 5px; cursor: pointer;
-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.container_check input { position: absolute; opacity: 0; cursor: pointer; }
.container_check input:checked ~ .checkmark { background-color: #1B6B7A; border: 1px solid transparent; }
.container_check .checkmark { position: absolute; top: 0; left: 0; height: 20px; width: 20px; border: 0.5px solid rgba(200, 169, 110, 0.3); background-color: #fff; border-radius: 2px; transition: all 0.3s ease-in-out; }
.container_check .checkmark:after { content: ""; position: absolute; display: none; left: 7px; top: 3px; width: 5px; height: 10px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.container_check input:checked ~ .checkmark:after { display: block; }
/*-------- 2.6 Map styles --------*/
.map { width: 100%; height: 500px; }
.map.map_single { height: 400px; }
.infoBox { animation: fadeIn 0.9s; padding-right: 50px; }
.infoBox > img { position: absolute !important; right: 60px !important; top: 10px !important; z-index: 9999; width: 20px; height: 20px; display: block; cursor: pointer; }
.marker_info {
width: 240px; height: 270px;
border-radius: 5px; text-align: left;
background: white; position: relative; z-index: 999;
font-family: 'Jost', sans-serif;
box-shadow: 0 4px 30px rgba(58, 46, 30, 0.12);
}
.marker_info img { display: block; border-radius: 5px 5px 0 0; }
.marker_info h3 { font-size: 1rem; line-height: 1.1; font-weight: 400; margin-bottom: 3px; color: #3A2E1E; }
.marker_info em { display: inline-block; font-size: 0.75rem; color: rgba(26, 18, 8, 0.4); }
.marker_info span { display: block; padding: 20px 20px 0 20px; font-size: 0.8125rem; line-height: 1.2; color: #fff; position: relative; }
.marker_info:after { right: 100%; top: 56%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-right-color: white; border-width: 12px; margin-top: -12px; }
span.infobox_rate { display: inline-block; margin: -44px 0 0 -20px; float: left; background-color: #1B6B7A; padding: 5px 8px; font-weight: 500; text-align: left; font-size: 0.75rem; }
.cluster-visible { text-align: center; font-size: 15px !important; color: #fff !important; font-weight: 500; border-radius: 50%; width: 36px !important; height: 36px !important; line-height: 36px !important; background-color: #1B6B7A; }
.cluster-visible:before { border: 7px solid #1B6B7A; opacity: 0.2; box-shadow: inset 0 0 0 4px #1B6B7A; content: ''; position: absolute; border-radius: 50%; top: 0; left: 0; width: 100%; height: 100%; animation: cluster-animation 2.5s infinite; }
/*-------- 2.7 Contacts --------*/
.map_contact { width: 100%; height: 465px; }
@media (max-width: 991px) { .map_contact { height: 350px; margin-bottom: 45px; } }
.contact_info { background-color: #1A1208; color: #fff; padding: 30px 0; text-align: center; }
.contact_info ul { margin: 0; padding: 0; }
.contact_info ul li { float: left; width: 33.33%; position: relative; padding: 0 20px; }
.contact_info ul li span { opacity: 0.5; }
.contact_info ul li h4 { color: #C8A96E; font-size: 1.125rem; }
.contact_info ul li i { color: #C8A96E; font-size: 2.875rem; margin-bottom: 10px; }
@media (max-width: 767px) { .contact_info ul li { width: 100%; float: none; margin-bottom: 35px; padding: 0; } .contact_info ul li:last-child { margin-bottom: 5px; } }
.error_message { font-weight: 500; color: #B85000; }
/*-------- 2.8 404 page --------*/
#error_page {
width: 100%; height: 650px;
display: flex; flex-direction: column; justify-content: center;
background: #1B6B7A url(../img/pattern_1.svg) center bottom repeat-x;
color: #fff;
}
@media (max-width: 767px) { #error_page { background-size: auto 300px; } }
#error_page h2 { margin-top: 30px; font-size: 8.75rem; color: #fff; text-transform: uppercase; font-weight: 400; line-height: 1; }
#error_page h2 i { color: #C8A96E; }
@media (max-width: 767px) { #error_page h2 { font-size: 4.5rem; } }
#error_page p { font-size: 1.3125rem; }
@media (max-width: 767px) { #error_page { padding: 0; height: 500px; } }
.search_bar_error { position: relative; margin-bottom: 60px; }
.search_bar_error input[type='text'] { border: 0; height: 50px; border-radius: 2px; padding-left: 15px; box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.15); }
.search_bar_error input[type='submit'] { position: absolute; right: -1px; color: #1A1208; font-weight: 600; top: 0; border: 0; padding: 0 25px; height: 50px; cursor: pointer; border-radius: 0 2px 2px 0; background-color: #C8A96E; transition: all 0.3s ease-in-out; }
.search_bar_error input[type='submit']:hover { background-color: #FAF6EF; }
/*============================================================================================*/
/* 3. COMMON */
/*============================================================================================*/
/*-------- 3.1 Misc --------*/
@media (min-width: 1400px) {
.container-custom { max-width: 1600px; padding-left: 60px; padding-right: 60px; }
}
.opacity-mask { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2; }
.form-control {
padding: 10px;
height: 42px;
font-size: 0.875rem;
border-radius: 2px;
border: 0.5px solid rgba(200, 169, 110, 0.25);
color: #3A2E1E;
background: #fff;
font-family: 'Jost', sans-serif;
}
.form-control:focus { border-color: #1B6B7A; box-shadow: 0 0 0 3px rgba(27, 107, 122, 0.08); outline: none; }
.form-control:disabled, .form-control[readonly] { background-color: rgba(250, 246, 239, 0.7); opacity: 1; }
.form-group { position: relative; margin-bottom: 1rem; }
.bg_color_1 { background-color: #FAF6EF; }
.call_section {
background: url(../img/bg_call_section.jpg) center center no-repeat fixed;
background-size: cover;
min-height: 400px;
padding: 10% 0;
}
.custom-select-form .nice-select { border-radius: 2px; border: 0.5px solid rgba(200, 169, 110, 0.25); height: 45px; line-height: 42px; }
.custom-select-form .nice-select:hover { border-color: rgba(200, 169, 110, 0.4); }
.custom-select-form .nice-select:active, .custom-select-form .nice-select.open, .custom-select-form .nice-select:focus { border-color: #1B6B7A; outline: 0; box-shadow: 0 0 0 3px rgba(27, 107, 122, 0.08); }
.custom-select-form select { display: none; }
/* Jquery select */
.nice-select {
-webkit-tap-highlight-color: transparent;
background-color: #fff;
border-radius: 2px;
border: none;
box-sizing: border-box;
clear: both; cursor: pointer; display: block; float: left;
font-family: 'Jost', sans-serif;
font-size: 14px; font-weight: normal;
height: 50px; line-height: 48px;
outline: none; padding-left: 15px; padding-right: 27px;
position: relative; text-align: left !important;
transition: all 0.2s ease-in-out;
user-select: none; white-space: nowrap; width: auto;
color: rgba(26, 18, 8, 0.65); padding-top: 2px;
}
.nice-select:hover { border-color: rgba(200, 169, 110, 0.3); }
.nice-select:active, .nice-select.open, .nice-select:focus { border-color: #1B6B7A; }
.nice-select:after { border-bottom: 1.5px solid rgba(200, 169, 110, 0.5); border-right: 1.5px solid rgba(200, 169, 110, 0.5); content: ''; display: block; height: 8px; margin-top: -5px; pointer-events: none; position: absolute; right: 20px; top: 50%; transform-origin: 66% 66%; transform: rotate(45deg); transition: all 0.15s ease-in-out; width: 8px; }
.nice-select.open:after { transform: rotate(-135deg); }
.nice-select.open .list { opacity: 1; pointer-events: auto; transform: scale(1) translateY(0); }
.nice-select.wide { width: 100%; }
.nice-select.wide .list { left: 0 !important; right: 0 !important; }
.nice-select .list {
background-color: rgba(250, 246, 239, 0.98);
border-radius: 2px;
box-shadow: 0 12px 40px rgba(58, 46, 30, 0.12);
box-sizing: border-box; margin-top: 4px; opacity: 0;
overflow: hidden; padding: 0; pointer-events: none;
position: absolute; top: 100%; left: 0;
transform-origin: 50% 0; transform: scale(0.75) translateY(-25px);
transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
z-index: 9; height: 18vh; overflow: auto;
border: 0.5px solid rgba(200, 169, 110, 0.15);
}
.nice-select .option { cursor: pointer; font-weight: 400; line-height: 38px; list-style: none; min-height: 38px; outline: none; padding-left: 15px; padding-right: 26px; text-align: left; transition: all 0.2s; }
.nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus { background-color: rgba(200, 169, 110, 0.06); color: #1B6B7A; }
.nice-select .option.selected { font-weight: 500; }
#toTop {
position: fixed; right: 25px; bottom: 25px; z-index: 9999;
width: 44px; height: 44px;
background-color: rgba(26, 18, 8, 0.5);
opacity: 1; border-radius: 50%;
text-align: center; font-size: 21px; color: #fff; cursor: pointer;
transition: all 0.3s ease;
}
#toTop:after { font-family: "fontello"; content: "\e899"; position: relative; display: block; top: 50%; transform: translateY(-55%); }
#toTop:hover { background-color: #1B6B7A; }
.modal-backdrop { position: static; background-color: transparent; }
.modal { z-index: 9999; background-color: rgba(26, 18, 8, 0.6); }
/*-------- 3.2 Accordion --------*/
.accordion_2 .card { border: 0; margin-bottom: 5px; box-shadow: 0 2px 20px rgba(58, 46, 30, 0.04); }
.accordion_2 .card .card-header { background-color: #fff; border-bottom: 0.5px solid rgba(200, 169, 110, 0.15); padding: 20px; }
.accordion_2 .card-body { padding-bottom: 0; }
.accordion_2 .card-header h5 { font-size: 1rem; }
.accordion_2 .card-header h5 a { border: 0; display: block; color: rgba(26, 18, 8, 0.4); }
.accordion_2 .card-header h5 a i.indicator { font-size: 1.125rem; font-weight: normal; float: right; color: #C8A96E; }
.card { border-radius: 0; border: 0; margin-bottom: 5px; }
/*-------- 3.3 List --------*/
ul.list_ok { list-style: none; margin: 25px 0 30px 0; padding: 0; }
ul.list_ok li { position: relative; padding-left: 45px; margin-bottom: 20px; }
ul.list_ok li:before { font-family: 'ElegantIcons'; content: "\52"; position: absolute; left: 0; top: -10px; font-size: 2rem; color: #1B6B7A; }
ul.bullets { line-height: 1.8; margin: 0; padding: 0; }
ul.bullets li { position: relative; padding-left: 20px; }
ul.bullets li:before { font-style: normal; font-weight: normal; font-family: 'ElegantIcons'; font-size: 0.875rem; content: "\5c"; color: rgba(200, 169, 110, 0.5); position: absolute; left: 0; top: 0; }
/*-------- 3.4 Spacing --------*/
.add_bottom_15 { margin-bottom: 15px; }
.add_bottom_30 { margin-bottom: 30px; }
.add_bottom_45 { margin-bottom: 45px; }
.add_bottom_60 { margin-bottom: 60px; }
.add_bottom_75 { margin-bottom: 75px; }
.add_top_10 { margin-top: 10px; }
.add_top_15 { margin-top: 15px; }
.add_top_20 { margin-top: 20px; }
.add_top_30 { margin-top: 30px; }
.add_top_60 { margin-top: 60px; }
.more_padding_left { padding-left: 40px; }
.nomargin_top { margin-top: 0; }
.nopadding { margin: 0 !important; padding: 0 !important; }
.nomargin { margin: 0 !important; }
.margin_60 { padding-top: 60px; padding-bottom: 60px; }
.margin_60_35 { padding-top: 60px; padding-bottom: 35px; }
@media (max-width: 575px) { .margin_60_35 { padding-top: 30px; padding-bottom: 5px; } }
.margin_80 { padding-top: 80px; padding-bottom: 80px; }
@media (max-width: 991px) { .margin_80 { padding-bottom: 60px; padding-top: 60px; } }
@media (max-width: 575px) { .margin_80 { padding-top: 30px; padding-bottom: 30px; } }
.margin_80_55 { padding-top: 80px; padding-bottom: 55px; }
@media (max-width: 991px) { .margin_80_55 { padding-top: 60px; padding-bottom: 35px; } }
@media (max-width: 575px) { .margin_80_55 { padding-top: 45px; padding-bottom: 15px; } }
.margin_80_0 { padding-top: 80px; }
@media (max-width: 991px) { .margin_80_0 { padding-top: 60px; } }
@media (max-width: 575px) { .margin_80_0 { padding-top: 45px; } }
.margin_60_0 { padding-top: 60px; }
.margin_30_95 { padding-top: 30px; padding-bottom: 95px; }
@media (max-width: 575px) { .margin_30_95 { padding-top: 5px; padding-bottom: 30px; } }
@media (max-width: 991px) { .hidden_tablet { display: none !important; } }
@media (max-width: 767px) { .hidden_mobile { display: none !important; } }
/*-------- 3.5 Block reveal --------*/
.animated .block-reveal { height: auto; overflow: hidden; position: relative; width: 100%; }
.block-horizzontal, .block-vertical { height: 100%; position: absolute; width: 100%; z-index: 10; }
.animated .block-horizzontal { animation: reveal_left_to_right 1s ease-in-out; animation-fill-mode: forwards; background: #1B6B7A; }
.animated .block-vertical { animation: reveal_top_to_bottom 1s ease-in-out; animation-fill-mode: forwards; background: #1B6B7A; }
.block-reveal img { transition: all 0.3s ease-in-out; opacity: 0; }
.animated .block-reveal img { animation: color 0.5s ease-in-out; animation-delay: 0.5s; animation-fill-mode: forwards; opacity: 0; backface-visibility: hidden; }
@keyframes reveal_left_to_right {
0% { transform: translateX(-100%); }
50% { transform: translateX(0); }
100% { transform: translateX(100%); }
}
@keyframes reveal_top_to_bottom {
0% { transform: translateY(-100%); }
50% { transform: translateY(0); }
100% { transform: translateY(100%); }
}
@keyframes color {
from { opacity: 0; }
to { opacity: 1; }
}
/*-------- 3.6 Cookie bar --------*/
#cookie-bar {
background: rgba(26, 18, 8, 0.92);
height: auto; line-height: 24px;
color: rgba(255, 255, 255, 0.75);
text-align: center; padding: 15px 0;
font-size: 0.8125rem; font-weight: 400;
backdrop-filter: blur(10px);
}
#cookie-bar p { margin: 0; padding: 0; }
#cookie-bar a { color: #fff; display: inline-block; border-radius: 2px; text-decoration: none; padding: 2px 10px; margin-left: 8px; }
#cookie-bar .cb-enable { background: #1B6B7A; }
#cookie-bar .cb-enable:hover { background: #C8A96E; color: #1A1208; }
#cookie-bar .cb-disable { background: #8B3A2A; }
#cookie-bar .cb-policy { background: #C8A96E; color: #1A1208; }
#cookie-bar .cb-policy:hover { background: #FAF6EF; color: #1B6B7A; }
#cookie-bar.fixed { position: fixed; top: 0; left: 0; width: 100%; z-index: 999999; }
#cookie-bar.fixed.bottom { bottom: 0; top: auto; }
/*-------- 3.7 Sign In Modal --------*/
#sign-in-dialog {
background: rgba(250, 246, 239, 0.98);
padding: 30px; padding-top: 0;
text-align: left; max-width: 400px;
margin: 40px auto; position: relative;
box-sizing: border-box; border-radius: 4px;
}
#sign-in-dialog .mfp-close { color: rgba(26, 18, 8, 0.5); background-color: rgba(200, 169, 110, 0.15); border-radius: 50%; top: 12px; right: 20px; width: 32px; height: 32px; line-height: 32px; }
#sign-in-dialog .mfp-close:hover { color: #1A1208; background-color: rgba(200, 169, 110, 0.3); }
#sign-in-dialog .mfp-close:before { font-size: 24px; font-family: 'ElegantIcons'; content: "\4d"; }
.small-dialog-header { font-size: 1.125rem; width: calc(100% + 60px); position: relative; left: -30px; top: 0; border-radius: 4px 4px 0 0; display: inline-block; background-color: rgba(200, 169, 110, 0.08); padding: 18px 20px 15px 20px; margin-bottom: 30px; }
.small-dialog-header h3 { padding: 0; margin: 0; font-size: 1.125rem; font-weight: 400; }
/*-------- 3.9 Datepicker --------*/
.daterangepicker { font-family: 'Jost', sans-serif !important; }
@media screen and (min-width: 560px) { .daterangepicker { width: 490px !important; } .daterangepicker.single { width: auto !important; } }
.applyBtn.btn.btn-sm.btn-primary { background-color: #1B6B7A; border: 0; }
.drp-selected { display: none !important; }
.daterangepicker td.active, .daterangepicker td.active:hover { background-color: #1B6B7A !important; }
.daterangepicker { box-shadow: 0 12px 40px rgba(58, 46, 30, 0.12); }
/*============================================================================================*/
/* 4. BEACH CLUB THEME */
/*============================================================================================*/
/*-------- 4.1 Design tokens --------*/
:root {
--sand: #C8A96E;
--sand-light: #E8D5B0;
--sand-pale: #F5EDD8;
--ocean: #1B6B7A;
--ocean-deep: #0F4650;
--ocean-light: #4A9BAB;
--cream: #FAF6EF;
--warm-white: #FDFAF5;
--ink: #1A1208;
--ink-80: rgba(26, 18, 8, 0.80);
--ink-60: rgba(26, 18, 8, 0.60);
--ink-30: rgba(26, 18, 8, 0.30);
--ink-15: rgba(26, 18, 8, 0.15);
--white-80: rgba(255, 255, 255, 0.80);
--white-60: rgba(255, 255, 255, 0.60);
--white-20: rgba(255, 255, 255, 0.20);
--white-08: rgba(255, 255, 255, 0.08);
--border-sand: rgba(200, 169, 110, 0.20);
}
/*-------- 4.2 Typography overrides --------*/
h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
.main_title_2 h2,
.main_title_2 h3,
.hero_in h1,
.slide-title,
.exp-title,
.cta-content h2,
.box_news h4,
.box_feat h3,
.strip_menu h3 {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-weight: 400;
letter-spacing: 0.02em;
}
.slide-title { font-weight: 500; letter-spacing: 0.04em; }
.section-label,
.cta-label,
.exp-label,
.btn_1,
.btn_sand,
footer h5,
.lang-name,
.lang-dropdown li a,
.main-menu ul li a,
.nav a {
font-family: 'Jost', 'Poppins', sans-serif !important;
}
body, p, span, li,
.footer-desc, .footer-contact-item,
.newsletter-form, .footer-bottom {
font-family: 'Jost', 'Poppins', sans-serif;
}
/*-------- 4.3 Header — transparent (over hero) --------*/
header.header {
background: transparent;
border-bottom: none;
}
/* Desktop nav links — transparent state */
.main-menu > ul > li span > a {
color: rgba(255, 255, 255, 0.78);
font-family: 'Jost', sans-serif;
font-size: 0.72rem;
font-weight: 400;
letter-spacing: 2.5px;
text-transform: uppercase;
padding: 0 10px 18px 10px;
position: relative;
transition: color 0.3s ease;
}
.main-menu > ul > li span > a::after {
content: '';
position: absolute;
bottom: 10px; left: 10px;
width: 0; height: 0.5px;
background: rgba(232, 213, 176, 0.8);
transition: width 0.35s ease;
}
.main-menu > ul > li span > a:hover,
.main-menu > ul > li span > a.active {
color: #fff;
opacity: 1;
}
.main-menu > ul > li span > a:hover::after,
.main-menu > ul > li span > a.active::after {
width: calc(100% - 20px);
}
/*-------- 4.4 Header — sticky / scrolled --------*/
header.header.sticky .main-menu > ul > li span > a {
color: rgba(26, 18, 8, 0.55);
}
header.header.sticky .main-menu > ul > li span > a:hover,
header.header.sticky .main-menu > ul > li span > a.active {
color: var(--ocean);
opacity: 1;
}
header.header.sticky .main-menu > ul > li span > a::after {
background: var(--ocean);
}
/*-------- 4.5 Hero slider — cinematic beach --------*/
.hero-slider {
position: relative;
width: 100%;
height: 100vh;
min-height: 600px;
max-height: 1000px;
overflow: hidden;
background: #0F2A30;
}
.slider-wrapper { position: relative; width: 100%; height: 100%; }
.slide {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
opacity: 0; visibility: hidden;
transition: opacity 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
visibility 1.8s ease,
transform 1.8s ease;
z-index: 1;
transform: scale(1.02);
}
.slide.active {
opacity: 1; visibility: visible;
z-index: 2; transform: scale(1);
}
.slide-media {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
object-fit: cover;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.slide-overlay {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: linear-gradient(
to bottom,
rgba(26, 18, 8, 0.35) 0%,
rgba(15, 42, 48, 0.20) 40%,
rgba(15, 42, 48, 0.15) 60%,
rgba(26, 18, 8, 0.50) 100%
);
z-index: 2;
}
.slide-content {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 3;
width: 90%;
max-width: 780px;
padding: 20px;
}
.slide-label {
display: inline-block;
font-family: 'Jost', sans-serif;
font-size: 0.62rem;
font-weight: 400;
letter-spacing: 5px;
text-transform: uppercase;
color: var(--sand-light);
margin-bottom: 20px;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.7s ease 0.2s, transform 0.7s ease 0.2s;
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
}
.slide-label::before, .slide-label::after {
content: '';
width: 36px; height: 0.5px;
background: var(--sand-light);
opacity: 0.5;
display: block;
}
.slide.active .slide-label { opacity: 1; transform: translateY(0); }
.slide-title {
font-family: 'Cormorant Garamond', Georgia, serif !important;
font-size: clamp(2.8rem, 6vw, 5.5rem);
font-weight: 500;
color: #fff;
margin: 0 0 8px;
letter-spacing: 0.03em;
line-height: 1.08;
opacity: 0;
transform: translateY(30px);
transition: opacity 0.9s ease 0.35s, transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.35s;
}
.slide-title em { font-style: italic; font-weight: 500; color: rgba(232, 213, 176, 0.95); }
.slide.active .slide-title { opacity: 1; transform: translateY(0); }
.slide-subtitle {
font-family: 'Jost', sans-serif;
font-size: clamp(0.82rem, 1.5vw, 1rem);
color: #fff;
margin: 0 0 38px;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
opacity: 0;
transform: translateY(25px);
transition: opacity 0.6s ease 0.55s, transform 0.6s ease 0.55s;
}
.slide.active .slide-subtitle { opacity: 1; transform: translateY(0); }
.slide-content .btn_1,
.slide-content .btn_sand {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease 0.75s, transform 0.6s ease 0.75s,
background 0.35s ease, box-shadow 0.35s ease !important;
}
.slide.active .btn_1,
.slide.active .btn_sand { opacity: 1; transform: translateY(0); }
/* Slider hero CTA — solid ocean colour, proper sizing */
.hero-slider .btn_1,
.slide-content .btn_1,
.slide-content a.btn_1 {
display: inline-block !important;
padding: 13px 40px !important;
font-size: 0.68rem !important;
font-weight: 500 !important;
letter-spacing: 2.5px !important;
text-transform: uppercase !important;
background: #1B6B7A !important;
color: #fff !important;
border: none !important;
border-radius: 2px !important;
cursor: pointer;
text-decoration: none;
transition: background 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease !important;
}
.hero-slider .btn_1:hover,
.slide-content .btn_1:hover,
.slide-content a.btn_1:hover {
background: #0F4650 !important;
color: #fff !important;
box-shadow: 0 8px 28px rgba(27, 107, 122, 0.3) !important;
}
/* Outline ghost variant */
.hero-slider .btn_1.outline {
background: transparent !important;
border: 1px solid rgba(255, 255, 255, 0.3) !important;
color: #fff !important;
}
.hero-slider .btn_1.outline:hover {
border-color: var(--sand) !important;
background: rgba(200, 169, 110, 0.15) !important;
box-shadow: 0 8px 28px rgba(200, 169, 110, 0.15) !important;
}
@media (max-width: 991px) {
.hero-slider .btn_1,
.slide-content .btn_1,
.slide-content a.btn_1 {
padding: 12px 32px !important;
font-size: 0.68rem !important;
}
}
/* Slider arrows */
.slider-arrow {
position: absolute;
top: 50%; transform: translateY(-50%);
z-index: 10;
background: rgba(255, 255, 255, 0.05);
border: 0.5px solid rgba(255, 255, 255, 0.12);
color: #fff;
width: 56px; height: 56px;
border-radius: 50%;
cursor: pointer;
font-size: 1.2rem;
display: flex; align-items: center; justify-content: center;
transition: all 0.4s ease;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.slider-arrow:hover {
background: rgba(200, 169, 110, 0.18);
border-color: rgba(200, 169, 110, 0.4);
transform: translateY(-50%) scale(1.06);
}
.slider-arrow.prev { left: 36px; }
.slider-arrow.next { right: 36px; }
/* Slider dots */
.slider-dots {
position: absolute;
bottom: 44px; left: 50%;
transform: translateX(-50%);
z-index: 10;
display: flex; gap: 12px;
}
.slider-dots .dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--white-20);
cursor: pointer;
transition: all 0.4s ease;
border: 0.5px solid rgba(255, 255, 255, 0.12);
}
.slider-dots .dot.active {
background: var(--sand-light);
border-color: rgba(232, 213, 176, 0.3);
transform: scale(1.4);
}
.slider-dots .dot:hover { background: rgba(200, 169, 110, 0.5); }
@media (max-width: 768px) {
.hero-slider { min-height: 500px; max-height: 700px; }
.slider-arrow { width: 44px; height: 44px; font-size: 1rem; }
.slider-arrow.prev { left: 14px; }
.slider-arrow.next { right: 14px; }
.slider-dots { bottom: 24px; }
}
/*-------- 4.6 Scroll indicator --------*/
.scroll-indicator {
position: absolute;
bottom: 90px; left: 50%;
transform: translateX(-50%);
z-index: 10;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
opacity: 0;
animation: fadeInUp 1s ease 1.4s forwards;
}
.scroll-indicator span {
font-family: 'Jost', sans-serif;
font-size: 0.6rem;
font-weight: 400;
letter-spacing: 4px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.35);
}
.scroll-indicator .scroll-tick {
width: 0.5px; height: 40px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), transparent);
animation: scrollFade 2.2s ease-in-out infinite;
}
@keyframes scrollFade {
0%, 100% { opacity: 0.3; transform: scaleY(1); }
50% { opacity: 1; transform: scaleY(0.7); }
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateX(-50%) translateY(16px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
/*-------- 4.7 Experiences section --------*/
.experiences-section {
padding: 120px 0;
background: #fff;
}
.experiences-header {
text-align: center;
margin-bottom: 65px;
}
.experiences-header .section-label {
display: inline-flex;
align-items: center;
gap: 14px;
font-family: 'Jost', sans-serif;
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--ocean);
margin-bottom: 16px;
}
.experiences-header .section-label::before,
.experiences-header .section-label::after {
content: '';
width: 32px; height: 0.5px;
background: var(--sand);
display: block;
}
.experiences-header h2 {
font-family: 'Cormorant Garamond', serif !important;
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 400;
color: var(--ink);
margin-bottom: 14px;
letter-spacing: 0.02em;
}
.experiences-header p {
font-size: 0.95rem;
color: var(--ink-60);
max-width: 420px;
margin: 0 auto;
letter-spacing: 0.02em;
font-weight: 500;
line-height: 1.8;
}
.experiences-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.exp-card {
position: relative;
height: 520px;
border-radius: 2px;
overflow: hidden;
cursor: pointer;
}
.exp-image {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-size: cover;
background-position: center;
transition: transform 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.exp-card:hover .exp-image { transform: scale(1.07); }
.exp-overlay {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: linear-gradient(
to top,
rgba(26, 18, 8, 0.92) 0%,
rgba(15, 70, 80, 0.35) 45%,
rgba(27, 107, 122, 0.15) 70%,
transparent 100%
);
z-index: 1;
transition: all 0.6s ease;
}
.exp-card:hover .exp-overlay {
background: linear-gradient(
to top,
rgba(26, 18, 8, 0.96) 0%,
rgba(15, 70, 80, 0.5) 55%,
rgba(27, 107, 122, 0.2) 80%,
transparent 100%
);
}
.exp-content {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 42px 36px;
z-index: 2;
}
.exp-label {
display: inline-block;
font-family: 'Jost', sans-serif;
font-size: 0.62rem;
font-weight: 500;
letter-spacing: 3.5px;
text-transform: uppercase;
color: var(--sand-light);
margin-bottom: 10px;
}
.exp-title {
font-family: 'Cormorant Garamond', serif !important;
font-size: 1.6rem;
font-weight: 400;
color: #fff;
margin: 0 0 14px;
line-height: 1.25;
letter-spacing: 0.02em;
}
.exp-desc {
font-size: 0.82rem;
color: rgba(255, 255, 255, 0.55);
margin: 0 0 18px;
line-height: 1.75;
font-weight: 500;
}
.exp-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--sand-light);
font-family: 'Jost', sans-serif;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 2.5px;
text-transform: uppercase;
text-decoration: none;
opacity: 0;
transform: translateY(10px);
transition: all 0.4s ease;
}
.exp-link::after { content: '→'; font-size: 0.9rem; transition: transform 0.3s ease; }
.exp-card:hover .exp-link { opacity: 1; transform: translateY(0); }
.exp-link:hover { color: #fff !important; }
.exp-link:hover::after { transform: translateX(5px); }
@media (max-width: 992px) { .experiences-grid { grid-template-columns: 1fr 1fr; } .exp-card { height: 420px; } }
@media (max-width: 768px) { .experiences-grid { grid-template-columns: 1fr; } .exp-card { height: 380px; } .experiences-section { padding: 70px 0; } }
/*-------- 4.8 Testimonials section --------*/
.testimonials-section {
padding: 120px 0;
background: var(--cream);
}
.testimonials-header {
text-align: center;
margin-bottom: 65px;
}
.testimonials-header .section-label {
display: inline-flex;
align-items: center;
gap: 14px;
font-family: 'Jost', sans-serif;
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--ocean);
margin-bottom: 16px;
}
.testimonials-header .section-label::before,
.testimonials-header .section-label::after {
content: '';
width: 32px; height: 0.5px;
background: var(--sand);
display: block;
}
.testimonials-header h2 {
font-family: 'Cormorant Garamond', serif !important;
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 400;
color: var(--ink);
letter-spacing: 0.02em;
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.testimonial-card {
background: #fff;
padding: 44px 38px;
border-radius: 2px;
border: 0.5px solid var(--border-sand);
transition: all 0.5s ease;
position: relative;
cursor: default;
}
.testimonial-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 60px rgba(27, 107, 122, 0.07);
border-color: rgba(27, 107, 122, 0.2);
}
.testimonial-card::before {
content: '\201C';
position: absolute;
top: 20px; left: 28px;
font-size: 5rem;
line-height: 1;
color: rgba(200, 169, 110, 0.1);
font-family: 'Cormorant Garamond', serif;
font-weight: 500;
}
.testimonial-text {
font-size: 0.9rem;
line-height: 1.9;
color: var(--ink-60);
margin-bottom: 28px;
font-style: italic;
font-weight: 500;
}
.testimonial-author { display: flex; align-items: center; gap: 14px; }
.testimonial-avatar {
width: 48px; height: 48px;
border-radius: 50%;
object-fit: cover;
background: linear-gradient(135deg, var(--ocean), var(--ocean-deep));
display: flex; align-items: center; justify-content: center;
color: #fff;
font-weight: 400;
font-size: 1.1rem;
font-family: 'Cormorant Garamond', serif;
flex-shrink: 0;
}
.testimonial-name { font-size: 0.9rem; font-weight: 500; color: var(--ink); margin: 0; }
.testimonial-role { font-size: 0.7rem; color: var(--ink-30); margin: 3px 0 0; letter-spacing: 0.5px; font-weight: 500; }
@media (max-width: 992px) { .testimonials-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 768px) { .testimonials-grid { grid-template-columns: 1fr; } .testimonials-section { padding: 70px 0; } }
/*-------- 4.9 CTA section --------*/
.cta-section {
position: relative;
padding: 140px 0;
background-image:url('/public/img/mon-cheri/mon_cher_beach-11.webp');background-size:cover;background-position:center;
overflow: hidden;
text-align: center;
}
.cta-section::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 25% 50%, rgba(27, 107, 122, 0.2) 0%, transparent 60%),
radial-gradient(ellipse at 75% 50%, rgba(200, 169, 110, 0.12) 0%, transparent 50%);
z-index: 0;
}
.cta-content {
position: relative; z-index: 2;
max-width: 680px;
margin: 0 auto;
padding: 0 20px;
}
.cta-content .cta-label {
display: inline-flex;
align-items: center;
gap: 14px;
font-family: 'Jost', sans-serif;
font-size: 0.65rem;
font-weight: 500;
letter-spacing: 4.5px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
margin-bottom: 20px;
}
.cta-content .cta-label::before,
.cta-content .cta-label::after {
content: '';
width: 28px; height: 0.5px;
background: rgba(255, 255, 255, 0.3);
display: block;
}
.cta-content h2 {
font-family: 'Cormorant Garamond', serif !important;
font-size: clamp(2rem, 4vw, 3.2rem);
font-weight: 500;
color: #fff;
margin-bottom: 18px;
letter-spacing: 0.03em;
line-height: 1.15;
}
.cta-content h2 em { font-style: italic; color: var(--sand-light); }
.cta-content p {
font-size: 1rem;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 44px;
line-height: 1.85;
font-weight: 500;
letter-spacing: 0.02em;
}
.cta-content .btn_1.outline {
display: inline-block;
padding: 16px 50px;
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 3px;
text-transform: uppercase;
background: transparent !important;
border: 1px solid rgba(255, 255, 255, 0.25) !important;
color: #fff !important;
border-radius: 1px;
transition: all 0.4s ease !important;
}
.cta-content .btn_1.outline:hover {
border-color: var(--sand-light) !important;
background: rgba(200, 169, 110, 0.15) !important;
color: #fff !important;
transform: translateY(-3px);
box-shadow: 0 14px 45px rgba(200, 169, 110, 0.18);
}
@media (max-width: 768px) { .cta-section { padding: 80px 0; } }
/*-------- 4.10 Events / News cards --------*/
.box_news {
border-radius: 2px !important;
overflow: hidden !important;
box-shadow: 0 2px 20px rgba(58, 46, 30, 0.04);
transition: all 0.4s ease !important;
}
.box_news:hover {
box-shadow: 0 12px 40px rgba(27, 107, 122, 0.08);
transform: translateY(-4px);
}
.box_news figcaption { background: var(--sand) !important; }
.box_news figcaption strong { color: var(--ink) !important; }
.box_news ul li { color: rgba(200, 169, 110, 0.6) !important; }
.box_news h4 { color: var(--ink) !important; font-weight: 400 !important; }
.box_news:hover h4 { color: var(--ocean) !important; }
.box_news p { color: var(--ink-60) !important; font-weight: 500; }
/*-------- 4.11 Footer --------*/
footer {
background: #141007 !important;
padding: 90px 0 0 !important;
color: rgba(255, 255, 255, 0.45) !important;
}
footer h5 {
color: #fff !important;
font-weight: 500;
font-size: 0.7rem;
letter-spacing: 3.5px;
text-transform: uppercase;
margin-bottom: 24px !important;
font-family: 'Jost', sans-serif !important;
}
footer .footer-brand { margin-bottom: 20px; }
footer .footer-brand img { max-height: 38px; }
footer .footer-desc {
font-size: 0.85rem;
line-height: 1.85;
color: rgba(255, 255, 255, 0.3);
margin-bottom: 28px;
max-width: 300px;
font-weight: 500;
}
footer .footer-social { display: flex; gap: 10px; }
footer .footer-social a {
display: flex; align-items: center; justify-content: center;
width: 38px; height: 38px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.03);
border: 0.5px solid rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.35) !important;
font-size: 0.88rem;
transition: all 0.35s ease;
text-decoration: none;
}
footer .footer-social a:hover {
background: linear-gradient(135deg, var(--ocean), var(--ocean-deep));
border-color: var(--ocean-light);
color: #fff !important;
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(27, 107, 122, 0.25);
}
footer .footer-links { list-style: none; padding: 0; margin: 0; }
footer .footer-links li { margin-bottom: 11px; }
footer .footer-links li a {
color: rgba(255, 255, 255, 0.35) !important;
font-size: 0.85rem;
text-decoration: none;
transition: all 0.3s ease;
font-weight: 500;
}
footer .footer-links li a:hover { color: var(--sand) !important; padding-left: 0; }
.footer-contact-item {
display: flex; align-items: flex-start;
gap: 12px; margin-bottom: 14px;
}
.footer-contact-item i { color: var(--sand); font-size: 0.88rem; margin-top: 3px; flex-shrink: 0; }
.footer-contact-item a,
.footer-contact-item span {
color: rgba(255, 255, 255, 0.35) !important;
font-size: 0.85rem;
text-decoration: none;
transition: color 0.3s ease;
font-weight: 500;
line-height: 1.6;
}
.footer-contact-item a:hover { color: var(--sand) !important; }
.footer-newsletter p {
font-size: 0.82rem;
color: rgba(255, 255, 255, 0.28);
margin-bottom: 16px;
line-height: 1.75;
font-weight: 500;
}
.newsletter-form { display: flex; gap: 0; }
.newsletter-form input {
flex: 1;
padding: 12px 16px;
background: rgba(255, 255, 255, 0.03);
border: 0.5px solid rgba(255, 255, 255, 0.07);
border-right: none;
border-radius: 2px 0 0 2px;
color: #fff;
font-size: 0.82rem;
outline: none;
font-family: 'Jost', sans-serif;
transition: all 0.3s ease;
}
.newsletter-form input::placeholder { color: rgba(255, 255, 255, 0.18); }
.newsletter-form input:focus { border-color: var(--sand); background: rgba(255, 255, 255, 0.05); }
.newsletter-form button {
padding: 12px 20px;
background: var(--sand);
border: none;
border-radius: 0 2px 2px 0;
color: var(--ink);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
cursor: pointer;
font-family: 'Jost', sans-serif;
transition: all 0.3s ease;
white-space: nowrap;
}
.newsletter-form button:hover { background: var(--sand-light); transform: none; }
.footer-bottom {
margin-top: 70px;
padding: 22px 0;
border-top: 0.5px solid rgba(255, 255, 255, 0.04);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
.footer-bottom p { margin: 0; font-size: 0.72rem; color: rgba(255, 255, 255, 0.2); letter-spacing: 0.02em; font-weight: 500; }
.footer-bottom-links { display: flex; gap: 24px; }
.footer-bottom-links a {
font-size: 0.72rem;
color: rgba(255, 255, 255, 0.2) !important;
text-decoration: none;
transition: color 0.3s ease;
font-weight: 500;
}
.footer-bottom-links a:hover { color: var(--sand) !important; }
@media (max-width: 768px) {
footer { padding: 60px 0 0 !important; }
.footer-bottom { flex-direction: column; text-align: center; }
.footer-desc { max-width: 100%; }
}
/*-------- 4.12 Language switcher --------*/
/*
* Lives inside: ul#top_menu > li.lang-switcher
* The toggle button is: a.lang-current
* The dropdown is: ul.lang-dropdown
*/
ul#top_menu li.lang-switcher { position: relative; list-style: none; }
/* The toggle button */
a.lang-current {
display: flex !important;
align-items: center;
gap: 6px;
padding: 7px 12px !important;
background: rgba(255, 255, 255, 0.07);
border: 0.5px solid rgba(255, 255, 255, 0.14);
border-radius: 3px;
font-size: 0.74rem !important;
color: rgba(255, 255, 255, 0.75) !important;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none !important;
font-family: 'Jost', sans-serif;
white-space: nowrap;
line-height: 1;
/* Kill any inherited Glyphter :before */
text-indent: 0;
}
a.lang-current:before { display: none !important; }
a.lang-current:hover {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.25);
color: #fff !important;
}
/* Sticky state */
header.sticky a.lang-current {
background: rgba(200, 169, 110, 0.08);
border-color: rgba(200, 169, 110, 0.2);
color: rgba(26, 18, 8, 0.65) !important;
}
header.sticky a.lang-current:hover {
background: rgba(200, 169, 110, 0.14);
color: var(--ocean) !important;
}
.lang-flag { font-size: 1rem; line-height: 1; flex-shrink: 0; }
.lang-name {
font-family: 'Jost', sans-serif !important;
font-weight: 500;
font-size: 0.72rem;
letter-spacing: 1px;
text-transform: uppercase;
}
/* Chevron icon */
a.lang-current .ti-angle-down {
font-size: 0.5rem;
opacity: 0.55;
transition: transform 0.28s ease, opacity 0.28s ease;
flex-shrink: 0;
}
ul#top_menu li.lang-switcher.open a.lang-current .ti-angle-down {
transform: rotate(180deg);
opacity: 1;
}
/* Dropdown panel */
ul.lang-dropdown {
position: absolute;
top: calc(100% + 10px);
right: 0;
background: rgba(250, 246, 239, 0.98);
border: 0.5px solid rgba(200, 169, 110, 0.2);
border-radius: 4px;
padding: 5px;
min-width: 148px;
list-style: none;
margin: 0;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: all 0.28s ease;
box-shadow: 0 20px 60px rgba(58, 46, 30, 0.15);
z-index: 999;
backdrop-filter: blur(12px);
}
/* Open state — triggered by JS toggling .open on the li */
ul#top_menu li.lang-switcher.open ul.lang-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
ul.lang-dropdown li { list-style: none; }
ul.lang-dropdown li a {
display: flex !important;
align-items: center;
gap: 10px;
padding: 10px 14px !important;
color: rgba(26, 18, 8, 0.65) !important;
border-radius: 2px;
font-size: 0.82rem !important;
text-transform: none !important;
letter-spacing: 0 !important;
font-family: 'Jost', sans-serif !important;
transition: all 0.22s ease;
text-decoration: none !important;
white-space: nowrap;
}
ul.lang-dropdown li a:hover {
background: rgba(200, 169, 110, 0.08);
color: #1B6B7A !important;
padding-left: 18px !important;
}
ul.lang-dropdown li.active a {
color: #1B6B7A !important;
background: rgba(27, 107, 122, 0.06);
font-weight: 500;
}
.lang-dropdown li.active a { color: var(--ocean) !important; background: rgba(27, 107, 122, 0.06); }
/*-------- 4.13 Mobile menu --------*/
.mm-menu { background: var(--cream) !important; }
.mm-listview { padding-top: 20px !important; }
.mm-listview li a {
color: var(--ink-60) !important;
font-size: 0.78rem !important;
font-weight: 400 !important;
letter-spacing: 2.5px !important;
text-transform: uppercase !important;
padding: 16px 28px !important;
border-color: rgba(200, 169, 110, 0.1) !important;
font-family: 'Jost', sans-serif !important;
transition: all 0.3s ease !important;
}
.mm-listview li a:hover { color: var(--ocean) !important; background: rgba(200, 169, 110, 0.05) !important; }
.mm-navbar { border-color: rgba(200, 169, 110, 0.1) !important; }
.mm-navbar a { color: var(--ink-30) !important; }
.mm-btn:after, .mm-btn:before { border-color: rgba(26, 18, 8, 0.3) !important; }
.mm-title { color: var(--ink-30) !important; letter-spacing: 3px !important; font-size: 0.72rem !important; }
/*-------- 4.14 Scroll reveal animations --------*/
.reveal {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
/*-------- 4.15 Utility overrides --------*/
.hero_in { background: var(--ocean) !important; }
.hero_in .wrapper { background: linear-gradient(to top, rgba(15, 70, 80, 0.65) 0%, rgba(27, 107, 122, 0.25) 100%) !important; }
.box_feat { border-color: var(--border-sand) !important; border-radius: 2px !important; }
.box_feat i { color: var(--ocean) !important; }
.box_feat h3 { color: var(--ink) !important; }
.contact_info i { color: var(--sand) !important; }
.main_title_2 h3 { color: var(--ink) !important; }
/* Panel dropdown */
.panel-dropdown { position: relative; text-align: left; padding: 15px 10px 0 15px; }
.panel-dropdown a { color: var(--ink-60); font-weight: 400; transition: all 0.3s; display: block; position: relative; }
.panel-dropdown a:after { font-family: 'ElegantIcons'; content: "\33"; font-size: 1.5rem; color: rgba(200, 169, 110, 0.5); font-weight: 400; position: absolute; right: 0; top: -8px; transition: all 0.3s ease-in-out; }
.panel-dropdown.active a:after { transform: rotate(180deg); }
.panel-dropdown .panel-dropdown-content {
opacity: 0; visibility: hidden; transition: all 0.3s;
position: absolute; top: 58px; left: 0; z-index: 99;
background: rgba(250, 246, 239, 0.98);
border: 0.5px solid var(--border-sand);
border-radius: 3px;
box-shadow: 0 12px 40px rgba(58, 46, 30, 0.12);
padding: 15px 15px 0 15px; white-space: normal; width: 280px;
}
.panel-dropdown.active .panel-dropdown-content { opacity: 1; visibility: visible; }
/* Custom search input */
.custom-search-input-2 {
background-color: #fff;
border-radius: 2px;
margin-top: 15px;
box-shadow: 0 4px 30px rgba(58, 46, 30, 0.1);
}
.custom-search-input-2 input { border: 0; height: 50px; padding-left: 15px; border-right: 0.5px solid var(--border-sand); font-weight: 400; font-family: 'Jost', sans-serif; }
.custom-search-input-2 input[type='submit'] {
color: var(--ink);
background-color: var(--sand);
font-family: 'Jost', sans-serif;
letter-spacing: 1.5px;
text-transform: uppercase;
font-size: 0.72rem;
}
.custom-search-input-2 input[type='submit']:hover { background-color: var(--ocean); color: #fff; }
/* Score badge */
.score strong { background-color: var(--ocean) !important; }
/* Tab navigation */
.nav-tabs .nav-link.active { color: var(--ocean) !important; border-bottom-color: var(--ocean) !important; }
.nav-tabs .nav-link { color: var(--ink-30) !important; }
.nav-tabs .nav-link:hover { color: var(--ocean) !important; }
/*-------- 4.16 Scrollbar & selection --------*/
::selection { background: rgba(27, 107, 122, 0.2); color: var(--ink); }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: rgba(200, 169, 110, 0.35); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(27, 107, 122, 0.4); }
/*============================================================================================*/
/* Animations (shared) */
/*============================================================================================*/
@keyframes cluster-animation {
0%, 100% { transform: scale(1.3) rotate(0deg); }
50% { transform: scale(1.5) rotate(90deg); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/*============================================================================================*/
/* 5. PREMIUM UPGRADES — Beach Club Edition */
/*============================================================================================*/
/*-------- 5.1 Global transitions & easing --------*/
/*
* NOT: *, *::before, *::after üzerine transition-timing-function uygulamak
* scroll performansını olumsuz etkiler — kaldırıldı.
* Sadece interaktif elementlere hedefli uyguluyoruz.
*/
a,
button,
.btn_1,
.btn_sand,
.box_grid,
.box_list,
.box_feat,
a.box_news,
.exp-card,
.testimonial-card,
.reveal,
.reveal-fade,
.slide,
.slide-title,
.slide-subtitle,
.slide-label,
.lang-dropdown,
ul.lang-dropdown,
a.lang-current,
nav#menu.main-menu > ul > li span > a,
nav#menu.main-menu > ul > li span > a::after,
.hamburger-inner,
header,
#logo img,
.form-control,
.exp-image,
.exp-link,
.testimonial-card,
footer ul li a,
footer ul li a::after,
.hdr-icon-btn,
.slider-arrow,
.slider-dots .dot {
transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/*-------- 5.2 Typography refinements --------*/
/* Body weight 300 — daha hafif, daha aireux */
body {
font-weight: 500 !important;
line-height: 1.85;
color: rgba(26, 18, 8, 0.60);
letter-spacing: 0.015em;
}
p {
font-weight: 500;
line-height: 1.85;
color: rgba(26, 18, 8, 0.58);
margin-bottom: 28px;
}
/* Heading letter-spacing hiyerarşisi */
h1 { letter-spacing: 0.06em; font-weight: 500; }
h2 { letter-spacing: 0.04em; font-weight: 400; }
h3 { letter-spacing: 0.03em; font-weight: 400; }
h4 { letter-spacing: 0.02em; font-weight: 400; }
h5 { letter-spacing: 0.02em; font-weight: 400; }
h6 { letter-spacing: 0.015em; font-weight: 400; }
/* Italic emphasis — sand rengi */
h1 em, h2 em, h3 em, h4 em {
font-style: italic;
color: rgba(200, 169, 110, 0.85);
font-weight: 500;
}
/* Label/eyebrow stilleri — küçük harfli üst başlıklar */
.eyebrow,
.section-eyebrow,
[class*="section-label"],
[class*="eyebrow"] {
font-family: 'Jost', sans-serif;
font-size: 0.65rem;
font-weight: 500;
letter-spacing: 5px;
text-transform: uppercase;
color: rgba(200, 169, 110, 0.75);
display: inline-flex;
align-items: center;
gap: 14px;
}
/* Eyebrow'un yanındaki dekoratif çizgiler */
.eyebrow::before,
.eyebrow::after {
content: '';
width: 32px;
height: 0.5px;
background: rgba(200, 169, 110, 0.4);
display: block;
}
/*-------- 5.3 Premium section divider --------*/
/* HTML kullanımı: */
.divider-premium {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin: 80px auto;
width: 100%;
}
.divider-premium::before,
.divider-premium::after {
content: '';
width: 80px;
height: 0.5px;
background: rgba(200, 169, 110, 0.3);
}
.divider-premium::before { width: 80px; }
.divider-premium::after { width: 80px; }
/* Merkez dekoratif element */
.divider-premium span {
display: flex;
align-items: center;
gap: 6px;
}
.divider-premium span::before,
.divider-premium span::after {
content: '';
width: 4px;
height: 4px;
border-radius: 50%;
background: rgba(200, 169, 110, 0.45);
display: block;
}
.divider-premium span i {
display: block;
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(200, 169, 110, 0.6);
}
/* Alternatif — sadece CSS ile, JS gerekmez */
/* Kullanım: */
.divider-sand {
position: relative;
text-align: center;
margin: 90px 0;
height: 1px;
}
.divider-sand::before {
content: '';
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 120px;
height: 0.5px;
background: linear-gradient(to right, transparent, rgba(200,169,110,0.5), transparent);
}
.divider-sand::after {
content: '✦';
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
font-size: 10px;
color: rgba(200, 169, 110, 0.5);
background: #FAF6EF;
padding: 0 10px;
line-height: 1;
}
/* Beyaz section'lar için */
.bg-white .divider-sand::after,
.divider-sand.on-white::after {
background: #fff;
}
@media (max-width: 767px) {
.divider-sand { margin: 60px 0; }
.divider-premium { margin: 55px auto; }
}
/*-------- 5.4 Whitespace — section padding artışı --------*/
/* Margin/padding utility'lerini güncelle */
.margin_80 {
padding-top: 130px !important;
padding-bottom: 130px !important;
}
@media (max-width: 991px) {
.margin_80 { padding-top: 90px !important; padding-bottom: 90px !important; }
}
@media (max-width: 575px) {
.margin_80 { padding-top: 60px !important; padding-bottom: 60px !important; }
}
.margin_60 {
padding-top: 100px !important;
padding-bottom: 100px !important;
}
@media (max-width: 991px) {
.margin_60 { padding-top: 70px !important; padding-bottom: 70px !important; }
}
@media (max-width: 575px) {
.margin_60 { padding-top: 50px !important; padding-bottom: 50px !important; }
}
.margin_60_35 {
padding-top: 100px !important;
padding-bottom: 70px !important;
}
/* Section title'ların altındaki boşluk */
.main_title { margin-bottom: 65px; }
.main_title_2 { margin-bottom: 65px; }
@media (max-width: 767px) {
.main_title { margin-bottom: 40px; }
.main_title_2 { margin-bottom: 30px; }
}
/*-------- 5.5 Border refinement — 0.5px everywhere --------*/
/* Tüm 1px border'ları 0.5px'e indir */
.box_grid,
.box_list,
.box_detail,
.box_general,
.box_pricing,
.booking,
#filters_col,
.accordion_2 .card,
.accordion_2 .card .card-header,
.switch-field,
.layout_view,
.filter_type h6,
.secondary_nav,
.reviews-container .rev-content {
border-width: 0.5px !important;
}
/* Form elemanları */
.form-control {
border: 0.5px solid rgba(200, 169, 110, 0.25) !important;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-control:focus {
border-color: rgba(27, 107, 122, 0.5) !important;
box-shadow: 0 0 0 3px rgba(27, 107, 122, 0.06) !important;
outline: none;
}
/* Input focus — bottom border stili */
.booking input:focus,
#sign-in-dialog .form-group input.form-control:focus {
border-color: transparent transparent rgba(200, 169, 110, 0.7) transparent !important;
border-width: 0 0 1px 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
background: rgba(200, 169, 110, 0.02) !important;
}
/*-------- 5.6 Image hover — overlay yerine zoom --------*/
/* Card figure'larında hover: scale küçülmesi + subtle overlay */
.box_grid figure,
.box_list figure,
a.box_news figure {
overflow: hidden;
position: relative;
}
/* Dark overlay on hover — zoom yerine */
.box_grid figure::after,
.box_list figure::after {
content: '';
position: absolute;
inset: 0;
background: rgba(15, 42, 48, 0);
transition: background 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 1;
pointer-events: none;
}
.box_grid:hover figure::after,
.box_list:hover figure::after {
background: rgba(15, 42, 48, 0.18);
}
/* Image ölçekleme: zoom-in değil, daha subtle */
.box_grid figure a img {
transform: translate(-50%, -50%) scale(1.04) !important;
transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.box_grid figure a:hover img {
transform: translate(-50%, -50%) scale(1) !important;
}
.box_list figure a img {
transition: transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.box_list figure a:hover img {
transform: translate(-50%, -50%) scale(1) !important;
}
/*-------- 5.7 Link underline animation --------*/
/* Body içindeki text link'lere animasyonlu underline */
.entry-content a,
.box_general a,
section a:not(.btn_1):not(.btn_sand):not([class*="btn"]):not([class*="wish"]) {
position: relative;
text-decoration: none;
}
.entry-content a::after,
.box_general a::after {
content: '';
position: absolute;
bottom: -1px; left: 0;
width: 0; height: 0.5px;
background: rgba(27, 107, 122, 0.6);
transition: width 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.entry-content a:hover::after,
.box_general a:hover::after {
width: 100%;
}
/* Footer link underline */
footer ul li a {
position: relative;
}
footer ul li a::after {
content: '';
position: absolute;
bottom: 0; left: 0;
width: 0; height: 0.5px;
background: rgba(200, 169, 110, 0.5);
transition: width 0.35s ease;
}
footer ul li a:hover {
padding-left: 0 !important; /* Eski slide effect yerine underline */
color: rgba(200, 169, 110, 0.85) !important;
}
footer ul li a:hover::after { width: 100%; }
/*-------- 5.8 Card elevation — çok subtle shadow sistemi --------*/
.box_grid {
box-shadow: 0 1px 4px rgba(26, 18, 8, 0.04),
0 4px 16px rgba(26, 18, 8, 0.04) !important;
transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
box-shadow 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.box_grid:hover {
transform: translateY(-6px) !important;
box-shadow: 0 8px 32px rgba(26, 18, 8, 0.07),
0 24px 64px rgba(27, 107, 122, 0.06) !important;
}
.box_list {
box-shadow: 0 1px 4px rgba(26, 18, 8, 0.04),
0 4px 16px rgba(26, 18, 8, 0.04) !important;
transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
box-shadow 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.box_list:hover {
transform: translateY(-4px) !important;
box-shadow: 0 8px 32px rgba(26, 18, 8, 0.07),
0 24px 64px rgba(27, 107, 122, 0.05) !important;
}
/* Box feat */
a.box_feat {
box-shadow: none !important;
transition: transform 0.5s ease, border-color 0.4s ease, box-shadow 0.5s ease !important;
}
a.box_feat:hover {
transform: translateY(-8px) !important;
border-color: rgba(27, 107, 122, 0.2) !important;
box-shadow: 0 16px 48px rgba(27, 107, 122, 0.07) !important;
}
/*-------- 5.9 Main title dekoratif çizgi — sand renkli --------*/
/* main_title_2 span çizgisini güncelle */
.main_title_2 span {
width: 60px !important;
height: 0.5px !important;
background: transparent !important;
position: relative;
margin-bottom: 8px;
}
/* Çift çizgi efekti */
.main_title_2 span::before {
content: '';
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 40px; height: 0.5px;
background: rgba(200, 169, 110, 0.35);
}
.main_title_2 span em {
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 20px; height: 0.5px !important;
background: rgba(200, 169, 110, 0.8) !important;
margin: 0 !important;
}
/*-------- 5.10 Box news — premium card stili --------*/
a.box_news {
padding: 28px 28px 28px 248px;
border: 0.5px solid rgba(200, 169, 110, 0.1);
border-radius: 2px;
background: #fff;
transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
@media (max-width: 767px) {
a.box_news { padding: 20px; }
}
a.box_news:hover {
border-color: rgba(27, 107, 122, 0.18) !important;
box-shadow: 0 12px 48px rgba(26, 18, 8, 0.06);
transform: translateY(-3px) !important;
}
a.box_news figure {
border-radius: 1px;
overflow: hidden;
}
a.box_news:hover h4 {
color: var(--ocean) !important;
letter-spacing: 0.03em;
}
/*-------- 5.11 Rating yıldızları — sand rengi --------*/
.cat_star i { color: rgba(200, 169, 110, 0.85) !important; }
.rating .voted { color: rgba(200, 169, 110, 0.85) !important; }
.rating { color: rgba(200, 169, 110, 0.2) !important; }
/*-------- 5.12 Score badge — ocean --------*/
.score strong {
background: var(--ocean) !important;
font-weight: 400;
letter-spacing: 0.02em;
font-family: 'Cormorant Garamond', serif;
font-size: 1rem;
padding: 8px 12px;
}
/*-------- 5.13 Preloader — minimal --------*/
#preloader {
background: #FAF6EF !important;
display: flex;
align-items: center;
justify-content: center;
}
[data-loader="circle-side"] {
border-color: rgba(200, 169, 110, 0.15) !important;
border-top-color: rgba(200, 169, 110, 0.7) !important;
border-width: 1px !important;
width: 36px !important;
height: 36px !important;
}
/*-------- 5.14 Button refinements --------*/
/* btn_1 — daha refined */
a.btn_1,
.btn_1 {
letter-spacing: 2.5px !important;
font-weight: 400 !important;
transition: background 0.4s ease,
transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
box-shadow 0.4s ease,
letter-spacing 0.4s ease !important;
}
/* Outline buton — sand border */
a.btn_1.outline,
.btn_1.outline {
border: 0.5px solid rgba(200, 169, 110, 0.5) !important;
color: var(--ocean) !important;
background: transparent !important;
}
a.btn_1.outline:hover,
.btn_1.outline:hover {
border-color: var(--ocean) !important;
background: var(--ocean) !important;
color: #fff !important;
}
/*-------- 5.15 Experiences section — daha geniş padding --------*/
.experiences-section { padding: 140px 0 !important; }
.testimonials-section { padding: 140px 0 !important; }
.cta-section { padding: 160px 0 !important; }
@media (max-width: 991px) {
.experiences-section { padding: 90px 0 !important; }
.testimonials-section { padding: 90px 0 !important; }
.cta-section { padding: 100px 0 !important; }
}
@media (max-width: 767px) {
.experiences-section { padding: 60px 0 !important; }
.testimonials-section { padding: 60px 0 !important; }
.cta-section { padding: 70px 0 !important; }
}
/*-------- 5.16 Secondary nav — ultra minimal --------*/
.secondary_nav {
background: rgba(250, 246, 239, 0.96) !important;
border-bottom: 0.5px solid rgba(200, 169, 110, 0.12) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.secondary_nav ul li {
font-size: 0.68rem !important;
font-weight: 400 !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
margin-right: 28px !important;
}
.secondary_nav ul li a { color: rgba(26, 18, 8, 0.35) !important; }
.secondary_nav ul li a:hover,
.secondary_nav ul li a.active { color: var(--ocean) !important; }
/*-------- 5.17 Contact info — premium spacing --------*/
.contact_info {
background: #0F2A30 !important;
padding: 80px 0 !important;
}
.contact_info ul li {
padding: 0 40px !important;
}
.contact_info ul li i {
font-size: 2rem !important;
margin-bottom: 16px !important;
color: rgba(200, 169, 110, 0.7) !important;
display: block;
}
.contact_info ul li h4 {
font-family: 'Cormorant Garamond', serif !important;
font-size: 1.4rem !important;
font-weight: 400 !important;
letter-spacing: 0.03em !important;
color: #fff !important;
margin-bottom: 8px;
}
.contact_info ul li span {
font-size: 0.82rem;
font-weight: 500;
line-height: 1.7;
}
/*-------- 5.18 Reveal animations — refined --------*/
.reveal {
opacity: 0;
transform: translateY(32px);
transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* Stagger delays — daha uzun */
.reveal-delay-1 { transition-delay: 0.12s !important; }
.reveal-delay-2 { transition-delay: 0.24s !important; }
.reveal-delay-3 { transition-delay: 0.36s !important; }
.reveal-delay-4 { transition-delay: 0.48s !important; }
/* Fade-only variant (daha subtle) */
.reveal-fade {
opacity: 0;
transform: translateY(12px);
transition: opacity 1.2s ease,
transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal-fade.visible { opacity: 1; transform: translateY(0); }
/*-------- 5.19 Mobile refinements --------*/
@media (max-width: 767px) {
/* Daha büyük body font boyutu mobilde */
body { font-size: 0.92rem; }
/* Heading'ler mobilde daha compact letter-spacing */
h1 { letter-spacing: 0.03em; }
h2 { letter-spacing: 0.025em; }
h3 { letter-spacing: 0.02em; }
/* Card'lar mobilde full shadow kaldırılır */
.box_grid:hover,
.box_list:hover {
transform: none !important;
box-shadow: 0 4px 20px rgba(26, 18, 8, 0.06) !important;
}
/* Section başlıkları mobilde daha sıkı */
.main_title { margin-bottom: 32px; }
.main_title_2 { margin-bottom: 24px; }
}
/*-------- 5.20 Print & accessibility --------*/
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.reveal, .reveal-fade { opacity: 1; transform: none; }
}
/*============================================================================================*/
/* 6. BUG FIXES */
/*============================================================================================*/
/*-------- 6.1 Hero empty space fix --------*/
/*
* hero_in — sabit yükseklik kaldırıldı, içeriğe göre şekilleniyor.
* Boş alan genellikle şu nedenlerden biri:
* a) hero_in'e sabit height + az içerik
* b) main'e header yüksekliği kadar padding-top eklenmesi
* c) hero_in::before animation'ı z-index sorunu
*/
/* Hero yüksekliklerini içeriğe göre ayarla */
.hero_in {
height: auto !important;
min-height: 360px !important;
}
@media (max-width: 767px) {
.hero_in {
min-height: 280px !important;
}
}
/* Wrapper'ın tam yüksekliği doldurması için */
.hero_in .wrapper {
min-height: 360px !important;
padding: 100px 0 60px !important;
}
@media (max-width: 767px) {
.hero_in .wrapper {
min-height: 280px !important;
padding: 90px 0 50px !important;
}
}
/* hero_in::before z-index ve opacity — animation bitmeden görünmeme sorunu */
.hero_in:before {
animation: none !important;
opacity: 1 !important;
transform: scale(1.04) !important;
}
/* main — header (76px) kadar padding-top, fazla değil */
main {
padding-top: 0 !important;
}
/* İlk child hero ise padding gerekmez */
main > .hero_in:first-child,
main > section.hero_in:first-child,
main > .hero-slider:first-child {
margin-top: 0 !important;
}
/*-------- 6.2 Hero slider boş alan fix --------*/
/* hero-slider ekranda tam görünsün */
.hero-slider {
margin-top: 0 !important;
}
/* Slider içindeki boşluk sorunu — padding kaldır */
.hero-slider .slide-content {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/*-------- 6.3 Section ilk child margin fix --------*/
/* Her sayfadaki ilk section üst boşluğunu normalize et */
main > div:first-child,
main > section:first-child {
margin-top: 0 !important;
}
.gallery-section{padding:120px 0 100px;background:var(--cream,#FAF6EF)}
.gallery-header{text-align:center;margin-bottom:3.5rem}
.gallery-header h2{font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,3.5vw,3rem);font-weight:300;letter-spacing:.04em;color:var(--ink,#1A1208);margin:.75rem 0 .5rem}
.gallery-header p{font-family:'Jost',sans-serif;font-size:.95rem;color:rgba(26,18,8,.55);letter-spacing:.015em;max-width:480px;margin:0 auto}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;max-width:1400px;margin:0 auto;padding:0 1.5rem}
.gallery-item{position:relative;overflow:hidden;cursor:pointer;border-radius:2px}
.gallery-item::before{content:'';display:block;padding-bottom:100%}
.gallery-item.gallery-wide.gallery-tall{grid-column:span 2;grid-row:span 2}
.gallery-item.gallery-wide{grid-column:span 2}
.gallery-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.25,.46,.45,.94)}
.gallery-item:hover img{transform:scale(1.08)}
.gallery-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(26,18,8,.7) 0,rgba(26,18,8,.05) 50%,rgba(26,18,8,.1) 100%);opacity:0;transition:opacity .6s cubic-bezier(.25,.46,.45,.94);display:flex;align-items:center;justify-content:center}
.gallery-item:hover .gallery-overlay{opacity:1}
.gallery-hover-content{display:flex;flex-direction:column;align-items:center;gap:.75rem;transform:translateY(12px);transition:transform .6s cubic-bezier(.25,.46,.45,.94)}
.gallery-item:hover .gallery-hover-content{transform:translateY(0)}
.gallery-icon{width:48px;height:48px;border:1.5px solid rgba(255,255,255,.7);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.1rem;transition:all .3s ease}
.gallery-item:hover .gallery-icon{background:var(--sand,#C8A96E);border-color:var(--sand,#C8A96E)}
.gallery-label{font-family:'Jost',sans-serif;font-size:.7rem;letter-spacing:2.5px;text-transform:uppercase;color:#fff;font-weight:400;text-shadow:0 1px 4px rgba(0,0,0,.2)}
.gallery-cta{text-align:center;margin-top:2.5rem}
.cta-section{padding:100px 0!important;position:relative}
.cta-overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);z-index:1}
.cta-section .cta-content{z-index:2}
@media(max-width:991px){.cta-section{padding:70px 0!important}}
@media(max-width:767px){.cta-section{padding:50px 0!important}}
@media(max-width:992px){.gallery-grid{grid-template-columns:repeat(3,1fr);gap:4px;padding:0 1rem}.gallery-section{padding:80px 0 60px}}
@media(max-width:600px){.gallery-grid{grid-template-columns:repeat(2,1fr);gap:3px;padding:0 .5rem}.gallery-item.gallery-wide{grid-column:span 2}.gallery-item.gallery-tall{grid-row:span 1}.gallery-section{padding:60px 0 40px}}
/* ── About image ─────────────────────── */
.about-img-wrap {
position: relative;
overflow: hidden;
border-radius: 2px;
}
.about-img-wrap img {
display: block;
width: 100%;
height: 520px;
object-fit: cover;
}
@media (max-width: 991px) { .about-img-wrap img { height: 360px; } }
@media (max-width: 575px) { .about-img-wrap img { height: 240px; } }
/* Est. badge */
.about-badge {
position: absolute;
bottom: 22px; right: 22px;
background: rgba(250,246,239,0.95);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
padding: 14px 20px;
border-radius: 2px;
border: 0.5px solid rgba(200,169,110,0.25);
text-align: center;
}
.about-badge-year {
font-family: 'Cormorant Garamond', serif;
font-size: 2rem;
font-weight: 500;
color: #1B6B7A;
display: block;
line-height: 1;
}
.about-badge-lbl {
font-size: 0.58rem;
letter-spacing: 3px;
text-transform: uppercase;
color: rgba(26,18,8,0.38);
font-weight: 500;
display: block;
margin-top: 4px;
}
/* Text column */
.about-eyebrow {
font-size: 0.6rem;
letter-spacing: 4px;
text-transform: uppercase;
color: rgba(200,169,110,0.75);
font-weight: 500;
display: block;
margin-bottom: 20px;
}
.about-body {
font-size: 0.98rem;
line-height: 1.9;
color: rgba(26,18,8,0.6);
font-weight: 500;
margin-bottom: 20px;
}
/* Stats */
.about-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
padding-top: 26px;
border-top: 0.5px solid rgba(200,169,110,0.18);
}
.stat-val {
font-family: 'Cormorant Garamond', serif;
font-size: 2.1rem;
font-weight: 500;
color: #1B6B7A;
display: block;
line-height: 1;
margin-bottom: 5px;
}
.stat-lbl {
font-size: 0.6rem;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(26,18,8,0.32);
font-weight: 500;
}
/* Feature cards */
.feat-inner {
padding: 32px 26px;
text-align: left;
height: 100%;
}
.feat-eyebrow {
font-size: 0.58rem;
letter-spacing: 3px;
text-transform: uppercase;
color: rgba(200,169,110,0.65);
font-weight: 500;
display: block;
margin-bottom: 16px;
}
.feat-icon {
font-size: 1.9rem;
color: #1B6B7A;
display: block;
margin-bottom: 14px;
}
.feat-title {
font-size: 1.15rem;
margin-bottom: 10px;
color: #1A1208;
}
.feat-desc {
font-size: 0.82rem;
line-height: 1.75;
color: rgba(26,18,8,0.48);
margin: 0;
font-weight: 500;
}
/* Atmosphere images */
.atm-img {
display: block;
width: 100%;
height: 320px;
object-fit: cover;
border-radius: 2px;
}
@media (max-width: 767px) { .atm-img { height: 210px; } }
/* Vision card */
.vision-card {
background: #FAF6EF;
border: 0.5px solid rgba(200,169,110,0.15);
border-radius: 2px;
padding: 38px 32px;
height: 100%;
min-height: 280px;
display: flex;
align-items: center;
}
@media (max-width: 991px) { .vision-card { padding: 30px 24px; min-height: auto; } }
.vision-eyebrow {
font-size: 0.58rem;
letter-spacing: 4px;
text-transform: uppercase;
color: rgba(200,169,110,0.7);
font-weight: 500;
display: block;
margin-bottom: 14px;
}
.vision-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.25rem, 2.5vw, 1.65rem);
font-weight: 500;
color: #1A1208;
margin-bottom: 16px;
line-height: 1.3;
}
.vision-text {
font-size: 0.84rem;
line-height: 1.85;
color: rgba(26,18,8,0.52);
font-weight: 500;
margin: 0;
}
/* ── Contact info bar ─────────────────────────── */
.contact-info-bar {
background: #0F2A30;
padding: 60px 0;
}
.contact-info-bar ul {
list-style: none;
margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
}
.contact-info-bar ul li {
padding: 0 44px;
border-right: 0.5px solid rgba(255,255,255,0.07);
text-align: center;
}
.contact-info-bar ul li:last-child { border-right: none; }
.contact-info-bar ul li i {
font-size: 2rem;
color: rgba(200,169,110,0.65);
display: block;
margin-bottom: 16px;
}
.contact-info-bar ul li h4 {
font-family: 'Cormorant Garamond', serif;
font-size: 1.1rem;
font-weight: 400;
color: #fff;
margin-bottom: 8px;
letter-spacing: 0.02em;
}
.contact-info-bar ul li span,
.contact-info-bar ul li a {
font-size: 0.85rem;
color: rgba(255,255,255,0.42);
font-weight: 500;
line-height: 1.7;
text-decoration: none;
display: block;
transition: color 0.3s ease;
}
.contact-info-bar ul li a:hover { color: rgba(200,169,110,0.7); }
.contact-info-bar ul li small {
font-size: 0.7rem;
color: rgba(255,255,255,0.22);
display: block;
margin-top: 2px;
}
/* Mobile: stack into single column with icon left */
@media (max-width: 767px) {
.contact-info-bar { padding: 40px 0; }
.contact-info-bar ul {
grid-template-columns: 1fr;
}
.contact-info-bar ul li {
padding: 24px 20px;
border-right: none;
border-bottom: 0.5px solid rgba(255,255,255,0.07);
text-align: left;
display: flex;
align-items: flex-start;
gap: 18px;
}
.contact-info-bar ul li:last-child { border-bottom: none; }
.contact-info-bar ul li i {
font-size: 1.4rem;
margin: 0;
flex-shrink: 0;
margin-top: 2px;
}
.contact-info-bar ul li .li-text { flex: 1; }
.contact-info-bar ul li h4 { margin-bottom: 4px; font-size: 0.95rem; }
}
/* ── Info mini cards ──────────────────────────── */
.info-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 24px;
}
@media (max-width: 400px) {
.info-cards { grid-template-columns: 1fr; }
}
.info-card {
background: #fff;
border: 0.5px solid rgba(200,169,110,0.15);
border-radius: 2px;
padding: 18px 16px;
}
.info-card i {
font-size: 1.2rem;
color: rgba(200,169,110,0.55);
display: block;
margin-bottom: 10px;
}
.info-card-label {
font-size: 0.6rem;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(26,18,8,0.32);
font-weight: 500;
display: block;
margin-bottom: 5px;
}
.info-card p {
font-size: 0.8rem;
color: rgba(26,18,8,0.48);
margin: 0;
font-weight: 500;
line-height: 1.6;
}
/* ── Form fields ──────────────────────────────── */
.field-label {
font-size: 0.6rem;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(26,18,8,0.42);
font-weight: 500;
display: block;
margin-bottom: 8px;
}
.contact-input {
width: 100%;
background: #fff !important;
border: 0.5px solid rgba(200,169,110,0.22) !important;
border-radius: 2px !important;
height: 50px;
padding: 0 16px;
font-family: 'Jost', sans-serif;
font-size: 0.88rem;
font-weight: 500;
color: #1A1208;
outline: none;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
-webkit-appearance: none;
appearance: none;
box-shadow: none !important;
}
.contact-input:focus {
border-color: rgba(27,107,122,0.45) !important;
box-shadow: 0 0 0 3px rgba(27,107,122,0.05) !important;
}
.contact-input::placeholder { color: rgba(26,18,8,0.22); }
textarea.contact-input {
height: auto;
min-height: 150px;
padding: 14px 16px;
resize: vertical;
line-height: 1.7;
}
select.contact-input {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23C8A96E' d='M5 6L0 0h10z'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 16px center !important;
padding-right: 40px !important;
cursor: pointer;
}
/* ── Submit row ───────────────────────────────── */
.submit-row {
display: flex;
align-items: center;
gap: 20px;
flex-wrap: wrap;
margin-top: 28px;
}
.submit-note {
font-size: 0.72rem;
color: rgba(26,18,8,0.28);
font-weight: 500;
}
@media (max-width: 575px) {
.submit-row {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.submit-row .btn_1 {
width: 100%;
text-align: center;
justify-content: center;
display: block;
}
.submit-note { text-align: center; }
}
/* ── Alerts ───────────────────────────────────── */
.alert-success {
background: rgba(27,107,122,0.05);
border: 0.5px solid rgba(27,107,122,0.2);
border-radius: 2px;
padding: 16px 20px;
margin-bottom: 28px;
display: flex;
align-items: center;
gap: 12px;
font-size: 0.85rem;
color: #1B6B7A;
font-weight: 400;
}
.alert-success i { font-size: 1.2rem; flex-shrink: 0; }
.alert-error {
background: rgba(180,60,40,0.04);
border: 0.5px solid rgba(180,60,40,0.18);
border-radius: 2px;
padding: 16px 20px;
margin-bottom: 28px;
}
.alert-error li {
font-size: 0.82rem;
color: rgba(160,50,30,0.85);
padding: 2px 0;
font-weight: 500;
list-style: none;
}
/* ── Map ──────────────────────────────────────── */
.map-wrapper {
border-radius: 2px;
overflow: hidden;
height: 320px;
margin-bottom: 0;
height: 418px;
}
.map-wrapper iframe {
width: 100%;
height: 100%;
border: none;
display: block;
filter: grayscale(0.25) sepia(0.06);
}
@media (max-width: 991px) { .map-wrapper { height: 240px; } }
@media (max-width: 575px) { .map-wrapper { height: 220px; } }
/* ── Section helpers ──────────────────────────── */
.c-eyebrow {
font-size: 0.6rem;
letter-spacing: 4px;
text-transform: uppercase;
color: rgba(200,169,110,0.7);
font-weight: 500;
display: block;
margin-bottom: 14px;
}
.c-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(1.3rem, 3vw, 1.65rem);
font-weight: 400;
color: #1A1208;
margin-bottom: 10px;
line-height: 1.25;
}
.c-sub {
font-size: 0.85rem;
color: rgba(26,18,8,0.42);
font-weight: 500;
line-height: 1.75;
}
/* mobile column gap */
@media (max-width: 991px) {
.contact-map-col { margin-bottom: 48px; }
}