/* ========================================================================== Luxana — Theme Variables ========================================================================== Single source of truth for every colour used on the public site (styles.css, luxana-enhancements.css, style.css). Every hardcoded hex / rgb() value in those three files has been replaced with a var(--token) reference to a name defined here (or in fonts.css — see below), so the whole palette can be re-pointed in one place. Loaded in right after fonts.css and before styles.css — see app/Views/components/head.php. Brand tokens (--primary, --gold, --ivory, --graphite, --bronze) already lived in public/assets/fonts/fonts.css before this file existed and are left there as the single source of truth for them — they are NOT redeclared here, only extended with -rgb companions for use inside rgba(). admin.css has its own separate copy of these for the admin/CRM pages and is intentionally not wired to this file. ----- Dark/light theme support ----- Toggled by setting data-theme="dark" / data-theme="light" on (see public/assets/js/theme-toggle.js — reads/writes localStorage, falls back to prefers-color-scheme, and runs from an inline snippet so the attribute is set before first paint, avoiding a light-mode flash). --primary, --gold, --ivory, --graphite, --bronze (fonts.css) and --cream, --white, --black below are brand/literal tokens and are NOT redeclared for dark mode — they keep the same value in both themes. Several of them are deliberately overloaded (e.g. --white is both "card background" and "text sitting on an already-dark, permanently-branded surface" like the footer or a hover-filled button; --primary is both "deep-emerald button/ section background" and, separately, some heading text colour; --ivory is both "page background" and "light text on a permanently-dark property- card footer"). Flipping those literal tokens for dark mode would fix one role and silently break the other (invisible text). So instead of flipping the literal tokens, the handful of usages that truly needed to invert were re-pointed at the *role* tokens below, and only those role tokens carry a dark override: --bg-page body's page canvas (was var(--ivory) directly) --bg-surface card/module/dropdown/modal backgrounds (was var(--white)) --text-heading heading/title/price text sitting on ambient bg (was var(--primary)) --text-body default body copy, incl. //.text-black (was var(--graphite)) --cream stays unflipped on purpose too: every remaining use of it is a 1px divider, scrollbar thumb, slider track or small tab/pill chip, never a large surface — a light hairline or chip on a dark card reads as a subtle accent, not a bug. --slate/--gray/--slate-light (.text-variant-1/2/3), --charcoal/--gray-dark (.text-black-2/3) and --navy (hero search input, modal close icon) *are* redeclared directly below since every real usage of each is plain text colour — no bg-role split needed for those. ========================================================================== */ :root { /* ---- rgb companions for the fonts.css brand tokens (for rgba() use) ---- */ --primary-rgb: 4, 49, 51; --gold-rgb: 205, 179, 139; --ivory-rgb: 247, 244, 239; --graphite: #182223; --sand-gold: #cdb389; /* warm accent colour */ /* ---- core neutrals ---- */ --white: #ffffff; --white-rgb: 255, 255, 255; --black: #000000; --black-rgb: 0, 0, 0; --cream: #efe8df; /* warm page background */ --slate: #5c6368; /* muted secondary text (.text-variant-1) */ --gray: #a3abb0; /* neutral border / secondary text (.text-variant-2) */ --slate-light: #8e8e93; /* tertiary muted text (.text-variant-3) */ /* ---- brand shades (Deep Emerald / Sand Gold family) ---- */ --primary-dark: #032427; --primary-darker: #013433; --primary-light: #064042; --primary-muted: #22302f; --primary-muted-light: #4a5a5b; --champagne: #efdcc8; /* Soft Champagne, matches admin.css */ --gold-dark: #c59a35; --cream-light: #f2efe8; --off-white: #fdfcfa; --graphite-light: #283c39; --cream-rgb: #fffbec; /* ---- status colours ---- */ --success: #198754; --success-bright: #25c55b; --danger: #c72929; --danger-bright: #ed2027; --danger-bright-rgb: 237, 32, 39; --orange: #ee6742; --orange-rgb: 238, 103, 66; --purple: #6e55ff; --warning-bg: #fff3cd; /* ---- neutral grey scale (lightest to darkest) ---- */ --border-light: #dddddd; /* default 1px hairline border */ --gray-50: #f4f4f4; --gray-100: #ededed; --gray-150: #efefef; --gray-200: #ececec; --gray-300: #d9d9d9; --gray-400: #cccccc; --gray-500: #b8b8b8; --gray-600: #a7a7a7; --gray-650: #999999; --gray-700: #8d8d8d; --gray-800: #444444; --gray-800-rgb: 68, 68, 68; --gray-900: #212121; --gray-900-rgb: 33, 33, 33; --gray-dark: #3a3a3c; /* .text-black-3 */ --charcoal: #1c1c1e; /* .text-black-2 / near-black surfaces */ /* ---- cool / slate-tinted greys ---- */ --gray-alt: #a2a9ae; --slate-cool: #8a8aa0; --slate-deep: #69757b; --slate-muted: #64666c; --slate-mid: #7c818b; --slate-pale: #cbd3d6; /* light text on dark cards, style.css */ --slate-border: #e1e4e8; --slate-fog: #e5e5ea; --pale-teal: #dce2e3; --gray-sage: #9aa6a4; --blue-mist: #f0f2f7; --blue-tint: #eef5ff; /* ---- dark navy tints (shadows, overlays, dark surfaces) ---- */ --navy: #161e2d; --navy-rgb: 22, 30, 45; --shadow-teal: #07171e; --shadow-teal-rgb: 7, 23, 30; --overlay-navy: #0b2132; --overlay-navy-rgb: 11, 33, 50; --navy-deep: #0f1f2a; --gray-900-cool: #111827; /* Tailwind gray-900 value */ --slate-900: #0f172a; /* Tailwind slate-900 value */ /* ---- named aliases matching the existing .text-variant-1/2/3 classes ---- (--variant-2 and --white-color-opicity-two were referenced by styles.css before this file existed but were never actually defined anywhere — undefined custom properties resolve to nothing, so that border/icon colour was silently invalid. Defined properly here.) */ --variant-1: var(--slate); --variant-2: var(--gray); --variant-3: var(--slate-light); --white-color-opicity-two: rgba(var(--white-rgb), 0.2); /* ---- role tokens ---- These are the "does it flip for dark mode" layer described above. --bg-page/--bg-surface/--text-heading/--text-body are live — styles.css, style.css and luxana-enhancements.css read through them wherever a background/heading/body-text usage of --ivory/--white/--primary/ --graphite genuinely needed to invert (see the dark block below). --bg-dark-section/--text-muted/--border-color/--link-color/--accent-color remain aliases only (no consumer rewritten to use them yet) — every current use of --primary-as-background, --slate, --gray and --gold already behaves correctly as-is in both themes without going through an alias, so there was nothing to repoint. */ --bg-page: var(--ivory); --bg-surface: var(--white); --bg-dark-section: var(--primary); --text-heading: var(--primary); --text-body: var(--graphite); --text-muted: var(--slate); --border-color: var(--gray); --link-color: var(--primary); --accent-color: var(--gold); /* ---- shared typography scale ---- */ --font-size-body: 16px; --font-size-secondary: 14px; --font-size-small: 13px; --font-size-h1: 56px; --font-size-h2: 40px; --font-size-h3: 24px; } /* ========================================================================== Dark theme overrides ========================================================================== */ :root[data-theme="dark"] { /* page canvas + card/module/dropdown/modal surfaces */ --bg-page: #001b1d; --bg-surface: #12211e; /* default text (body copy, links, .text-black) and heading/title/price text — kept as two tiers, heading slightly brighter, matching the light-theme relationship between --primary (near-black) and --graphite (dark grey) headings/body */ --text-heading: #f4eedd; --text-body: #d6d0c1; /* muted text tiers (.text-variant-1/2/3) */ --slate: #adb5b0; --gray: #8b938e; --slate-light: #7e8681; /* .text-black-2/3 */ --charcoal: var(--text-heading); --gray-dark: var(--text-body); /* hero search input text, modal close icon, enquiry status text */ --navy: var(--text-body); } /* .form-control:focus uses var(--primary) (unflipped — the same deep-emerald used for permanently-dark buttons/sections elsewhere) as its focus-ring border. That reads fine against the light --bg-surface it was designed for, but is too close in value to the new dark --bg-surface to work as a focus indicator — swapped to --gold, which the fonts.css brand tokens already promise "reads fine on dark or light". */ [data-theme="dark"] .form-control:focus { border-color: var(--gold) !important; } /* Sell page "Premium Seller Enquiry" card (sell.php): a bespoke component with its own literal, never-shared colour tokens (--off-white, --primary-muted, --primary-muted-light, --gray-sage — each used nowhere else in the codebase) instead of the --bg-surface/--text-* roles the rest of the form system reads through. Its card shell already flips (background-color: var(--bg-surface)), but the paragraph text and the input/select fields inside it didn't, leaving a bright white form sitting inside an otherwise-dark card. Overridden directly rather than repointing the source declarations, since these 4 tokens exist solely for this component and touching them here can't affect anything else. */ [data-theme="dark"] .sell-premium-form-wrapper .sell-premium-header p { color: var(--text-body); } [data-theme="dark"] .sell-premium-form-wrapper .form-group input[type="text"], [data-theme="dark"] .sell-premium-form-wrapper .form-group input[type="email"], [data-theme="dark"] .sell-premium-form-wrapper .form-group input[type="tel"], [data-theme="dark"] .sell-premium-form-wrapper .form-group select { color: var(--text-body); background-color: var(--bg-page); } [data-theme="dark"] .sell-premium-form-wrapper .form-group input[type="text"]::placeholder, [data-theme="dark"] .sell-premium-form-wrapper .form-group input[type="email"]::placeholder, [data-theme="dark"] .sell-premium-form-wrapper .form-group input[type="tel"]::placeholder { color: var(--gray); } /* The select's dropdown-arrow is a hand-drawn SVG data: URI with the arrow colour baked in as a literal hex (stroke='%23043133', i.e. --primary) — data: URIs can't reference CSS custom properties, so the only way to re-colour it for dark mode is a second copy of the same SVG with a light stroke. */ [data-theme="dark"] .sell-premium-form-wrapper .form-group select { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%23f4eedd' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* ========================================================================== Manual dark-mode colour refinements ========================================================================== Drafted live in browser DevTools (Sources panel — never saved to disk) against the dark theme above, then folded in here as dark-only overrides so the light theme stays exactly as it already was. Two of the original edits landed on shared utility classes (.text-variant-1, .list-star .icon) used sitewide, not just on the testimonial card being tweaked — those are rescoped to .box-tes-item specifically below so the classes' existing (correct) dark behaviour elsewhere is undisturbed. */ /* Headings get their own, slightly dimmer dark-mode tone instead of inheriting --text-body — anything with a more specific colour rule already (card titles, prices, etc., routed through --text-heading) still wins over this, exactly as in the light-theme base rule. */ [data-theme="dark"] .title-large, [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(--sand-gold); } /* Primary buttons (Sign In, Search, Submit Property, "Book a Consultation", etc.): gold fill with dark ink instead of the deep emerald / white pairing used in light mode — pops more against the dark page. */ [data-theme="dark"] .tf-btn.primary, [data-theme="dark"] .header-account .tf-btn.primary { background-color: #cdb38b; color: #001b1d; } [data-theme="dark"] .tf-btn.primary svg path { color: #f4eedd; } /* :hover already flips to gold-bg/dark-text in both themes (base rule), but its icon color was still reading through --text-heading, which is light in dark mode — dark-on-gold there, not light-on-gold. */ [data-theme="dark"] .tf-btn.primary:hover .icon, [data-theme="dark"] .tf-btn.primary:hover svg path { color: var(--ivory) !important; } [data-theme="dark"] .tf-btn.primary:hover { background-color: var(--primary); border-color: var(--gold); color: #ffffff; } /* Testimonial card: tan/bronze surface instead of the usual dark --bg-surface, with dark ink for its icon/quote/rating so it reads as a distinct, warm accent card against the dark page rather than just another dark panel. */ [data-theme="dark"] .box-tes-item { background-color: var(--sand-gold); } [data-theme="dark"] .box-tes-item .icon-quote { color: #172121; } [data-theme="dark"] .widget-filter-search{ border: 1px solid #cdb38063 !important; } [data-theme="dark"] .box-tes-item .note { color: var(--white); } [data-theme="dark"] .box-tes-item .text-variant-1 { color: #172121; } [data-theme="dark"] .box-tes-item .list-star .icon { color: #172121; } /* Swiper pagination dots: tan/bronze active state instead of deep emerald, so the active dot stays visible against a dark background. */ [data-theme="dark"] .sw-pagination .swiper-pagination-bullet-active { background-color: #b39e7c !important; } [data-theme="dark"] .sw-pagination .swiper-pagination-bullet::before { border-color: #b39e7c; } /* "Recommended For You" category pills (homepage): explicit dark ink on the gold resting state (previously relied on inherited body text colour, which is light in dark mode — light-on-gold). Active/hover kept as a same-value gold+dark-ink pairing, matching the resting state with no separate hover accent. */ [data-theme="dark"] .nav-tab-recommended .nav-link-item { color: #000; } [data-theme="dark"] .nav-tab-recommended .nav-link-item.active, [data-theme="dark"] .nav-tab-recommended .nav-link-item:hover { border: 1px solid var(--sand-gold); color: var(--sand-gold); } /* Homepage hero search bar: its own distinct dark shade rather than the shared --bg-surface value (kept separate so every other card's surface colour is unaffected). */ [data-theme="dark"] .hero-property-search { background-color: #0d1c19; } [data-theme="dark"] .homelengo-box { border: 1px solid #cdb38b73; } [data-theme="dark"] .flat-recommended .homelengo-box .archive-bottom { background-color: var(--graphite); } [data-theme="dark"] .box-benefit { background-color: var(--graphite-light); } [data-theme="dark"] .description { color: var(--cream-rgb); } [data-theme="dark"] .review-read-more { color: var(--graphite); } [data-theme="dark"] .box-tes-item .info h6 { color: var(--graphite); } [data-theme="dark"] .flat-agents .agent-card, [data-theme="dark"] .flat-agents .agents-nav { background-color: var(--graphite-light); } [data-theme="dark"] .flat-section { background: var(--graphite); } [data-theme="dark"] body { background: var(--graphite); } .box-agent .content { display: flex; align-items: center; justify-content: center; padding: 8px; flex-direction: column; } .box-agent .content .info { display: flex; align-items: center; justify-content: center; flex-direction: column; } [data-theme="dark"] .luxana-agents-grid .box-agent { background-color: var(--graphite-light) !important; padding: 10px !important; } [data-theme="dark"] .footer { background-color: var(--graphite); } [data-theme="dark"] .box-benefit .icon svg * { stroke: #ffffff !important; } [data-theme="dark"] .box-benefit .icon svg path { stroke: #ffffff !important; fill: none !important; } [ data-theme="dark"] .footer .box-icon.social:hover{ background-color: var(--sand-gold); } [data-theme="dark"] .footer .wd-social span{ color: var(--sand-gold); } [data-theme="dark"] .text-variant-2,[data-theme="dark"] .footer .content-footer-bottom .copyright{ color: var(--sand-gold); } [data-theme="dark"] .text-white{ color: var(--sand-gold) !important; } [data-theme="dark"] .progress-wrap::after{ color: var(--graphite) !important; } [data-theme="dark"] .footer .content-footer-bottom .copyright{ color: var(--sand-gold); } [data-theme="dark"] .abt-ref-accordion-item{ border: 1px solid #cdb389; border-radius: 16px; overflow: hidden; background-color: #283c39; } [data-theme="dark"] .hero-property-search .inner-group .form-style .nice-select::after { border-color: var(--ivory); } [data-theme="dark"] .noUi-connect { background-color: var(--sand-gold); } [data-theme="dark"] .noUi-horizontal .noUi-handle { border: 2px solid var(--sand-gold); background-color: var(--sand-gold); } [data-theme="dark"] .tf-checkbox:checked { border-color: var(--sand-gold); background-color: var(--sand-gold); } [data-theme="dark"] .breadcrumbs { color: #f7f4ef !important; font-size: 14px; line-height: 19px; font-weight: 500; letter-spacing: 0.8px; } [data-theme="dark"] .text-subtitle { color: var(--graphite) !important; } /* [data-theme="dark"] .box-title .title { color: var(--graphite) !important; } */ [data-theme="dark"] .flat-img-with-text-v2 .box-title .desc { color: var(--graphite) !important; } [data-theme="dark"] .abt-ref-accordion-header::before { background-color:var(--ivory); } [data-theme="dark"] .abt-ref-accordion-header::after { background-color:var(--ivory); } [data-theme="dark"] .abt-ref-accordion-header { color: var(--text-heading); } [data-theme="dark"] .text-again { color: var(--sand-gold) !important; } [ data-theme="dark"] .tf-btn.primary { border-color: var(--graphite) !important; } [data-theme="dark"] .arrow-change{ color: var(--graphite) !important; } [data-theme="dark"] .text-new { color: var(--ivory) !important; } [data-theme="dark"] .new-sand{ color: var(--sand-gold) !important; } [data-theme="dark"] .new-graphite{ color: var(--graphite) !important; } [data-theme="dark"] .tf-btn.primary .icon{ color: var(--graphite) !important; } [data-theme="dark"] .btn-light{ color: var(--graphite) !important; } [data-theme="dark"] .btn-again{ color: var(--ivory) !important; background-color: var(--panel-bg) !important; } [data-theme="dark"] .btn-again:hover{ color: var(--panel-bg) !important; background-color: var(--sand-gold) !important; } [data-theme="dark"] .btn-light{ color: var(--graphite) !important; } [data-theme="dark"] .icon-color{ color: var(--ivory) !important; } [data-theme="dark"] .ltp-card-inner{ background-color: var(--cream-rgb) !important; } [data-theme="dark"] input[name="name"]::placeholder { color: #b8c2c2 !important; opacity: 1; } [data-theme="dark"] .main-header.header-style-2.is-fixed { background-color: var(--graphite) !important; } [data-theme="dark"] .box-title.new-sand{ color: var(--sand-gold) !important; } /* ========================================================================== Dark-theme consistency pass -------------------------------------------------------------------------- These are deliberately appended after the earlier dark refinements. They only resolve dark-mode cascade conflicts; the light palette and layout are left untouched. ========================================================================== */ :root[data-theme="dark"] { --bg-page: var(--graphite); --bg-surface: var(--primary-muted); --header-background: var(--graphite); --border-color: rgba(var(--gold-rgb), 0.24); } /* The regular header retains its existing light-mode inline colour through --header-background. On the transparent home header this selector only applies after the scroll script adds .is-fixed. */ [data-theme="dark"] #header.main-header.is-fixed, [data-theme="dark"] .main-header.header-style-2.is-fixed { background-color: var(--graphite) !important; border-bottom-color: rgba(var(--gold-rgb), 0.2); box-shadow: 0 4px 18px rgba(var(--black-rgb), 0.24); } /* Header navigation and dropdowns use the same readable tones as the rest of the dark interface, including the generated dropdown arrows. */ [data-theme="dark"] .main-header.header-style-2:not(.is-fixed) .main-menu .navigation > li > a { color: var(--white) !important; } [data-theme="dark"] #header.is-fixed .web_menu li a { color: var(--sand-gold) !important; } [data-theme="dark"] .main-header .main-menu .navigation > li > a::before { background-color: var(--sand-gold); } [data-theme="dark"] .main-header .main-menu .navigation > li > ul, [data-theme="dark"] .main-header .main-menu .navigation > li > ul > li > ul { background-color: var(--primary-muted); border-color: rgba(var(--gold-rgb), 0.24); box-shadow: 0 12px 28px rgba(var(--black-rgb), 0.28); } [data-theme="dark"] .main-header .main-menu .navigation > li > ul::before { border-top-color: var(--primary-muted); } [data-theme="dark"] .main-header .main-menu .navigation > li > ul > li > a, [data-theme="dark"] .main-header .main-menu .navigation > li > ul > li.dropdown2 > a::after, [data-theme="dark"] .main-header .main-menu .navigation > li > ul > li > ul > li > a { color: var(--text-body) !important; } [data-theme="dark"] .main-header .main-menu .navigation > li > ul > li:hover > a, [data-theme="dark"] .main-header .main-menu .navigation > li > ul > li.current > a, [data-theme="dark"] .main-header .main-menu .navigation > li > ul > li > ul > li:hover > a { color: var(--sand-gold) !important; background-color: var(--graphite); } /* Keep every form control, including native selects and custom select lists, readable against graphite surfaces. */ [data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select, [data-theme="dark"] .form-control, [data-theme="dark"] .nice-select, [data-theme="dark"] .nice-select .list { background-color: var(--primary-muted); color: var(--text-body); border-color: rgba(var(--gold-rgb), 0.24); } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder, [data-theme="dark"] .form-control::placeholder { color: var(--gray); opacity: 1; } [data-theme="dark"] .nice-select::after { border-color: var(--text-body); } [data-theme="dark"] .nice-select .option:hover, [data-theme="dark"] .nice-select .option.focus, [data-theme="dark"] .nice-select .option.selected.focus { background-color: var(--graphite); color: var(--sand-gold); } /* Component surfaces which carry a literal light background in their base styles are normalised to the existing graphite panel scale. */ [data-theme="dark"] .flat-blog-item, [data-theme="dark"] .box-house, [data-theme="dark"] .box-agent.style-list, [data-theme="dark"] .modal-content, [data-theme="dark"] .abt-ref-accordion-item { background-color: var(--primary-muted) !important; border-color: rgba(var(--gold-rgb), 0.24); } [data-theme="dark"] .luxana-enquiry-dialog{ background-color: var(--graphite); } [data-theme="dark"] .flat-blog-item, [data-theme="dark"] .box-house, [data-theme="dark"] .box-agent.style-list, [data-theme="dark"] .abt-ref-accordion-item { box-shadow: 0 10px 26px rgba(var(--black-rgb), 0.16); } /* Correct earlier dark-only colour collisions: text intended as white stays high-contrast, while gold is reserved for accents and interactive states. */ [data-theme="dark"] .box-tes-item .note, [data-theme="dark"] .footer .content-footer-bottom .menu-bottom a { color: var(--ivory) !important; } [data-theme="dark"] .text-white{ color: var(--sand-gold) !important; } [data-theme="dark"] .footer { background-color: var(--graphite); } [data-theme="dark"] .footer .wd-social span, [data-theme="dark"] .footer .content-footer-bottom .menu-bottom a:hover, [data-theme="dark"] .footer .box-icon.social:hover { color: var(--sand-gold); } /* Accent testimonial cards need dark, not white, body copy for contrast. */ [data-theme="dark"] .box-tes-item .note, [data-theme="dark"] .box-tes-item .info h6, [data-theme="dark"] .box-tes-item .text-variant-1, [data-theme="dark"] .box-tes-item .list-star .icon { color: var(--graphite) !important; } /* Utility combinations used as section eyebrows must not inherit the old graphite override, which is too dark for the graphite page canvas. */ [data-theme="dark"] .text-subtitle.text-primary { color: var(--sand-gold) !important; } [data-theme="dark"] .ltp-card-inner { background-color: #cdb374db !important; border-color: rgba(var(--gold-rgb), 0.24); } /* The off-canvas navigation is a complete dark surface, including its labels, separators, expand controls and close affordance. */ [data-theme="dark"] .mobile-menu-visible .mobile-menu .menu-box, [data-theme="dark"] .mobile-menu .nav-logo { background-color: var(--graphite); } [data-theme="dark"] .mobile-menu .navigation li > a, [data-theme="dark"] .mobile-menu .navigation li.dropdown2 .dropdown2-btn, [data-theme="dark"] .mobile-menu .navigation li > ul > li > a { color: var(--text-body); } [data-theme="dark"] .mobile-menu .navigation li:hover > a, [data-theme="dark"] .mobile-menu .navigation li.current > a, [data-theme="dark"] .mobile-menu .navigation li.current li.current > a { color: var(--sand-gold); } [data-theme="dark"] .mobile-menu .navigation li, [data-theme="dark"] .mobile-menu .navigation li > ul, [data-theme="dark"] .mobile-menu .navigation li > ul > li { border-color: rgba(var(--gold-rgb), 0.18); } [data-theme="dark"] .footer .box-icon.social:hover { background-color: #cdb38966; border-color: var(--sand-gold); } [data-theme="dark"] .footer .box-icon.social:hover .icon { color: var(--graphite); } [data-theme="dark"] .luxana-agent-grid .box-agent{ border: #ececec57; } [data-theme="dark"] .agtd-card{ background-color: var(--graphite); } [data-theme="dark"] .homelengo-box .archive-bottom { background-color: var(--graphite); } [data-theme="dark"] .agtd-similar-block { background-color: var(--graphite); } [data-theme="dark"] .why { background-color: var(--graphite); } [data-theme="dark"] .faq { background-color: var(--graphite); } [data-theme="dark"] .tc { background-color: var(--graphite); } [data-theme="dark"] .nav-tab-filter .nav-link-item:hover { background-color: var(--sand-gold); } [data-theme="dark"] .nav-tab-filter .nav-link-item.active svg path { fill: #c3c3c3; } /* ========================= DARK THEME PRELOADER ========================= */ [data-theme="dark"] .preload-container { background: #22302F !important; } [data-theme="dark"] .preload-container .icon { color: var(--cream) !important; } [data-theme="dark"] .preload-container .spinner { border-color: transparent !important; border-top-color: var(--cream)!important; } [data-theme="dark"] .hero-property-search .inner-group .form-style { border: 1px solid #cdb3895c; } [data-theme="dark"] .hero-property-search .filter-advanced { border: 1px solid #cdb3895c; } [data-theme="dark"] .permissions-coming-soon { background: var(--graphite) !important; } [data-theme="dark"] .single-property-contact .luxana-agent-email { background-color: #22302f !important; color: #ffffff !important; } [data-theme="dark"] .single-property-contact .luxana-agent-email i { color: #ffffff !important; } [data-theme="dark"] .single-property-contact .luxana-agent-email:hover { background-color: var(--sand-gold) !important; color: #043133 !important; } [data-theme="dark"] .single-property-contact .luxana-agent-email:hover i { color: #043133 !important; } [data-theme="dark"] .email-inquiry-popup .email-inquiry-popup-field:focus, [data-theme="dark"] .email-inquiry-popup .email-inquiry-popup-field:active, [data-theme="dark"] .email-inquiry-popup .email-inquiry-popup-phone:focus-within, [data-theme="dark"] .email-inquiry-popup .email-inquiry-popup-phone:active { border-color: #d9d9d9 !important; outline: none; box-shadow: none; } [data-theme="dark"] .email-inquiry-popup .email-inquiry-popup-phone-field:focus, [data-theme="dark"] .email-inquiry-popup .email-inquiry-popup-phone-field:active { border-color: transparent !important; outline: none; box-shadow: none; } [data-theme="dark"] .email-inquiry-popup .email-inquiry-popup-field:-webkit-autofill, [data-theme="dark"] .email-inquiry-popup .email-inquiry-popup-phone-field:-webkit-autofill { -webkit-text-fill-color: var(--text-body) !important; -webkit-box-shadow: 0 0 0 1000px var(--bg-surface) inset !important; border-color: #d9d9d9 !important; transition: background-color 9999s ease-out 0s; } [data-theme="dark"] .email-inquiry-popup-submit{ background-color: var(--sand-gold) !important; }