/* * Anan Dark Mode - the theme half. * * WPResidence draws its chrome from CSS custom properties, so most of this file * is one block redefining them. The rules after it are for the places that * hard-code a colour instead, and for this site's own modules. * * Everything is scoped to html[data-anan-theme="dark"], which the head boot * script in anan-topbar.php sets before first paint. */ html[data-anan-theme="dark"] { /* --- the palette ------------------------------------------------- */ --anan-d-bg: #141310; /* page ground */ --anan-d-raised: #1c1a16; /* cards, panels, bands */ --anan-d-band: #221f1a; /* what the cream bands become */ --anan-d-raised-2: #2a2620; /* things on top of those */ --anan-d-line: #38332b; --anan-d-text: #e8e4dc; --anan-d-muted: #a9a294; --anan-d-gold: #d2c196; --anan-d-taupe: #332e26; color-scheme: dark; /* --- the theme's own variables ----------------------------------- */ --wp-estate-background-color: var( --anan-d-bg ); --wp-estate-background-color-option: var( --anan-d-bg ); --wp_estate_content_back_color: var( --anan-d-bg ); --wp_estate_content_back_color-option: var( --anan-d-bg ); --wp_estate_content_area_back_color: var( --anan-d-raised ); --wp_estate_content_area_back_color-option: var( --anan-d-raised ); --wp-estate-font-color: var( --anan-d-muted ); --wp-estate-font-color-option: var( --anan-d-muted ); --wp_estate_headings_color: var( --anan-d-text ); --wp_estate_headings_color-option: var( --anan-d-text ); --wp_estate_link_color: var( --anan-d-text ); --wp_estate_link_color-option: var( --anan-d-text ); --wp-estate-header-color: var( --anan-d-bg ); --wp-estate-header-color-option: var( --anan-d-bg ); --wp-estate-menu-font-color: var( --anan-d-text ); --wp-estate-menu-font-color-option: var( --anan-d-text ); --wp-estate-menu-items-color: var( --anan-d-text ); --wp-estate-menu-items-color-option: var( --anan-d-text ); --wp-estate-menu-item-back-color: var( --anan-d-raised ); --wp-estate-menu-item-back-color-option: var( --anan-d-raised ); --wp-estate-sticky-menu-font-color: var( --anan-d-text ); --wp-estate-sticky-menu-font-color-option: var( --anan-d-text ); --wp-estate-menu-hover-font-color-megamenu: var( --anan-d-text ); --wp-estate-menu-hover-font-color-megamenu-option: var( --anan-d-text ); --wp-estate-top-bar-back: var( --anan-d-taupe ); --wp-estate-top-bar-back-option: var( --anan-d-taupe ); --wp-estate-top-bar-font: var( --anan-d-muted ); --wp-estate-top-bar-font-option: var( --anan-d-muted ); --wp-estate-unit-border-color: var( --anan-d-line ); --wp-estate-unit-border-color-option: var( --anan-d-line ); --wp_estate_unit_border_color-option: var( --anan-d-line ); --wp_estate_property_unit_color: var( --anan-d-raised ); --wp_estate_property_unit_color-option: var( --anan-d-raised ); --wp_estate_sidebar_widget_color: var( --anan-d-raised ); --wp_estate_sidebar_widget_color-option: var( --anan-d-raised ); --wp_estate_widget_sidebar_border_color: var( --anan-d-line ); --wp_estate_widget_sidebar_border_color-option: var( --anan-d-line ); --wp_estate_border_bottom_header_color: var( --anan-d-line ); --wp_estate_border_bottom_header_color-option: var( --anan-d-line ); --wp_estate_border_bottom_header_sticky_color: var( --anan-d-line ); --wp_estate_border_bottom_header_sticky_color-option: var( --anan-d-line ); --wp_estate_breadcrumbs_font_color: var( --anan-d-muted ); --wp_estate_breadcrumbs_font_color-option: var( --anan-d-muted ); --wp_estate_map_controls_back: var( --anan-d-raised ); --wp_estate_map_controls_back-option: var( --anan-d-raised ); --wp_estate_map_controls_font_color: var( --anan-d-text ); --wp_estate_map_controls_font_color-option: var( --anan-d-text ); --wp_estate_user_dashboard_content_back: var( --anan-d-raised ); --wp_estate_user_dashboard_content_back-option: var( --anan-d-raised ); --wp_estate_user_dashboard_menu_back: var( --anan-d-raised ); --wp_estate_user_dashboard_menu_back-option: var( --anan-d-raised ); --wp_estate_user_dashboard_menu_color: var( --anan-d-text ); --wp_estate_user_dashboard_menu_color-option: var( --anan-d-text ); --wp_estate_user_dashboard_package_back: var( --anan-d-raised ); --wp_estate_user_dashboard_package_back-option: var( --anan-d-raised ); --wp-estate-mobile-menu-background-color: var( --anan-d-raised ); --wp-estate-mobile-menu-background-color-option: var( --anan-d-raised ); --wp-estate-mobile-header-background-color: var( --anan-d-bg ); --wp-estate-mobile-header-background-color-option: var( --anan-d-bg ); --wp-estate-mobile-menu-border-color: var( --anan-d-line ); --wp-estate-mobile-menu-border-color-option: var( --anan-d-line ); /* * Each of the above is repeated with an -option suffix. WPResidence reads * every colour as var( --X-option, var( --X ) ), and the -option copy is the * one its admin panel writes - so on a configured site like this one the * plain name is only a fallback that never gets used, and redefining it * alone silently does nothing. Missing this is why the listing page kept a * white content panel after everything else had gone dark. */ /* Bootstrap's own tokens, which the theme leans on for forms and lists. */ --bs-body-bg: var( --anan-d-bg ); --bs-body-color: var( --anan-d-text ); --bs-border-color: var( --anan-d-line ); } /* ------------------------------------------------------------- ground --- */ html[data-anan-theme="dark"] body, html[data-anan-theme="dark"] .website-wrapper, html[data-anan-theme="dark"] .wpresidence_main_wrapper_class, html[data-anan-theme="dark"] .content_wrapper { background-color: var( --anan-d-bg ); color: var( --anan-d-text ); } html[data-anan-theme="dark"] h1, html[data-anan-theme="dark"] h2, html[data-anan-theme="dark"] h3, html[data-anan-theme="dark"] h4, html[data-anan-theme="dark"] h5, html[data-anan-theme="dark"] h6 { color: var( --anan-d-text ); } html[data-anan-theme="dark"] p, html[data-anan-theme="dark"] li, html[data-anan-theme="dark"] td, html[data-anan-theme="dark"] dd { color: var( --anan-d-muted ); } /* ------------------------------------------------------------- header --- */ html[data-anan-theme="dark"] .master_header, html[data-anan-theme="dark"] .master_header_sticky, html[data-anan-theme="dark"] .mobile_header { background-color: var( --anan-d-bg ) !important; border-bottom-color: var( --anan-d-line ); } /* Max Mega Menu writes its own colours with ids, so this needs the weight. */ html[data-anan-theme="dark"] #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link { background: transparent; color: var( --anan-d-text ); } html[data-anan-theme="dark"] #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item ul.mega-sub-menu { background: var( --anan-d-raised ); border-color: var( --anan-d-line ); } html[data-anan-theme="dark"] #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item ul.mega-sub-menu a.mega-menu-link { color: var( --anan-d-muted ); } html[data-anan-theme="dark"] #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item ul.mega-sub-menu a.mega-menu-link:hover { color: var( --anan-d-gold ); } /* The logo is drawn for a light ground, exactly as in the footer. */ html[data-anan-theme="dark"] .logo_wrapper img, html[data-anan-theme="dark"] .company_logo img { filter: brightness( 0 ) invert( 1 ); opacity: 0.94; } /* ------------------------------------------------------- cards, panels --- */ html[data-anan-theme="dark"] .property_listing, html[data-anan-theme="dark"] .property_listing_blog, html[data-anan-theme="dark"] .widget-container, html[data-anan-theme="dark"] .panel, html[data-anan-theme="dark"] .panel-body, html[data-anan-theme="dark"] .agent_detail, html[data-anan-theme="dark"] .single-content, html[data-anan-theme="dark"] .wpestate_property_description, html[data-anan-theme="dark"] .testimonial-container, html[data-anan-theme="dark"] .anan-agent-card { background-color: var( --anan-d-raised ); border-color: var( --anan-d-line ); color: var( --anan-d-text ); } html[data-anan-theme="dark"] .listing_details, html[data-anan-theme="dark"] .anan-agent-card__bio, html[data-anan-theme="dark"] .anan-agent-card__position, html[data-anan-theme="dark"] .testimonial-text { color: var( --anan-d-muted ); } html[data-anan-theme="dark"] .anan-agent-card__name, html[data-anan-theme="dark"] .blog_unit_title, html[data-anan-theme="dark"] .listing_title, html[data-anan-theme="dark"] .testimonial-author-line { color: var( --anan-d-text ); } /* ----------------------------------------------------- forms, buttons --- */ html[data-anan-theme="dark"] input:not([type="submit"]):not([type="button"]), html[data-anan-theme="dark"] select, html[data-anan-theme="dark"] textarea, html[data-anan-theme="dark"] .form-control, html[data-anan-theme="dark"] .form-select { background-color: var( --anan-d-raised-2 ); border-color: var( --anan-d-line ); color: var( --anan-d-text ); } html[data-anan-theme="dark"] ::placeholder { color: var( --anan-d-muted ); opacity: 0.75; } /* The theme's dropdown panels, wherever they appear. */ html[data-anan-theme="dark"] .wpresidence_dropdown .dropdown-menu, html[data-anan-theme="dark"] .dropdown-menu { background-color: var( --anan-d-raised-2 ); border-color: var( --anan-d-line ); color: var( --anan-d-text ); } /* ------------------------------------------------- this site's modules --- */ /* Top bar. The controls are already light-on-dark; only the ground moves. */ html[data-anan-theme="dark"] .top_bar_wrapper, html[data-anan-theme="dark"] .top_bar { background-color: var( --anan-d-taupe ); } html[data-anan-theme="dark"] .anan-tb { --anan-tb-panel: #26231e; } /* Footer. Already a deep taupe in light mode; it goes a step deeper so it still separates from the page above it. */ html[data-anan-theme="dark"] .anan-footer { --anan-f-bg: #1f1c17; } html[data-anan-theme="dark"] footer#colophon { background-color: #1f1c17; } /* The floating back-to-top button reads its own background, so it needs no rule here - but its default tile should be the light one on a dark site. */ html[data-anan-theme="dark"] a.backtop { background-color: #ece7dd !important; color: #221f1a !important; } html[data-anan-theme="dark"] a.backtop.anan-backtop-on-dark { background-color: #3a352d !important; color: #ece7dd !important; } /* Ask Ana dock. */ html[data-anan-theme="dark"] .ana-dock__panel, html[data-anan-theme="dark"] .ana-dock__bar { background-color: var( --anan-d-raised ); border-color: var( --anan-d-line ); color: var( --anan-d-text ); } /* Login / register modal. */ html[data-anan-theme="dark"] .modal_login_container, html[data-anan-theme="dark"] .login-register-modal-form-wrapper { background-color: var( --anan-d-raised ); color: var( --anan-d-text ); } /* --------------------------------------------------------- photographs --- */ /* * Nothing here touches images. A section whose ground is a photograph stays as * it was shot, and white text over it stays white and legible. The one thing * worth softening is the raw brightness of large images against a dark page. */ html[data-anan-theme="dark"] .property_listing img, html[data-anan-theme="dark"] .property_listing_blog img { filter: brightness( 0.92 ); } @media ( prefers-reduced-motion: reduce ) { html[data-anan-theme="dark"] * { transition-duration: 0.01ms !important; } } /* ------------------------------------- opaque grounds from our own modules --- */ /* * These whites are not Elementor's, so the generated stylesheet never sees * them - they are set by this site's own modules and had to be found by * sweeping the rendered page for large light surfaces. * * The scroll-stack ones are load-bearing: the homepage's first three sections * are sticky layers, and everything below them needs an opaque ground or the * taupe of the layer behind shows through. They must stay opaque here, just * dark - a transparent value would reintroduce the bug they were added to fix. */ html[data-anan-theme="dark"] body.anan-stack .elementor-element-explore-phuket-map, html[data-anan-theme="dark"] body.anan-stack .elementor-element-5300008a, html[data-anan-theme="dark"] body.anan-stack .elementor-element-1082f42e, html[data-anan-theme="dark"] body.anan-stack .elementor-element-b25239f { background-color: var( --anan-d-bg ); } /* The search bar's panel well. */ html[data-anan-theme="dark"] .anan-st__panels { background-color: var( --anan-d-raised ); } /* Agent card photo well - shows while the portrait loads. */ html[data-anan-theme="dark"] a.anan-agent-card__media { background-color: var( --anan-d-raised-2 ); } /* Ask Ana. */ html[data-anan-theme="dark"] .ana-dock__log, html[data-anan-theme="dark"] .ana-dock__row { background-color: var( --anan-d-raised ); color: var( --anan-d-text ); } html[data-anan-theme="dark"] .ana-dock__input { background-color: var( --anan-d-raised-2 ); color: var( --anan-d-text ); } /* Property card image well. */ html[data-anan-theme="dark"] .listing-unit-img-wrapper { background-color: var( --anan-d-raised-2 ); } /* The Phuket map is an inline SVG drawn in brand colours on white; on a dark page the island needs to sit on the dark ground, not on a white card. */ html[data-anan-theme="dark"] .ana-phuket-map, html[data-anan-theme="dark"] .apm-inner { background-color: transparent; } /* ---------------------------------------- colours the theme hard-codes --- */ /* * main.css is not run through the transform - it is a megabyte, and almost all * of it is already variable-driven. These are the few places in it that write a * literal colour on a surface big enough to matter. */ /* Max Mega Menu paints its own bar white, with an id. */ html[data-anan-theme="dark"] #mega-menu-wrap-primary, html[data-anan-theme="dark"] #mega-menu-wrap-primary #mega-menu-primary { background: var( --anan-d-bg ); } /* Article card image wells, behind the photograph while it loads. */ html[data-anan-theme="dark"] .property_listing_blog .blog_unit_image { background-color: var( --anan-d-raised-2 ); } /* Ask Ana message bubbles. */ html[data-anan-theme="dark"] .ana-msg__bubble { background-color: var( --anan-d-raised-2 ); color: var( --anan-d-text ); } /* The login modal's switch links sit on the modal's own ground. */ html[data-anan-theme="dark"] .login_modal_control a, html[data-anan-theme="dark"] .wpestate_register_form_agree_terms_label { color: var( --anan-d-muted ); } /* ------------------------------ remaining theme surfaces, found by sweep --- */ /* * Found by walking the rendered page in dark mode and listing every element * larger than 25,000px2 whose background is still light. Guessing from the * stylesheet would have missed the ones that only appear on a single template. */ html[data-anan-theme="dark"] .wpresidence-content-container-wrapper, html[data-anan-theme="dark"] .wpresidence_page_content_wrapper, html[data-anan-theme="dark"] .wpestate_top_property_navigation, html[data-anan-theme="dark"] .nav-prev-wrapper, html[data-anan-theme="dark"] .nav-next-wrapper, html[data-anan-theme="dark"] .listing_filters_head { background-color: var( --anan-d-raised ); border-color: var( --anan-d-line ); color: var( --anan-d-text ); } /* The price bubble on the map. */ html[data-anan-theme="dark"] .openstreet_map_price_infobox, html[data-anan-theme="dark"] .info_details { background-color: var( --anan-d-raised-2 ); color: var( --anan-d-text ); } /* * The map canvas itself is left alone. Its #ddd is the colour between the * OpenStreetMap tiles, and darkening the container without darkening the tiles * would just put a dark seam around a bright map. A dark map needs a dark tile * layer, which is a provider setting, not CSS. */ /* Login and register modal - only visible once opened, so it does not show up in a sweep of the page as loaded. */ html[data-anan-theme="dark"] .login_modal_control a, html[data-anan-theme="dark"] .login_register_div_title, html[data-anan-theme="dark"] .wpestate_register_form_agree_terms_label, html[data-anan-theme="dark"] .wpestate_register_form_agree_terms_label a, html[data-anan-theme="dark"] .title_compare { color: var( --anan-d-text ); } /* ------------------------------------ mu-plugin widgets on area guides --- */ /* * The area-guide widgets print their CSS inside a