/* ══════════════════════════════════════════════════════════ CUSTOM OVERRIDES 1. Dark mode — [data-theme="dark"] on 2. Layout fixes — navbar, booking picker, responsive ══════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════ DARK MODE TOGGLE BUTTON (always loaded, not dark-only) ══════════════════════════════════════════════════════════ */ .dm-toggle { background: none; border: none; cursor: pointer; color: #fff; font-size: 20px; min-width: 44px; min-height: 44px; padding: 0 8px; line-height: 1; display: flex; align-items: center; justify-content: center; border-radius: 6px; transition: background 0.2s; } .dm-toggle:hover, .dm-toggle:focus-visible { background: rgba(255,255,255,0.15); outline: none; } /* Light mode: show sun ☀, hide moon ☾ */ .dm-moon { display: none; } /* Dark mode: hide sun, show moon */ [data-theme="dark"] .dm-sun { display: none; } [data-theme="dark"] .dm-moon { display: inline !important; } /* ══════════════════════════════════════════════════════════ NAVBAR — prevent wrapping at all desktop sizes ══════════════════════════════════════════════════════════ */ /* Nav items must never wrap to 2 lines */ .header .header-menu .menu__nav > li { padding: 25px 0; white-space: nowrap; } .header .header-menu .menu__nav a { white-space: nowrap; } /* Reduce nav padding at 1300–1400px so 9 items fit */ @media (max-width: 1400px) and (min-width: 1200px) { .header .header-menu .menu__nav a { padding: 0 7px !important; font-size: 14px !important; } } /* Reduce further at narrow desktop */ @media (max-width: 1300px) and (min-width: 1200px) { .header .header-menu .menu__nav a { padding: 0 5px !important; font-size: 13px !important; } .header .px-30 { padding-left: 16px !important; padding-right: 16px !important; } } /* ══════════════════════════════════════════════════════════ MASTHEAD TABS — horizontal scroll at mid widths ══════════════════════════════════════════════════════════ */ @media (max-width: 1199px) { .masthead__tabs .tabs__controls { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex-wrap: nowrap !important; padding-bottom: 2px; } .masthead__tabs .tabs__controls::-webkit-scrollbar { display: none; } .masthead__tabs .tabs__controls > div { flex-shrink: 0; } } /* ══════════════════════════════════════════════════════════ BOOKING PICKER — 2-row grid at 992–1400px ══════════════════════════════════════════════════════════ */ @media (max-width: 1400px) and (min-width: 992px) { .mainSearch .button-grid { display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; grid-auto-flow: row; } .mainSearch .button-grid > * { border-left: none !important; border-top: 1px solid var(--color-border) !important; } .mainSearch .button-grid > *:nth-child(-n+3) { border-top: none !important; } .mainSearch .button-item { grid-column: 3; } } /* ══════════════════════════════════════════════════════════ MOBILE — single-column form + touch targets ══════════════════════════════════════════════════════════ */ @media (max-width: 991px) { .mainSearch .searchMenu-loc { width: 100% !important; padding-left: 12px !important; padding-right: 12px !important; border-right: none !important; border-bottom: 1px solid var(--color-border, #eee) !important; } .mainSearch .button-grid { display: flex !important; flex-direction: column !important; } .mainSearch__submit { width: 100% !important; } .ctaCard__content { padding: 30px 20px !important; } /* 16px prevents iOS Safari zoom-on-focus */ .form-control, select.form-control, input.form-control, select.cborder, input.cborder, .flatpickr-input { height: 48px !important; font-size: 16px !important; padding: 0 12px; width: 100%; box-sizing: border-box; } /* Flatpickr calendar: don't overflow small screens */ .flatpickr-calendar { width: calc(100vw - 24px) !important; max-width: 380px !important; left: 12px !important; right: 12px !important; } /* Car listing sidebar image full-width */ .w-250 { width: 100% !important; } } /* Touch targets ≥ 44px */ @media (max-width: 991px) { .menu__nav a { min-height: 44px; display: flex; align-items: center; } select.form-control, select.cborder { font-size: 16px; } } /* Flatpickr on very small screens */ @media (max-width: 480px) { .flatpickr-calendar { font-size: 13px !important; } .flatpickr-day { max-width: 38px !important; height: 38px !important; line-height: 38px !important; } } /* ══════════════════════════════════════════════════════════ DARK MODE — [data-theme="dark"] Strategy: override CSS custom properties so ALL framework utility classes (bg-white, text-dark-1, border-light …) invert automatically. Only add explicit rules where the framework uses hardcoded hex values. EXCEPTION: The masthead booking search form stays WHITE in dark mode — it sits on an already-dark hero image and should contrast against it, not disappear into it. ══════════════════════════════════════════════════════════ */ /* ─── CSS custom property overrides ─────────────────────── */ [data-theme="dark"] { --color-dark-1: #e8eaf6; --color-dark-2: #c5cae9; --color-dark-3: #9fa8da; --color-dark-4: #7986cb; --color-light-1: #8899aa; --color-light-2: #16213e; --color-light-3: #1a1a2e; --color-white: #1e2a3a; --color-black: #e8eaf6; --color-border: #2a3a50; --color-blue-2: #162030; /* keep accent colours — they work on both modes */ --color-blue-1: #4a7fc1; --color-yellow-1: #FFD14A; } /* ─── Base ───────────────────────────────────────────────── */ [data-theme="dark"] body { background-color: #0f0f1a; color: #e8eaf6; } [data-theme="dark"] .preloader { background-color: #0f0f1a; } /* ─── Backgrounds (hardcoded in framework) ───────────────── */ [data-theme="dark"] .bg-white { background-color: #1e2a3a !important; } [data-theme="dark"] .bg-light-2 { background-color: #16213e !important; } [data-theme="dark"] .bg-light-3 { background-color: #1a1a2e !important; } [data-theme="dark"] .bg-dark-3 { background-color: #0a1020 !important; } /* ─── Text ───────────────────────────────────────────────── */ [data-theme="dark"] .text-dark-1 { color: #e8eaf6 !important; } [data-theme="dark"] .text-light-1 { color: #8899aa !important; } [data-theme="dark"] p, [data-theme="dark"] li { color: #c5cae9; } [data-theme="dark"] .sectionTitle__title { color: #e8eaf6; } [data-theme="dark"] .featureIcon.-type-1 h4, [data-theme="dark"] .featureIcon.-type-1 p { color: #e8eaf6; } /* ─── Borders / shadows ──────────────────────────────────── */ [data-theme="dark"] .border-top-light, [data-theme="dark"] .border-light { border-color: #2a3a50 !important; } [data-theme="dark"] .shadow-4 { box-shadow: 0 4px 20px rgba(0,0,0,0.5); } /* ─── Cards / panels ─────────────────────────────────────── */ [data-theme="dark"] .cardImage__content, [data-theme="dark"] .map-form, [data-theme="dark"] .px-30.py-30.rounded-4.border-light { background-color: #1e2a3a !important; } [data-theme="dark"] .section-bg__item { opacity: 0.7; } [data-theme="dark"] .cruiseCard__title, [data-theme="dark"] h4.text-dark-1 { color: #e8eaf6 !important; } /* ─── Header ─────────────────────────────────────────────── */ [data-theme="dark"] .header.is-menu-opened { background-color: #0a1628 !important; } [data-theme="dark"] .mobile-bg { background-color: #0f1e30 !important; } [data-theme="dark"] .header .button.bg-white { background-color: #2a3a4a !important; color: #e8eaf6 !important; } /* ─── Footer ─────────────────────────────────────────────── */ [data-theme="dark"] footer.footer { background-color: #0d1b2a !important; } [data-theme="dark"] footer h5, [data-theme="dark"] footer .text-14 { color: #FFD14A; } [data-theme="dark"] footer a { color: #aaccee; } /* ─── Masthead tabs ───────────────────────────────────────── */ [data-theme="dark"] .tabs__button { color: #c5cae9; } [data-theme="dark"] .tabs__button.is-tab-el-active { background-color: #1e3050 !important; color: #fff; } /* ─── BOOKING SEARCH FORM — stays white in dark mode ─────── */ /* The masthead search box is on a dark hero, it should be */ /* bright white to contrast. We DON'T invert it. */ [data-theme="dark"] .masthead .mainSearch, [data-theme="dark"] .masthead .mainSearch.bg-white { background-color: #ffffff !important; box-shadow: 0 4px 32px rgba(0,0,0,0.4) !important; } [data-theme="dark"] .masthead .mainSearch input, [data-theme="dark"] .masthead .mainSearch select, [data-theme="dark"] .masthead .mainSearch .form-control, [data-theme="dark"] .masthead .mainSearch input.cborder, [data-theme="dark"] .masthead .mainSearch select.cborder { background-color: #ffffff !important; color: #051036 !important; border-color: #dddddd !important; } [data-theme="dark"] .masthead .mainSearch select { color-scheme: light; } [data-theme="dark"] .masthead .mainSearch input::placeholder { color: #697488 !important; opacity: 1; } [data-theme="dark"] .masthead .mainSearch h4 { color: #051036 !important; } [data-theme="dark"] .masthead .mainSearch .searchMenu-loc { border-color: #dddddd; } [data-theme="dark"] .masthead .mainSearch .text-light-1 { color: #697488 !important; } [data-theme="dark"] .masthead .mainSearch .button-grid > * + * { border-color: #dddddd; } /* ─── Non-masthead search / booking forms (dark) ────────── */ [data-theme="dark"] .mainSearch:not(.masthead .mainSearch) { background-color: #1e2a3a !important; } [data-theme="dark"] .searchMenu-loc { border-color: #2a3a50; } [data-theme="dark"] .searchMenu-loc h4 { color: #8899aa; } /* ─── General form controls (outside masthead) ───────────── */ [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background-color: #1e2a3a !important; color: #e8eaf6 !important; border-color: #2a3a50 !important; } [data-theme="dark"] select { color-scheme: dark; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #8899aa !important; opacity: 1; } [data-theme="dark"] .form-control { background-color: #1e2a3a !important; color: #e8eaf6 !important; border-color: #2a3a50 !important; } [data-theme="dark"] .form-input input, [data-theme="dark"] .form-input textarea { background-color: #1e2a3a; color: #e8eaf6; border-color: #2a3a50; } [data-theme="dark"] .form-input label { color: #8899aa; background-color: transparent; } /* ─── Flatpickr calendar ─────────────────────────────────── */ [data-theme="dark"] .flatpickr-calendar { background: #1e2a3a !important; border: 1px solid #2a3a50 !important; box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important; color: #e8eaf6 !important; } [data-theme="dark"] .flatpickr-months, [data-theme="dark"] .flatpickr-month { background: #162030 !important; color: #e8eaf6 !important; fill: #e8eaf6 !important; } [data-theme="dark"] .flatpickr-current-month, [data-theme="dark"] .flatpickr-current-month .cur-month, [data-theme="dark"] .flatpickr-current-month input.cur-year { color: #e8eaf6 !important; background: transparent !important; } [data-theme="dark"] .flatpickr-prev-month svg, [data-theme="dark"] .flatpickr-next-month svg { fill: #e8eaf6 !important; } [data-theme="dark"] .flatpickr-prev-month:hover, [data-theme="dark"] .flatpickr-next-month:hover { background: #2a3a50 !important; } [data-theme="dark"] .flatpickr-weekdays, [data-theme="dark"] span.flatpickr-weekday { background: #162030 !important; color: #8899aa !important; } [data-theme="dark"] .flatpickr-day { color: #e8eaf6 !important; background: transparent !important; border-color: transparent !important; } [data-theme="dark"] .flatpickr-day:hover, [data-theme="dark"] .flatpickr-day:focus { background: #2a3a50 !important; border-color: #2a3a50 !important; color: #e8eaf6 !important; } [data-theme="dark"] .flatpickr-day.selected, [data-theme="dark"] .flatpickr-day.startRange, [data-theme="dark"] .flatpickr-day.endRange { background: #4a7fc1 !important; border-color: #4a7fc1 !important; color: #fff !important; } [data-theme="dark"] .flatpickr-day.today { border-color: #4a7fc1 !important; } [data-theme="dark"] .flatpickr-day.today:not(.selected) { color: #4a7fc1 !important; } [data-theme="dark"] .flatpickr-day.flatpickr-disabled, [data-theme="dark"] .flatpickr-day.prevMonthDay, [data-theme="dark"] .flatpickr-day.nextMonthDay { color: #3a4a5a !important; } [data-theme="dark"] input.flatpickr-input { background-color: #1e2a3a !important; color: #e8eaf6 !important; border-color: #2a3a50 !important; }