/* Dark theme for the compiled Bootstrap hotel themes (ftco family). The previous sheet targeted generic selectors (.card, [class*="section"]) that these themes never emit, so switching to dark changed almost nothing visible. This one targets the classes the templates actually use. Enabled by , set by the toggle in the engine. */ html[data-oliva-theme="dark"] { color-scheme: dark; } html[data-oliva-theme="dark"] body, html[data-oliva-theme="dark"] body.bg-light, html[data-oliva-theme="dark"] .ftco-section, html[data-oliva-theme="dark"] .ftco-bg-dark, html[data-oliva-theme="dark"] .ftco-footer, html[data-oliva-theme="dark"] .testimony-section, html[data-oliva-theme="dark"] .ftco-counter, html[data-oliva-theme="dark"] .slider-item, html[data-oliva-theme="dark"] .ftco-booking, html[data-oliva-theme="dark"] .ftco-navbar, html[data-oliva-theme="dark"] section, html[data-oliva-theme="dark"] footer, html[data-oliva-theme="dark"] header { background-color: #12151b !important; color: #e6e8ee !important; } /* Alternate/inset panels get a slightly different surface. */ html[data-oliva-theme="dark"] .ftco-section.bg-light, html[data-oliva-theme="dark"] .ftco-footer.ftco-section, html[data-oliva-theme="dark"] .ftco-bg-dark.ftco-section { background-color: #171b23 !important; } html[data-oliva-theme="dark"] h1, html[data-oliva-theme="dark"] h2, html[data-oliva-theme="dark"] h3, html[data-oliva-theme="dark"] h4, html[data-oliva-theme="dark"] h5, html[data-oliva-theme="dark"] h6, html[data-oliva-theme="dark"] .ftco-heading-1, html[data-oliva-theme="dark"] .ftco-heading-2, html[data-oliva-theme="dark"] .heading-section h2, html[data-oliva-theme="dark"] .heading, html[data-oliva-theme="dark"] .room .heading { color: #f4f5f8 !important; } html[data-oliva-theme="dark"] p, html[data-oliva-theme="dark"] span, html[data-oliva-theme="dark"] li, html[data-oliva-theme="dark"] label, html[data-oliva-theme="dark"] small, html[data-oliva-theme="dark"] strong, html[data-oliva-theme="dark"] td, html[data-oliva-theme="dark"] th, html[data-oliva-theme="dark"] .subheading, html[data-oliva-theme="dark"] .text-muted, html[data-oliva-theme="dark"] .room .meta, html[data-oliva-theme="dark"] .services p, html[data-oliva-theme="dark"] .block-23 .text { color: #c2c7d2 !important; } html[data-oliva-theme="dark"] a { color: #e0b866 !important; } html[data-oliva-theme="dark"] a:hover { color: #f2cd83 !important; } /* Section background images are very bright; dim them so the text stays legible. */ html[data-oliva-theme="dark"] [style*="background-image"]::before { content: ""; position: absolute; inset: 0; background: rgba(12, 14, 19, 0.72); pointer-events: none; } html[data-oliva-theme="dark"] section { position: relative; } html[data-oliva-theme="dark"] .slider-item .overlay { background: rgba(10, 12, 17, 0.78) !important; } /* Cards, forms and any bordered surface. */ html[data-oliva-theme="dark"] .room, html[data-oliva-theme="dark"] .services .media, html[data-oliva-theme="dark"] .block-6, html[data-oliva-theme="dark"] .form-group input, html[data-oliva-theme="dark"] .form-group select, html[data-oliva-theme="dark"] .form-group textarea, html[data-oliva-theme="dark"] input, html[data-oliva-theme="dark"] select, html[data-oliva-theme="dark"] textarea, html[data-oliva-theme="dark"] .nice-select .current, html[data-oliva-theme="dark"] .nice-select ul.list { background-color: #1b202a !important; color: #e6e8ee !important; border-color: #2c3340 !important; } html[data-oliva-theme="dark"] hr, html[data-oliva-theme="dark"] .border, html[data-oliva-theme="dark"] .border-top, html[data-oliva-theme="dark"] .border-bottom { border-color: #2c3340 !important; background-color: transparent !important; } html[data-oliva-theme="dark"] .btn, html[data-oliva-theme="dark"] .btn-outline-primary, html[data-oliva-theme="dark"] .btn-primary { background-color: #1f2531 !important; border-color: #39414f !important; color: #e6e8ee !important; } html[data-oliva-theme="dark"] .btn:hover { background-color: #2a3240 !important; } /* Booking modal — the markup uses the .obk-* prefix (see server/src/website/booking.js). */ html[data-oliva-theme="dark"] #oliva-booking { background: rgba(8, 10, 14, 0.92) !important; } html[data-oliva-theme="dark"] #oliva-booking .obk-card { background: #171b23 !important; color: #e6e8ee !important; border: 1px solid #2c3340 !important; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6) !important; } html[data-oliva-theme="dark"] #oliva-booking .obk-head { border-color: #2c3340 !important; color: #f4f5f8 !important; } html[data-oliva-theme="dark"] #oliva-booking .obk-sub, html[data-oliva-theme="dark"] #oliva-booking .obk-label, html[data-oliva-theme="dark"] #oliva-booking .obk-muted { color: #9aa3b2 !important; } html[data-oliva-theme="dark"] #oliva-booking .obk-title, html[data-oliva-theme="dark"] #oliva-booking h2 { color: #f4f5f8 !important; } html[data-oliva-theme="dark"] #oliva-booking .obk-close { color: #9aa3b2 !important; } html[data-oliva-theme="dark"] #oliva-booking .obk-close:hover { color: #fff !important; background: #262d3a !important; } html[data-oliva-theme="dark"] #oliva-booking input, html[data-oliva-theme="dark"] #oliva-booking select, html[data-oliva-theme="dark"] #oliva-booking textarea { background: #12161d !important; color: #e6e8ee !important; border-color: #2c3340 !important; } html[data-oliva-theme="dark"] #oliva-booking input::placeholder, html[data-oliva-theme="dark"] #oliva-booking select:invalid { color: #6b7480 !important; } html[data-oliva-theme="dark"] #oliva-booking input:focus, html[data-oliva-theme="dark"] #oliva-booking select:focus { border-color: #4a8ff0 !important; box-shadow: 0 0 0 2px rgba(74, 143, 240, 0.25) !important; } html[data-oliva-theme="dark"] #oliva-booking .obk-tab { background: #1b202a !important; color: #c2c7d2 !important; border-color: #2c3340 !important; } html[data-oliva-theme="dark"] #oliva-booking .obk-tab[aria-selected="true"], html[data-oliva-theme="dark"] #oliva-booking .obk-tab.is-active { background: #2a3240 !important; color: #fff !important; } html[data-oliva-theme="dark"] #oliva-booking .obk-room, html[data-oliva-theme="dark"] #oliva-booking .obk-sum { background: #1b202a !important; color: #e6e8ee !important; border-color: #2c3340 !important; } html[data-oliva-theme="dark"] #oliva-booking .obk-room:hover { background: #222836 !important; } html[data-oliva-theme="dark"] #oliva-booking .obk-price { color: #e0b866 !important; } html[data-oliva-theme="dark"] #oliva-booking .obk-cal__day { background: #1b202a !important; color: #c2c7d2 !important; border-color: #2c3340 !important; } html[data-oliva-theme="dark"] #oliva-booking .obk-cta { background: #e0b866 !important; color: #14161b !important; border-color: #e0b866 !important; } html[data-oliva-theme="dark"] #oliva-booking .obk-cta:hover { background: #f2cd83 !important; } html[data-oliva-theme="dark"] #oliva-booking .obk-err { color: #ff8a80 !important; } /* The "Check Availability" card in the hero. It is theme markup, so target the container the engine injects plus the theme's own booking section classes. */ html[data-oliva-theme="dark"] .ftco-booking, html[data-oliva-theme="dark"] .obk-hero-card { background: #171b23 !important; color: #e6e8ee !important; border-color: #2c3340 !important; } html[data-oliva-theme="dark"] .ftco-booking label, html[data-oliva-theme="dark"] .ftco-booking .form-group label, html[data-oliva-theme="dark"] .obk-hero-card label { color: #9aa3b2 !important; } html[data-oliva-theme="dark"] .ftco-booking input, html[data-oliva-theme="dark"] .ftco-booking select, html[data-oliva-theme="dark"] .ftco-booking .form-group input, html[data-oliva-theme="dark"] .ftco-booking .form-group select, html[data-oliva-theme="dark"] .obk-hero-card input, html[data-oliva-theme="dark"] .obk-hero-card select { background: #12161d !important; color: #e6e8ee !important; border-color: #2c3340 !important; } html[data-oliva-theme="dark"] .ftco-booking .btn-primary, html[data-oliva-theme="dark"] .obk-hero-card .btn-primary { background: #e0b866 !important; border-color: #e0b866 !important; color: #14161b !important; } /* Room cards. */ html[data-oliva-theme="dark"] .room { background: #171b23 !important; border-color: #2c3340 !important; color: #e6e8ee !important; } html[data-oliva-theme="dark"] .room .text, html[data-oliva-theme="dark"] .room .heading { color: #f4f5f8 !important; } html[data-oliva-theme="dark"] .room .price, html[data-oliva-theme="dark"] .room .price .num, html[data-oliva-theme="dark"] .room .meta { color: #e0b866 !important; } html[data-oliva-theme="dark"] .room img { opacity: 0.9; } /* Services cards. */ html[data-oliva-theme="dark"] .services .media, html[data-oliva-theme="dark"] .block-6.services, html[data-oliva-theme="dark"] .media.block-6 { background: #171b23 !important; border-color: #2c3340 !important; color: #e6e8ee !important; } html[data-oliva-theme="dark"] .services h3, html[data-oliva-theme="dark"] .services .heading, html[data-oliva-theme="dark"] .media.block-6 h3 { color: #f4f5f8 !important; } html[data-oliva-theme="dark"] .services p { color: #c2c7d2 !important; } html[data-oliva-theme="dark"] .services .icon span { color: #e0b866 !important; } /* Testimonials + counters + gallery tiles. */ html[data-oliva-theme="dark"] .testimony .blockquote, html[data-oliva-theme="dark"] .testimony p { color: #c2c7d2 !important; } html[data-oliva-theme="dark"] .ftco-counter .number, html[data-oliva-theme="dark"] .ftco-counter .text { color: #f4f5f8 !important; } html[data-oliva-theme="dark"] .insta-img { opacity: 0.85; } /* The video embed + its "watch on YouTube" fallback. */ html[data-oliva-theme="dark"] .oliva-video { background: #0d1015 !important; } html[data-oliva-theme="dark"] .oliva-video-fallback { color: #9aa3b2 !important; } html[data-oliva-theme="dark"] .oliva-video-fallback:hover { color: #f2cd83 !important; } /* Navbar: the theme renders it transparent over the hero. */ html[data-oliva-theme="dark"] .ftco-navbar-light, html[data-oliva-theme="dark"] .navbar.bg-dark { background: rgba(10, 12, 17, 0.85) !important; } html[data-oliva-theme="dark"] .ftco-navbar-light .navbar-brand, html[data-oliva-theme="dark"] .ftco-navbar-light .nav-link { color: #e6e8ee !important; } /* Images slightly dimmed so the page does not glare. */ html[data-oliva-theme="dark"] img { opacity: 0.9; } /* The language/theme controls sit in the navbar; keep them readable. */ html[data-oliva-theme="dark"] .oliva-ctl { background: rgba(255, 255, 255, 0.12) !important; color: #e6e8ee !important; border-color: rgba(255, 255, 255, 0.22) !important; }