/*============================================================================================*/ /* Your custom styles below */ /*============================================================================================*/ @font-face { font-family: "TheSeasons"; src: url("/css/fonts/TheSeasonsBold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } /* About page — founders carousel: replicate OWL #carousel center-mode effect for Swiper */ #carousel .swiper-slide { opacity: 0.5; transform: scale(0.85); backface-visibility: hidden; -webkit-transform: translateZ(0) scale(0.85, 0.85); transition: all 0.3s ease-in-out 0s; overflow: hidden; } #carousel .swiper-slide-active { opacity: 1; transform: scale(1); -webkit-transform: translateZ(0) scale(1, 1); } #carousel .swiper-slide-active .item .title h4, #carousel .swiper-slide-active .item .views { opacity: 1; } /* Blog card fade-in (replaces WOW.js fadeIn) */ article.blog.wow { opacity: 0; transform: translateY(16px); transition: opacity 0.55s ease, transform 0.55s ease; } article.blog.wow.animated { visibility: visible; opacity: 1; transform: translateY(0); } /* Global: WOW.js sets visibility:hidden on .wow; restore it when our IntersectionObserver fires and adds .animated (mirrors WOW.js behaviour) */ .wow.animated { visibility: visible; } /* ============================================================ MALDIVINO BRAND PALETTE ---------------------------------------------------------- --color-primary: #0B3C5D Deep Ocean Blue --color-accent: #59D6D0 Lagoon Turquoise --color-bg-warm: #F5F1E6 White Sand ============================================================ */ :root { --color-primary: #0b3c5d; --color-primary-dark: #0b2a40; --color-accent: #59d6d0; --color-accent-hover: #3ec4bd; --color-bg-warm: #f5f1e6; /* Semantic surface tokens (light mode defaults). These power the dark-mode toggle — switching [data-theme="dark"] on remaps them without touching component CSS. */ --bg: #ffffff; --surface: #ffffff; --surface-2: #f8f8f8; --surface-muted: #f5f5f5; --text: #0d1117; --text-muted: #555555; --text-faint: #888888; --border: #e8e8e8; --border-strong: #d0d0d0; --border-soft: #f0f0f0; --shadow-card: 0 2px 16px rgba(0, 0, 0, 0.08); --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.14); --backdrop: rgba(0, 0, 0, 0.45); /* Status-tinted accent surfaces — light pastels in light mode, deeper saturated tints in dark mode so they still register. */ --accent-warn-bg: #fff8e6; --accent-warn-border: #f5e3b5; --accent-warn-text: #8a6d20; --accent-error-bg: #fde7ea; --accent-error-border: #f3c7cd; --accent-error-text: #a32028; --accent-info-bg: #e8f3ff; --accent-info-border: #c8def8; --accent-info-text: #0a4b7a; --accent-success-bg: #e8f9f0; --accent-success-border: #b9e6cd; --accent-success-text: #1f6b40; /* Image placeholder shimmer (used by ShimmerImg) */ --shimmer-base: #ececec; --shimmer-highlight: #f5f5f5; } [data-theme="dark"] { --bg: #0d1722; --surface: #13202f; --surface-2: #1a2b3d; --surface-muted: #1f3146; --text: #e6edf3; --text-muted: #9aa9b8; --text-faint: #7b8a99; --border: #22364a; --border-strong: #2e4258; --border-soft: #1c2e42; --shadow-card: 0 2px 16px rgba(0, 0, 0, 0.45); --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.55); --backdrop: rgba(0, 0, 0, 0.65); --accent-warn-bg: #3a2e10; --accent-warn-border: #5a4818; --accent-warn-text: #f0d178; --accent-error-bg: #3a1418; --accent-error-border: #5a2026; --accent-error-text: #f4949c; --accent-info-bg: #142a44; --accent-info-border: #1f3f63; --accent-info-text: #9ec6ff; --accent-success-bg: #14352a; --accent-success-border: #1f5238; --accent-success-text: #84d7a8; --shimmer-base: #1a2b3d; --shimmer-highlight: #243a52; } .text-primary { color: var(--color-primary-dark) !important; } /* ---- General links (#fc5b62 → turquoise) ---- */ a, .read_more span { color: var(--color-accent); } header.sticky .main-menu > ul > li:hover > a, a:not(.social_bt) :hover { color: var(--color-accent-hover); /* !important; */ } /* ---- Main navigation hover & active (#fc5b62 → turquoise) ---- */ .main-menu > ul > li.submenu:hover > a:after, .main-menu ul li a:hover, .main-menu ul ul li.third-level > a:hover, .main-menu ul ul li:hover > a, a.show-submenu:hover { color: var(--color-accent); } .main-menu > ul > li > a.active, header.header.map_view .main-menu > ul > li:hover > a { color: var(--color-accent) !important; } /* ---- Buttons: base deep navy, hover turquoise ---- */ a.btn_1, .btn_1 { background: var(--color-primary); } a.btn_1:hover, .btn_1:hover, a.btn_1.outline:hover, .btn_1.outline:hover, a.btn_1.full-width.purchase:hover, .btn_1.full-width.purchase:hover, .box_cart a.btn_1.outline:hover, .box_cart .btn_1.outline:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-primary) !important; } /* ---- Outline button: turquoise border/text ---- */ a.btn_1.outline, .btn_1.outline { color: var(--color-accent); border: 2px solid var(--color-accent); background: transparent; } /* ---- Search submit & map buttons ---- */ #custom-search-input input[type="submit"], #custom-search-input button[type="submit"] { background: var(--color-accent); } .btn_map_in:hover, a.btn_map_in:hover { background: var(--color-primary); } /* ---- Score / rating badges (#0054a6 → primary) ---- */ .score strong { background-color: var(--color-primary); } #review_summary { background-color: var(--color-primary); } .reviews-container .progress-bar { background-color: var(--color-accent); } /* ---- Category nav active tab ---- */ ul#cat_nav li a#active, ul#cat_nav li a.active, .tabs nav ul li.tab-current a i { color: var(--color-accent); } /* ---- Secondary nav (BOOKING BUTTON) ---- */ .secondary_nav ul li a:hover { color: var(--color-accent); } .secondary_nav ul li:last-child a { /* color: var(--color-accent); */ background: var(--color-primary); color: #fff; } .secondary_nav ul li:last-child a:hover { background: var(--color-primary); color: #fff; } /* ---- Footer: deeper brand navy + turquoise accents ---- */ footer { background-color: var(--color-primary-dark); } footer ul li a:hover { color: var(--color-accent); } footer ul.links li a:hover:after { color: var(--color-accent); } /* ---- Newsletter / subscribe CTA sections (keep pattern, swap bg) ---- */ #subscribe_bg, #subscribe { background-color: var(--color-primary) !important; } /* ---- Warm section background (White Sand) ---- */ /* .bg_color_1 { background-color: var(--color-bg-warm); } */ /* ---- Wishlist / favourite heart icons ---- */ .box_grid a.wish_bt.liked:after, .box_grid a.wish_bt:hover.liked:after, .box_list a.wish_bt.liked:after, .box_list a.wish_bt:hover.liked:after { color: var(--color-accent); } /* ---- Range slider ---- */ .rangeslider__fill { background-color: var(--color-accent); } .rangeslider__handle { background: var(--color-accent); border-color: var(--color-accent); } /* ---- Distance / nearby badge ---- */ .distance span { color: var(--color-accent); } /* ---- Form title accent ---- */ .form_title h3 strong { color: var(--color-accent); } /* ---- Pricing highlight ---- */ .plan-tall .plan-title { background: var(--color-accent); } .box_pricing a { background: var(--color-accent); } .box_pricing a:hover { background: var(--color-primary); } /* ---- Map markers ---- */ .marker-cluster-medium div, .marker-cluster-large div { background: var(--color-accent); } .cluster-visible:before { background: rgba(89, 214, 208, 0.25); } .leaflet-popup-content a { color: var(--color-accent); } /* ---- Misc interactive ---- */ .switch-field label:hover { color: var(--color-accent); } .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background: var(--color-accent); } .hero_in a.btn_photos:hover { color: var(--color-accent); } .layout_view a:hover { color: var(--color-accent); } a.box_news:hover h4 { color: var(--color-accent); } .list_articles ul li a:hover, a.address:hover, a.btn_filt_map:hover { color: var(--color-accent); } .grid ul li figcaption a:hover, .grid ul li figcaption a:focus { background: var(--color-accent); } .dropdown-user .dropdown-menu ul li a:hover { color: var(--color-accent); } #toTop:hover { background: var(--color-accent); } /* ---- Datepicker & apply button ---- */ .daterangepicker td.active, .daterangepicker td.active:hover { background-color: var(--color-primary); } .applyBtn.btn.btn-sm.btn-primary { background-color: var(--color-primary); border-color: var(--color-primary); } /* ---- Checkbox & form controls ---- */ .container_check input:checked ~ .checkmark { background-color: var(--color-accent); } /* ---- Cart section ---- */ .cart_section { background-color: var(--color-primary); } /* ---- Cookie bar ---- */ #cookie-bar .cb-policy, #cookie-bar .cb-enable:hover, #cookie-bar .cb-policy:hover { color: var(--color-accent); } /* ---- Wizard steps ---- */ .bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot { background: var(--color-primary); } /* ---- Hero cat hover overlay ---- */ .hero_single.cat_hover .wrapper { background: var(--color-primary); } /* ===================================================================== Image aspect-ratio fixes — override template style.css where images distort because height is not set or conflicts with object-fit ===================================================================== */ /* Grid listing cards — figure is 210px tall; image must fill it */ /* .box_grid figure a img { height: 100%; object-fit: cover; } */ /* List listing cards — prevent stretching on mobile (460px fixed height) */ .box_list figure a img { object-fit: cover; } @media (max-width: 991px) { .box_list figure a img { width: 100%; object-fit: cover; } } /* Map/grid-item listing cards — image must fill its fixed-height figure */ a.grid_item figure img { height: 100%; object-fit: cover; } /* Room images in hotel detail — enforce consistent 4:3 aspect ratio */ .room_type .img-fluid { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } /* ---- Section title decorative underlines ---- */ .main_title_2 span em, .main_title_3 span em { background-color: var(--color-accent); } /* ---- Map cluster markers (all sizes) ---- */ .marker-cluster-small div { background-color: var(--color-accent); } .marker-cluster div:before { border-color: var(--color-accent); box-shadow: inset 0 0 0 4px var(--color-accent); } .cluster-visible:before { border-color: var(--color-accent); box-shadow: inset 0 0 0 4px var(--color-accent); } /* ---- Search submit button (hero search bar) ---- */ #custom-search-input input[type="submit"], #custom-search-input button[type="submit"] { background-color: var(--color-accent); background: var(--color-accent); } @media (max-width: 575px) { #custom-search-input input[type="submit"] { background: var(--color-accent) url(../img/search.svg) no-repeat center center; } } input[type="submit"] { background: var(--color-accent) !important; } /* ---- Mobile / sticky nav active & hover states ---- */ .main-menu > ul > li > a.active, .main-menu ul ul { border-color: var(--color-accent); } /* ---- .default radio/checkbox custom style ---- */ .default { background-color: var(--color-accent); } .tour-carousel .swiper-pagination-bullet-active { background: var(--color-primary) !important; } /* ---- Header background (keep pattern, swap color) ---- */ #header_menu { background-color: var(--color-primary); } /* ── Experience Filters pill bar ──────────────────────────────────────────── */ .experience-filters { background: #fff; border-bottom: 1px solid #e8e8e8; padding: 12px 0; } .experience-filters__row { display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding: 2px 4px; } .experience-filters__row::-webkit-scrollbar { display: none; } .experience-filters__pill { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 7px 16px; border-radius: 999px; border: 1.5px solid #ddd; background: #fff; color: #555; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.18s ease; flex-shrink: 0; } .experience-filters__pill:hover { border-color: var(--color-primary, #e84c3d); color: var(--color-primary, #e84c3d); } .experience-filters__pill.active { background: var(--pill-color, var(--color-primary, #e84c3d)); border-color: var(--pill-color, var(--color-primary, #e84c3d)); color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } /* Collection cards */ .collection-card { display: block; border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; } .collection-card__img { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; } .collection-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .collection-card:hover .collection-card__img img { transform: scale(1.05); } .collection-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, transparent 55%); display: flex; align-items: flex-end; } .collection-card__body { padding: 1.25rem; color: #fff; } .collection-card__body h2, .collection-card__body h3 { margin: 0 0 0.25rem; color: #fff; font-size: 1.25rem; line-height: 1.3; } .collection-card__body p { margin: 0 0 0.5rem; font-size: 0.9rem; opacity: 0.9; } .collection-card__count { font-size: 0.8rem; background: rgba(255, 255, 255, 0.2); border-radius: 20px; padding: 2px 10px; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* react-date-range overrides moved to DateRangeCalendar.css (loaded after library CSS) */ /* Room facility groups */ .room-facility-groups { margin-top: 12px; } .facility-group { margin-bottom: 14px; } .facility-group-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #999; margin-bottom: 6px; } .facility-group ul.hotel_facilities li { font-size: 13px; color: #555; margin-bottom: 6px; } /* ── Room cards (Stay detail · Rooms section) ─────────────────────────── */ .room_cards_grid { display: flex; flex-direction: column; gap: 18px; margin-top: 8px; } .room_card { display: flex; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-card); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .room_card:hover { transform: translateY(-2px); box-shadow: var(--shadow-modal); border-color: var(--color-accent); } .room_card__media { flex: 0 0 38%; max-width: 38%; background: var(--surface-2); overflow: hidden; position: relative; align-self: stretch; min-height: 200px; } .room_card__media > div { height: 100%; } .room_card__media img, .room_card__media .img-fluid { width: 100%; height: 100%; object-fit: cover; display: block; } .room_card__body { flex: 1; display: flex; flex-direction: column; padding: 22px 24px; min-width: 0; } .room_card__body-inner { flex: 1; } .room_card__name { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; } .room_card__desc { margin: 0 0 14px; color: var(--text-muted); font-size: 14px; line-height: 1.6; } .room_card__desc--clamped { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .room_card__chips { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 6px; } .room_card__chip-fac { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; background: var(--surface-muted); border: 1px solid var(--border); border-radius: 14px; font-size: 12px; color: var(--text-muted); line-height: 1.3; } .room_card__chip-fac img { width: 13px; height: 13px; object-fit: contain; opacity: 0.75; flex-shrink: 0; } .room_card__chip-fac .icon-check { font-size: 11px; color: var(--color-accent); } .room_card__chip-fac--more { padding: 0; background: transparent; border: none; } .room_card__view_more_pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; background: var(--color-accent); border: 1px solid var(--color-accent); border-radius: 14px; color: #fff; font-size: 12px; font-weight: 700; line-height: 1.3; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .room_card__view_more_pill:hover { background: var(--color-primary); border-color: var(--color-primary); } .room_card__view_more_pill i { font-size: 10px; transition: transform 0.15s ease; } .room_card__view_more_pill:hover i { transform: translateX(2px); } [data-theme="dark"] .room_card__view_more_pill { color: var(--bg); } [data-theme="dark"] .room_card__view_more_pill:hover { color: var(--text); } .room_card__media-btn { border: none; padding: 0; cursor: pointer; text-align: left; } .room_card__photo-count { position: absolute; bottom: 10px; right: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; background: rgba(0, 0, 0, 0.65); color: #fff; border-radius: 14px; font-size: 11.5px; font-weight: 600; line-height: 1; } .room_card__photo-count i { font-size: 11px; } /* ── Room Details Modal ──────────────────────────────────────────────── */ .room_modal__overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 10000; display: flex; align-items: flex-start; justify-content: center; padding: 40px 20px; overflow-y: auto; animation: room_modal_fade 0.2s ease; } @keyframes room_modal_fade { from { opacity: 0; } to { opacity: 1; } } .room_modal__sheet { position: relative; width: 100%; max-width: 880px; background: var(--surface); border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3); animation: room_modal_slide 0.22s ease; } @keyframes room_modal_slide { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .room_modal__close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; border: none; cursor: pointer; z-index: 10; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; transition: background 0.15s ease; } .room_modal__close:hover { background: rgba(0, 0, 0, 0.85); } .room_modal__gallery { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--surface-2); overflow: hidden; } .room_modal__hero { width: 100%; height: 100%; object-fit: cover; display: block; } .room_modal__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--text); border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); transition: background 0.15s ease; } .room_modal__nav:hover { background: #fff; } .room_modal__nav--prev { left: 16px; } .room_modal__nav--next { right: 16px; } .room_modal__counter { position: absolute; bottom: 14px; right: 14px; padding: 4px 10px; background: rgba(0, 0, 0, 0.65); color: #fff; border-radius: 14px; font-size: 12px; font-weight: 600; } .room_modal__thumbs { display: flex; gap: 8px; padding: 12px 20px; overflow-x: auto; background: var(--surface); border-bottom: 1px solid var(--border); } .room_modal__thumb { flex: 0 0 80px; height: 56px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; padding: 0; background: var(--surface-2); cursor: pointer; transition: border-color 0.15s ease; } .room_modal__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .room_modal__thumb--active { border-color: var(--color-accent); } .room_modal__body { padding: 26px 30px 30px; } .room_modal__title { margin: 0 0 14px; font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: -0.01em; } .room_modal__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--border); } .room_modal__meta-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 20px; background: var(--surface-muted); border: 1px solid var(--border); font-size: 13px; color: var(--text-muted); font-weight: 600; } .room_modal__meta-chip i { color: var(--color-accent); } .room_modal__price { display: flex; align-items: baseline; gap: 6px; margin-left: auto; } .room_modal__price-amount { font-size: 26px; font-weight: 800; color: var(--color-primary); letter-spacing: -0.02em; line-height: 1; } [data-theme="dark"] .room_modal__price-amount { color: var(--text); } .room_modal__price-label { font-size: 13px; color: var(--text-muted); } .room_modal__desc { margin: 0 0 22px; color: var(--text-muted); font-size: 15px; line-height: 1.6; } .room_modal__section-title { margin: 0 0 14px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text); } @media (max-width: 640px) { .room_modal__overlay { padding: 0; } .room_modal__sheet { border-radius: 0; min-height: 100vh; } .room_modal__body { padding: 20px 18px 30px; } .room_modal__title { font-size: 19px; } .room_modal__price-amount { font-size: 22px; } .room_modal__nav { width: 36px; height: 36px; } } @media (max-width: 767px) { .room_card { flex-direction: column; } .room_card__media { flex: none; max-width: 100%; min-height: 0; } .room_card__media img, .room_card__media .img-fluid { aspect-ratio: 16 / 9; height: auto; } .room_card__body { padding: 18px 18px; } } /* ── Auth pages: login / register split layout ─────────────────────────── */ .auth-split { display: flex; min-height: 100vh; } /* Left brand panel — visible on lg+ only */ .auth-split__panel { flex: 1; position: relative; overflow: hidden; display: none; } @media (min-width: 992px) { .auth-split__panel { display: flex; } } .auth-split__panel-img { position: absolute; inset: 0; background: url("/img/login_bg.jpg") center / cover no-repeat; } .auth-split__panel-overlay { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 60px 48px; background: linear-gradient( 155deg, rgba(11, 60, 93, 0.9) 0%, rgba(11, 42, 64, 0.72) 55%, rgba(89, 214, 208, 0.22) 100% ); color: #fff; text-align: center; } .auth-split__panel-logo { margin-bottom: 36px; } .auth-split__panel h2 { font-size: 1.9rem; font-weight: 700; color: #fff; margin-bottom: 10px; line-height: 1.25; } .auth-split__panel-tagline { font-size: 1rem; opacity: 0.82; margin-bottom: 40px; line-height: 1.65; max-width: 340px; } .auth-split__trust { list-style: none; padding: 0; margin: 0; text-align: left; width: 100%; max-width: 310px; } .auth-split__trust li { display: flex; align-items: center; gap: 12px; font-size: 0.93rem; opacity: 0.9; margin-bottom: 16px; color: #fff; } .auth-split__trust li i { color: var(--color-accent); font-size: 1.15rem; flex-shrink: 0; } /* Left form panel */ .auth-split__form { order: -1; width: 460px; flex-shrink: 0; background: #fff; padding: 50px 52px 44px; display: flex; flex-direction: column; overflow-y: auto; } @media (max-width: 991px) { .auth-split__form { width: 100%; padding: 40px 24px 32px; } } .auth-split__form-logo { text-align: center; margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid #ededed; } .auth-split__form-title { font-size: 1.45rem; font-weight: 700; color: var(--color-primary-dark); margin-bottom: 4px; text-align: center; } .auth-split__form-subtitle { font-size: 0.9rem; color: #999; text-align: center; margin-bottom: 20px; } /* Social buttons: icon-only inline row inside auth-split */ .auth-split .access_social { margin-top: 0; margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .auth-split .access_social .social_bt { width: 46px; height: 46px; min-width: unset; border-radius: 50%; padding: 0; margin-bottom: 0; font-size: 0; display: inline-flex; align-items: center; justify-content: center; } .auth-split .access_social .social_bt::before { position: static !important; font-size: 1.15rem !important; top: auto !important; left: auto !important; width: auto !important; height: auto !important; color: #fff !important; } /* Form-group icon positioning inside auth-split */ .auth-split__form .form-group { position: relative; } .auth-split__form .form-group input { padding-left: 40px; } .auth-split__form .form-group i { font-size: 1.25rem; position: absolute; left: 12px; top: 34px; color: #ccc; width: 25px; height: 25px; display: block; font-weight: 400 !important; } .auth-split__copy { text-align: center; color: #ccc; font-size: 0.8rem; margin-top: auto; padding-top: 28px; } /* ===================================================================== DARK MODE — toggled via [data-theme="dark"] on . Brand tokens (--color-primary, --color-accent) stay shared; only surface/text/border tokens flip. Overrides below cover the Bootstrap + Panagea template colour anchors that are hard-coded to white/grey and won't pick up the variables on their own. ===================================================================== */ [data-theme="dark"] { color-scheme: dark; } /* Body & top-level frame */ [data-theme="dark"] body, [data-theme="dark"] #page { background: var(--bg); color: var(--text); } /* Generic Bootstrap utility classes */ [data-theme="dark"] .bg-white, [data-theme="dark"] .bg-light { background-color: var(--surface) !important; } [data-theme="dark"] .text-dark { color: var(--text) !important; } [data-theme="dark"] .text-muted { color: var(--text-muted) !important; } [data-theme="dark"] hr { border-color: var(--border); opacity: 0.5; } /* Header (Panagea sticky) */ [data-theme="dark"] header.sticky, [data-theme="dark"] header.header.sticky { background: var(--surface) !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); border-color: var(--surface); } [data-theme="dark"] header.sticky .main-menu > ul > li > a { color: var(--text); } [data-theme="dark"] .main-menu ul ul, [data-theme="dark"] .main-menu ul ul ul { background: var(--surface-2); border-color: var(--border); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5); } [data-theme="dark"] .main-menu ul ul li a, [data-theme="dark"] .main-menu ul ul li:hover > a { color: var(--text); border-color: var(--border-soft); } /* Listing cards / boxed sections */ [data-theme="dark"] .box_grid, [data-theme="dark"] .box_list, [data-theme="dark"] .box_news, [data-theme="dark"] .box_style_1, [data-theme="dark"] .box_style_2, [data-theme="dark"] .box_booking, [data-theme="dark"] .box_topic, [data-theme="dark"] .box_account, [data-theme="dark"] .list_general, [data-theme="dark"] .card { background: var(--surface); border-color: var(--border); color: var(--text); box-shadow: var(--shadow-card); } [data-theme="dark"] .box_grid h3, [data-theme="dark"] .box_grid h4, [data-theme="dark"] .box_list h3, [data-theme="dark"] .box_list h4 { color: var(--text); } [data-theme="dark"] .box_grid .price, [data-theme="dark"] .box_list .price, [data-theme="dark"] .box_grid small, [data-theme="dark"] .box_list small { color: var(--text-muted); } [data-theme="dark"] .box_list ul { border-color: var(--border-soft); } /* Forms */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select, [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="search"], [data-theme="dark"] input[type="tel"], [data-theme="dark"] input[type="number"], [data-theme="dark"] input[type="password"], [data-theme="dark"] textarea { background: var(--surface-2); border-color: var(--border); color: var(--text); } [data-theme="dark"] .form-control::placeholder, [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--text-faint); opacity: 0.85; } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background: var(--surface-2); color: var(--text); border-color: var(--color-accent); box-shadow: 0 0 0 0.15rem rgba(89, 214, 208, 0.18); } [data-theme="dark"] .input-group-text { background: var(--surface-muted); border-color: var(--border); color: var(--text); } /* Auth pages (Login / Register) — `.auth-split__form` and `.divider` are hardcoded to light backgrounds; remap to surface tokens in dark mode. */ [data-theme="dark"] .auth-split__form { background: var(--surface); } [data-theme="dark"] .auth-split__form-logo { border-bottom-color: var(--border); } [data-theme="dark"] .auth-split__form-title { color: var(--text); } [data-theme="dark"] .auth-split__form-subtitle, [data-theme="dark"] .auth-split__copy { color: var(--text-faint); } [data-theme="dark"] .auth-split__form .form-group i { color: var(--text-faint); } [data-theme="dark"] .divider { background-color: var(--border); } [data-theme="dark"] .divider span { background-color: var(--surface); color: var(--text-muted); } [data-theme="dark"] label, [data-theme="dark"] .form-label { color: var(--text); } /* Bootstrap modals + dropdowns + offcanvas + toasts + popovers */ [data-theme="dark"] .modal-content, [data-theme="dark"] .offcanvas, [data-theme="dark"] .toast, [data-theme="dark"] .popover, [data-theme="dark"] .dropdown-menu { background: var(--surface); color: var(--text); border-color: var(--border); } [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer, [data-theme="dark"] .offcanvas-header { border-color: var(--border); } [data-theme="dark"] .modal-backdrop { background-color: #000; } [data-theme="dark"] .modal-backdrop.show { opacity: 0.7; } [data-theme="dark"] .dropdown-item { color: var(--text); } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background: var(--surface-2); color: var(--color-accent); } [data-theme="dark"] .dropdown-divider { border-color: var(--border); } [data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(2); } /* Tables, pagination, alerts, breadcrumbs */ [data-theme="dark"] .table { color: var(--text); border-color: var(--border); } [data-theme="dark"] .table > :not(caption) > * > * { background-color: transparent; color: var(--text); border-color: var(--border); } [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--surface-2); color: var(--text); } [data-theme="dark"] .pagination .page-link { background: var(--surface); border-color: var(--border); color: var(--text); } [data-theme="dark"] .pagination .page-item.active .page-link { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } [data-theme="dark"] .alert { background: var(--surface-2); border-color: var(--border); color: var(--text); } [data-theme="dark"] .alert-info { background: var(--surface-muted); color: var(--text); } [data-theme="dark"] .alert-danger { background: var(--accent-error-bg) !important; border-color: var(--accent-error-border) !important; color: var(--accent-error-text) !important; } [data-theme="dark"] .alert-warning { background: var(--accent-warn-bg) !important; border-color: var(--accent-warn-border) !important; color: var(--accent-warn-text) !important; } [data-theme="dark"] .alert-success { background: var(--accent-success-bg) !important; border-color: var(--accent-success-border, var(--border)) !; color: var(--accent-success-text) !important; } [data-theme="dark"] .breadcrumb, [data-theme="dark"] .breadcrumb-bar { background: var(--surface-2); color: var(--text); } [data-theme="dark"] .breadcrumb a { color: var(--color-accent); } /* Custom modal/popup surfaces driven via inline-style CSS variables. The component edits switch hard-coded #fff → var(--surface) etc., so most modals recolor automatically. Below covers the cases where the inline style sets a specific shade or uses pseudo- elements that can't read CSS vars at the call site. */ /* Lightbox overlay & content (src/index.css owns the base) */ [data-theme="dark"] .lightbox-overlay { background: rgba(0, 0, 0, 0.92); } [data-theme="dark"] .lightbox-content img { background: var(--surface); } /* react-date-range — used by HeroSearch, booking asides, etc. src/index.css uses !important for these, so dark-mode must too. */ [data-theme="dark"] .datepicker-dropdown { background: var(--surface) !important; border-color: var(--border) !important; box-shadow: var(--shadow-modal); } [data-theme="dark"] .rdrCalendarWrapper { background: var(--surface) !important; color: var(--text); } [data-theme="dark"] .rdrDateDisplayWrapper { background-color: var(--surface-2) !important; } [data-theme="dark"] .rdrMonthAndYearPickers select { background: var(--surface-2); color: var(--text) !important; border-color: var(--border); } [data-theme="dark"] .rdrDayNumber span { color: var(--text) !important; } [data-theme="dark"] .rdrDayPassive .rdrDayNumber span, [data-theme="dark"] .rdrDayDisabled .rdrDayNumber span { color: var(--text-faint) !important; } [data-theme="dark"] .rdrDayDisabled { background-color: var(--surface-muted) !important; } [data-theme="dark"] .rdrWeekDay { color: var(--text-muted); } [data-theme="dark"] .rdrNextPrevButton { background: var(--surface-2); } [data-theme="dark"] .rdrNextPrevButton:hover { background: var(--surface-muted) !important; } [data-theme="dark"] .rdrPprevButton i { border-color: transparent var(--text) transparent transparent; } [data-theme="dark"] .rdrNextButton i { border-color: transparent transparent transparent var(--text); } /* Article reader lightbox (blog) */ [data-theme="dark"] .blog-reader-lightbox { background: var(--surface); color: var(--text); } [data-theme="dark"] .blog-reader-lightbox .blog-reader-close { color: var(--text); } /* App.css review/profile/adventure surfaces */ [data-theme="dark"] .review_card, [data-theme="dark"] .adventure-card, [data-theme="dark"] .profile-card, [data-theme="dark"] .profile-section { background: var(--surface); border-color: var(--border); color: var(--text); } [data-theme="dark"] .profile-card h2, [data-theme="dark"] .profile-card h3, [data-theme="dark"] .profile-section h2, [data-theme="dark"] .profile-section h3, [data-theme="dark"] .review_card h4 { color: var(--text); } /* Footer — keeps brand navy, but tone borders & inputs */ [data-theme="dark"] footer { background-color: #08202f; } [data-theme="dark"] #newsletter input[type="email"] { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); color: #fff; } /* Agent portal sidebar — deepen the teal so it doesn't clash with the new #0d1722 page background */ [data-theme="dark"] .agent-sidebar { background: #102822 !important; } [data-theme="dark"] .agent-shell { background: var(--bg) !important; } /* Theme toggle button (footer + sidebar variants) */ .theme-toggle { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid transparent; color: inherit; cursor: pointer; font-size: 13px; line-height: 1; padding: 6px 10px; border-radius: 999px; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .theme-toggle:hover { background: rgba(255, 255, 255, 0.08); color: var(--color-accent); } .theme-toggle i { font-size: 15px; line-height: 1; } .theme-toggle--footer { color: #999; } .theme-toggle--footer:hover { color: var(--color-accent); } .theme-toggle--sidebar { width: 100%; justify-content: center; color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.08); margin-bottom: 10px; padding: 7px 12px; font-size: 13px; } .theme-toggle--sidebar:hover { background: rgba(255, 255, 255, 0.16); color: #c8e846; } .theme-toggle--sidebar-slim { width: 100%; justify-content: center; color: rgba(255, 255, 255, 0.65); background: rgba(255, 255, 255, 0.08); padding: 8px 0; margin-bottom: 10px; } /* Photo dimming in dark mode — softens harsh glare on bright images. Opt out per-image with data-no-dim attribute. */ [data-theme="dark"] .box_grid img, [data-theme="dark"] .box_list img, [data-theme="dark"] .pictures_grid img, [data-theme="dark"] .hero_in img { filter: brightness(0.92); } [data-theme="dark"] img[data-no-dim] { filter: none; } [data-theme="dark"] .consent-banner { background: var(--surface-2) !important; border: 1px solid var(--border-strong); } /* Panagea style.css hardcodes background on
; override for dark mode. */ [data-theme="dark"] main { background: var(--bg); } /* Headings inherit Panagea's dark color (#333) and become unreadable on dark surfaces. Force the semantic text token. */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: var(--text); } /* Panagea preloader is a white full-screen overlay used while the page boots. The SPA boots quickly so it's mostly invisible, but it flashes white briefly on initial paint — recolor it to match the dark background. */ [data-theme="dark"] #preloader { background-color: var(--bg) !important; } /* Listings-sidebar filter panel (#filters_col). Panagea's CSS hard-codes #fff here; the inner H6 section labels also inherit a dark colour, so force the dark mode equivalents. */ [data-theme="dark"] #filters_col { background: var(--surface); border-color: var(--border); } [data-theme="dark"] #filters_col .filter_type h6, [data-theme="dark"] #filters_col h6 { color: var(--text); border-color: var(--border); } [data-theme="dark"] .container_check { color: var(--text); } [data-theme="dark"] .container_check .checkmark { background-color: var(--surface-2); border-color: var(--border-strong); } /* Disabled pagination button uses Bootstrap's #f7f7f7. */ [data-theme="dark"] .pagination .page-item.disabled .page-link, [data-theme="dark"] .page-link:disabled, [data-theme="dark"] .page-link.disabled { background: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text-faint) !important; } /* "Other listings filter" / Panagea sidebar widgets (filter_type wrapper) */ [data-theme="dark"] .filter_type, [data-theme="dark"] .filter_type ul li { border-color: var(--border) !important; } [data-theme="dark"] #filters_col_bt, [data-theme="dark"] a#filters_col_bt { background: transparent !important; border: 0; color: var(--text) !important; } [data-theme="dark"] #filters_col label, [data-theme="dark"] #filters_col .filter_type label { color: var(--text) !important; } /* Mobile filter pill row (Stays/Experiences/etc on <992px) */ [data-theme="dark"] .mfp-pill { background: var(--surface-2) !important; border-color: var(--border-strong) !important; color: var(--text-muted) !important; } [data-theme="dark"] .mfp-pill:hover { background: var(--surface-muted) !important; } [data-theme="dark"] .mfp-pill-active { background: var(--accent-info-bg) !important; border-color: var(--color-accent) !important; color: var(--accent-info-text) !important; } /* Mobile main-menu slide-out drawer (<992px). Panagea hardcodes #fff bg and !important #333 text — both need dark equivalents. */ @media (max-width: 991px) { [data-theme="dark"] .main-menu { background-color: var(--surface) !important; } [data-theme="dark"] .main-menu li, [data-theme="dark"] .main-menu a { color: var(--text) !important; border-color: var(--border-soft); } [data-theme="dark"] .main-menu ul li.submenu ul { border-left-color: var(--border) !important; } [data-theme="dark"] .main-menu ul > li.submenu > a:after { color: var(--text-muted) !important; } } /* Listings sort dropdown uses inline border #d0d0d0 — bump to dark token. */ [data-theme="dark"] .desktop-sort-select { border-color: var(--border-strong) !important; color: var(--text) !important; background-color: var(--surface) !important; } /* Panagea `.bg_color_1` is a full-width white section wrapper (used on Visa, About, Privacy, Maldives FAQ, AdventureDetail, etc.) */ [data-theme="dark"] .bg_color_1 { background-color: var(--surface) !important; } /* Panagea `.box_feat` is the "feature card" on the About page. */ [data-theme="dark"] .box_feat, [data-theme="dark"] a.box_feat { background-color: var(--surface-2) !important; border-color: var(--border) !important; color: var(--text); } [data-theme="dark"] .box_feat h3, [data-theme="dark"] .box_feat p { color: var(--text); } /* Hero "View photos" button on listing/adventure detail pages. */ [data-theme="dark"] .hero_in a.btn_photos, [data-theme="dark"] .hero_in.adventure_detail .wrapper a.btn_photos { background-color: var(--surface) !important; color: var(--text) !important; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.5); } [data-theme="dark"] .hero_in a.btn_photos:hover { color: var(--color-accent) !important; } /* Sticky in-page anchor nav on detail pages (Overview / Rooms / Reviews / ...). */ [data-theme="dark"] .secondary_nav, [data-theme="dark"] .secondary_nav.is_stuck, [data-theme="dark"] .secondary_nav.sticky_horizontal { background: var(--surface) !important; border-bottom-color: var(--border) !important; } [data-theme="dark"] .secondary_nav ul li a { color: var(--text-muted) !important; } [data-theme="dark"] .secondary_nav ul li a:hover { color: var(--color-accent) !important; } [data-theme="dark"] .secondary_nav ul li a.active { color: var(--text) !important; } [data-theme="dark"] .secondary_nav ul li:last-child a { background-color: var(--color-accent) !important; color: #fff !important; } /* Room-type rows on Stay detail (Panagea alternates a gray-banded row). */ [data-theme="dark"] .room_type.gray { background-color: var(--surface-2) !important; } [data-theme="dark"] .room_type h4, [data-theme="dark"] .room_type p { color: var(--text); } [data-theme="dark"] .room_type .room-price small { color: var(--text-muted); } [data-theme="dark"] .room-facility-groups .facility-group-label { color: var(--text-muted) !important; } [data-theme="dark"] ul.hotel_facilities li { color: var(--text-muted); } /* Blog list page — Panagea blog.css overrides */ [data-theme="dark"] article.blog { background-color: var(--surface); box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.4); } [data-theme="dark"] article.blog figure .preview span { background-color: var(--surface-2); color: var(--text); } [data-theme="dark"] article.blog .post_info small { color: var(--text-muted); } [data-theme="dark"] article.blog .post_info h3 a { color: var(--text); } [data-theme="dark"] article.blog .post_info h3 a:hover { color: var(--color-accent); } [data-theme="dark"] article.blog .post_info ul { border-top-color: var(--border); } [data-theme="dark"] article.blog .post_info ul li { color: var(--text-muted); } /* Blog sidebar — widgets, recent comments, categories, tags */ [data-theme="dark"] .widget-title { border-bottom-color: var(--border); } [data-theme="dark"] .widget-title h4 { color: var(--text); } [data-theme="dark"] .comments-list h3 a { color: var(--text); } [data-theme="dark"] .comments-list h3 a:hover { color: var(--color-accent); } [data-theme="dark"] .comments-list small { color: var(--text-muted); } [data-theme="dark"] .widget ul.cats a { color: var(--text); } [data-theme="dark"] .widget ul.cats a:hover { color: var(--color-accent); } [data-theme="dark"] .tags a { background-color: var(--surface-2); color: var(--text); } [data-theme="dark"] .tags a:hover { background-color: var(--color-accent); color: #fff !important; } /* Blog single post + comments */ [data-theme="dark"] .singlepost { background-color: var(--surface); box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.4); color: var(--text); } [data-theme="dark"] .postmeta ul li a { color: var(--text-muted); } [data-theme="dark"] .postmeta ul li a:hover { color: var(--color-accent); } [data-theme="dark"] .comment_right { border-color: var(--border); } @keyframes mv-spin { to { transform: rotate(360deg); } } .mv-spin { display: inline-block; animation: mv-spin 1s linear infinite; }