/* ========================================================================== Dark mode Layered on top of style.css / color.css instead of rewriting them — this legacy theme hardcodes colors rather than using CSS variables. Toggled by [data-theme="dark"] on (see the inline script in layouts/site.blade.php that sets it before first paint, and the toggle switch + logic in components/site/header.blade.php). ========================================================================== */ html[data-theme="dark"] { color-scheme: dark; } /* ---------- tokens ---------- */ html[data-theme="dark"] { --dk-bg: #0b0e16; --dk-surface: #12172390; --dk-surface-solid: #131826; --dk-surface-raised: #1a2033; --dk-border: #262d40; --dk-text: #e7ebf6; --dk-text-dim: #97a1bd; --dk-text-faint: #6b7591; } /* ---------- canvas ---------- */ html[data-theme="dark"] body, html[data-theme="dark"] .content, html[data-theme="dark"] #wrapper { background: var(--dk-bg); color: var(--dk-text-dim); } /* Page sections. The theme paints most
blocks white (or #f6f6f6 for .gray-bg); the ones that are deliberately colored — gradients, accent fills — are excluded so they keep their identity in both themes. */ html[data-theme="dark"] section:not([class*="gradient"]):not([class*="color-bg"]):not([class*="color2-bg"]):not([class*="color3-bg"]):not([class*="green-bg"]):not([class*="blue-bg"]):not([class*="red-bg"]):not([class*="purp"]):not([class*="yellow-bg"]) { background-color: var(--dk-bg) !important; } html[data-theme="dark"] .gray-bg, html[data-theme="dark"] section.gray-bg { background-color: var(--dk-surface-solid) !important; } html[data-theme="dark"] .bg-tabs-wrap, html[data-theme="dark"] .bg-parallax-wrap, html[data-theme="dark"] .parallax-section, html[data-theme="dark"] .listing-hero-section, html[data-theme="dark"] .news-section, html[data-theme="dark"] .tabs-container, html[data-theme="dark"] .listing-item-container, html[data-theme="dark"] .list-main-wrap, html[data-theme="dark"] .dashboard-content, html[data-theme="dark"] .breadcrumbs-fs { background-color: var(--dk-bg) !important; } /* inner-page blocks the theme paints white/near-white */ html[data-theme="dark"] .block_box, html[data-theme="dark"] .ad-block-wrap, html[data-theme="dark"] .breadcrumbs.block-breadcrumbs, html[data-theme="dark"] .inline-breadcrumbs, html[data-theme="dark"] .reviews-comments-item-text, html[data-theme="dark"] .list-single-tab-content, html[data-theme="dark"] .booking-widget, html[data-theme="dark"] .list-author-widget-contacts, html[data-theme="dark"] .opening-hours, html[data-theme="dark"] .claim-widget, html[data-theme="dark"] .chat-widget, html[data-theme="dark"] .add-list-media-wrap, html[data-theme="dark"] .profile-edit-container, html[data-theme="dark"] .dashboard-list, html[data-theme="dark"] .dashboard-message, html[data-theme="dark"] .booking-list { background-color: var(--dk-surface-solid) !important; color: var(--dk-text-dim); } html[data-theme="dark"] .breadcrumbs a, html[data-theme="dark"] .breadcrumbs span { color: var(--dk-text-dim); } /* white card blocks used across the homepage and inner pages */ html[data-theme="dark"] .testi-item, html[data-theme="dark"] .testimonilas-text, html[data-theme="dark"] .process-item, html[data-theme="dark"] .cat-item, html[data-theme="dark"] .pricing-item, html[data-theme="dark"] .inline-facts-wrap, html[data-theme="dark"] .accordion a.toggle + .accordion-inner, html[data-theme="dark"] .accordion-inner, html[data-theme="dark"] .faq-nav, html[data-theme="dark"] .box-widget, html[data-theme="dark"] .filter-sidebar, html[data-theme="dark"] .listsearch-input-wrap, html[data-theme="dark"] .hidden-listing-filter, html[data-theme="dark"] .search-widget, html[data-theme="dark"] .widget-posts, html[data-theme="dark"] .blog-media-content, html[data-theme="dark"] .single-post-content, html[data-theme="dark"] .post-container, html[data-theme="dark"] .list-single-main-container, html[data-theme="dark"] .list-single-main-wrapper { background-color: var(--dk-surface-solid); } /* the theme's wave/curve dividers are painted white — flip them to the canvas */ html[data-theme="dark"] .footer-wave svg path, html[data-theme="dark"] .wave-bg path, html[data-theme="dark"] .section-wave path { fill: var(--dk-bg) !important; } html[data-theme="dark"] ::selection { background: var(--primary-color, #4DB7FE); color: #04101f; } html[data-theme="dark"] :focus-visible { outline-color: var(--primary-color, #4DB7FE); } /* Scrollbar (webkit) themed to match rather than the browser default. */ html[data-theme="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; } html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--dk-bg); } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--dk-surface-raised); border-radius: 8px; border: 3px solid var(--dk-bg); } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--dk-border); } /* ---------- typography ---------- */ html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6, html[data-theme="dark"] .section-title h2, html[data-theme="dark"] .section-title h3, html[data-theme="dark"] strong, html[data-theme="dark"] b { color: var(--dk-text); } html[data-theme="dark"] .section-subtitle { color: var(--dk-text-faint); } html[data-theme="dark"] a { color: inherit; } /* Muted grey/blue body copy used throughout the theme's cards & sections */ html[data-theme="dark"] p, html[data-theme="dark"] .small-text, html[data-theme="dark"] .geodir-category-location, html[data-theme="dark"] .geodir-category-text, html[data-theme="dark"] .list-single-main-item-title p, html[data-theme="dark"] .facilities-list-title { color: var(--dk-text-dim); } /* ---------- generic surfaces & cards ---------- */ html[data-theme="dark"] .geodir-category-listing, html[data-theme="dark"] .listing-item-grid_wrap, html[data-theme="dark"] .box-widget-item, html[data-theme="dark"] .dashboard-widget, html[data-theme="dark"] .list-single-main-item, html[data-theme="dark"] .comment-box, html[data-theme="dark"] .reviews-comments-item, html[data-theme="dark"] .premium-card { background: var(--dk-surface-solid); box-shadow: 0 1px 0 var(--dk-border); } html[data-theme="dark"] .geodir-category-content { background: var(--dk-surface-solid); } html[data-theme="dark"] .geodir-category-footer { border-top-color: var(--dk-border) !important; } html[data-theme="dark"] .verified-badge { box-shadow: 0 0 0 4px var(--dk-surface-solid); } html[data-theme="dark"] .vc-avatar-initials { box-shadow: 0 0 0 6px var(--dk-surface-solid) !important; } /* ---------- white rings, borders and light chips ---------- The theme separates media from the page with white rings (box-shadow / border) and light-grey chips. On a dark canvas those read as glowing outlines, so they are re-tinted to the surface and border tokens. */ html[data-theme="dark"] .geodir-category-listing img, html[data-theme="dark"] .listing-item img, html[data-theme="dark"] .listing-avatar img, html[data-theme="dark"] .testimonilas-avatar img, html[data-theme="dark"] .widget-posts-img img, html[data-theme="dark"] .grid-card img, html[data-theme="dark"] .team-photo img, html[data-theme="dark"] .author-img img { border-color: var(--dk-border) !important; } html[data-theme="dark"] .geodir_status_date, html[data-theme="dark"] .listing-counter, html[data-theme="dark"] .images-collage-title, html[data-theme="dark"] .collage-image-btn, html[data-theme="dark"] .collage-image-input, html[data-theme="dark"] .promo-link, html[data-theme="dark"] .vc-avatar-initials, html[data-theme="dark"] .listing-avatar img, html[data-theme="dark"] .review-score, html[data-theme="dark"] .verified-badge { box-shadow: 0 0 0 5px var(--dk-surface-solid) !important; } html[data-theme="dark"] .geodir-category-listing, html[data-theme="dark"] .geodir-category-content-title, html[data-theme="dark"] .geodir-category-footer, html[data-theme="dark"] .testimonilas-text, html[data-theme="dark"] .grid-card, html[data-theme="dark"] .testi-link, html[data-theme="dark"] .gallery-filter, html[data-theme="dark"] .cat-item, html[data-theme="dark"] .post-container, html[data-theme="dark"] .list-single-main-item, html[data-theme="dark"] .box-widget-item, html[data-theme="dark"] .reviews-comments-item, html[data-theme="dark"] hr { border-color: var(--dk-border) !important; } html[data-theme="dark"] .avatar-tooltip, html[data-theme="dark"] .geodir-category_contacts, html[data-theme="dark"] .geodir-opt-tooltip, html[data-theme="dark"] .grid-card, html[data-theme="dark"] .testi-link, html[data-theme="dark"] .gallery-filter, html[data-theme="dark"] .news-nav-btn, html[data-theme="dark"] .collage-image-input, html[data-theme="dark"] .nice-select-search, html[data-theme="dark"] .menu-filters a, html[data-theme="dark"] .listing-filters a { background-color: var(--dk-surface-raised) !important; color: var(--dk-text) !important; } /* light-tinted icon chips (e.g. #e0f7fa) → accent tint on dark */ html[data-theme="dark"] .grid-card-icon-wrap, html[data-theme="dark"] .process-count, html[data-theme="dark"] .facilities-list li, html[data-theme="dark"] .listing-features li i { background-color: rgba(77, 183, 254, .14) !important; } /* swiper bullets / pagination dots + their white pill wrapper */ html[data-theme="dark"] .swiper-pagination-bullet, html[data-theme="dark"] .tc-pagination2 .swiper-pagination-bullet { background-color: rgba(255,255,255,.22); } html[data-theme="dark"] .tc-pagination2, html[data-theme="dark"] .tc-pagination, html[data-theme="dark"] .promo-link, html[data-theme="dark"] .ss-slider-pagination { background-color: var(--dk-surface-solid) !important; color: var(--dk-text) !important; } /* remaining white photo frames (collage + testimonial avatars) */ html[data-theme="dark"] .collage-image-min img, html[data-theme="dark"] .testi-avatar img, html[data-theme="dark"] #wrapper img { border-color: var(--dk-border) !important; } html[data-theme="dark"] .geodir-category_contacts, html[data-theme="dark"] .nice-select-search { border-color: var(--dk-border) !important; } /* The theme rings several blocks with a translucent WHITE halo (box-shadow: 0 0 0 Npx rgba(255,255,255,.1–.4)). On a light page that reads as a soft edge; on a dark one it glows. Dim every one of them. */ html[data-theme="dark"] .tabs-container, html[data-theme="dark"] .main-search-input, html[data-theme="dark"] .hero-search, html[data-theme="dark"] .hero-map-search-wrap .hero-search, html[data-theme="dark"] .box-item, html[data-theme="dark"] .video-box-btn, html[data-theme="dark"] .pin, html[data-theme="dark"] .add-list, html[data-theme="dark"] .btn i, html[data-theme="dark"] .main-search-button, html[data-theme="dark"] .header-search-button { box-shadow: 0 0 0 8px rgba(255,255,255,.045) !important; } html[data-theme="dark"] .add-list:hover, html[data-theme="dark"] .main-search-button:hover, html[data-theme="dark"] .header-search-button:hover { box-shadow: 0 0 0 8px rgba(255,255,255,.09) !important; } /* separators the theme draws in near-white */ html[data-theme="dark"] .section-separator:before, html[data-theme="dark"] .footer-widget h3:before { opacity: .9; } html[data-theme="dark"] .geodir-category-content, html[data-theme="dark"] .geodir-category-content-title { border-color: var(--dk-border) !important; } /* ---------- forms, search & dropdowns ---------- */ html[data-theme="dark"] .custom-form input[type="text"], html[data-theme="dark"] .custom-form input[type="email"], html[data-theme="dark"] .custom-form input[type="password"], html[data-theme="dark"] .custom-form input[type="number"], html[data-theme="dark"] .custom-form input[type="tel"], html[data-theme="dark"] .custom-form textarea, html[data-theme="dark"] .custom-form select, html[data-theme="dark"] .listsearch-input-item input[type="text"] { background: var(--dk-surface-raised); border-color: var(--dk-border); color: var(--dk-text); } html[data-theme="dark"] .custom-form input:focus, html[data-theme="dark"] .custom-form textarea:focus { background: var(--dk-surface-raised) !important; } html[data-theme="dark"] .custom-form label { color: var(--dk-text-dim); } html[data-theme="dark"] .nice-select, html[data-theme="dark"] .main-search-input-item .nice-select { background: var(--dk-surface-raised); color: var(--dk-text-dim); border-color: var(--dk-border); } html[data-theme="dark"] .nice-select .list { background: var(--dk-surface-solid); box-shadow: 0 12px 32px rgba(0,0,0,.45); } html[data-theme="dark"] .nice-select .option { color: var(--dk-text-dim); background: transparent; } html[data-theme="dark"] .nice-select .option:hover, html[data-theme="dark"] .nice-select .option.selected.focus { background: var(--dk-surface-raised); color: var(--dk-text); } html[data-theme="dark"] .nice-select .nice-select-search-box, html[data-theme="dark"] .nice-select .nice-select-search { background: var(--dk-surface-solid); color: var(--dk-text); } /* Main hero search card (the white pill widget over the slider) */ html[data-theme="dark"] .main-search-input { background: var(--dk-surface-solid); } html[data-theme="dark"] .main-search-input-item input { color: var(--dk-text); } /* ---------- footer (already dark by design — just tune the two light bits) ---------- */ html[data-theme="dark"] #subscribe .enteremail { background: var(--dk-surface-raised); color: var(--dk-text); } html[data-theme="dark"] #subscribe .enteremail::-webkit-input-placeholder { color: var(--dk-text-faint); } /* ---------- pagination / breadcrumbs ---------- */ html[data-theme="dark"] .pagination a { background: var(--dk-surface-raised); color: var(--dk-text-dim); } html[data-theme="dark"] .breadcrumbs a { color: var(--dk-text-dim); } /* ---------- modals (login/register + map) ---------- */ html[data-theme="dark"] .main-register { background: var(--dk-surface-solid); } html[data-theme="dark"] .main-register_title { color: var(--dk-text); background: var(--dk-surface-raised); } html[data-theme="dark"] .main-register-holder .tabs-menu li a { color: var(--dk-text-faint); } html[data-theme="dark"] .main-register-holder .tabs-menu li.current a { color: var(--dk-text); } /* ---------- a couple of one-off promo sections with hardcoded light backgrounds ---------- */ html[data-theme="dark"] .city-online-section { background: var(--dk-bg) !important; } html[data-theme="dark"] .news-featured-wrap, html[data-theme="dark"] .news-side-item { background: var(--dk-surface-solid) !important; } /* ---------- account dashboard header block (uses inline styles in layouts/site.blade.php) ---------- */ html[data-theme="dark"] .hu-menu-user-info { border-bottom-color: var(--dk-border); } html[data-theme="dark"] .hu-menu-user-info strong { color: var(--dk-text); } html[data-theme="dark"] .hu-menu-user-info span { color: var(--dk-text-faint); } html[data-theme="dark"] .hu-logout-btn { color: var(--dk-text-dim); }