/*------------------------------------------------------------------*\ COMPONENTS - Dark Mode (Elementor areas) IMPLEMENTATION-PLAN §10 — Caminho A (toggle proprio, sem plugin) Scoped on [data-theme="dark"] (set on by the theme toggle / prefers-color-scheme — theme-toggle.js + anti-flash inline script). Colour rule (per cliente): the brand uses #303030 for titles, descriptions and buttons. NO green (--color-primary) in dark. In dark, #303030 is INVERTED → ~#D0D0D0 (token --neutral-100). Buttons invert fully: light surface (#D0D0D0) + dark label (#303030). `!important` kept (Elementor writes inline/kit styles). Exceptions ([apartments_listing], building map) keep their palette. \*------------------------------------------------------------------*/ /* ── Base surfaces ── */ [data-theme="dark"] .elementor-section, [data-theme="dark"] .section-dark-mode, [data-theme="dark"] .e-con-inner { background-color: #303030 !important; /* Figma dark bg */ color: var(--neutral-100) !important; /* #D0D0D0 */ } /* The apartments section wrapper stays white in dark — and so do its inner Elementor containers (the generic rule above still matches the descendant .e-con/.e-con-inner that don't carry the class). */ [data-theme="dark"] .rb-table-apts, [data-theme="dark"] .rb-table-apts .e-con, [data-theme="dark"] .rb-table-apts .e-con-inner, [data-theme="dark"] .rb-table-apts .elementor-section { background-color: #ffffff !important; color: initial !important; } [data-theme="dark"] .elementor-location-header, [data-theme="dark"] .elementor-location-header .e-con, [data-theme="dark"] .elementor-location-header .e-con-inner, [data-theme="dark"] .elementor-location-header .elementor-section { background-color: transparent !important; color: initial !important; } [data-theme="dark"] .rb-featured-hero, [data-theme="dark"] .rb-featured-hero .e-con, [data-theme="dark"] .rb-featured-hero .e-con-inner, [data-theme="dark"] .rb-featured-hero .elementor-section { background-color: transparent !important; color: initial !important; } /* ── Headings (eram #303030 → inverso) ── */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6, [data-theme="dark"] .elementor-heading-title, [data-theme="dark"] .elementor-location-footer .elementor-heading-title { color: #ffffff !important; } /* ── Descriptions / body copy (eram #303030 → inverso) ── */ [data-theme="dark"] p, [data-theme="dark"] .elementor-widget-text-editor, [data-theme="dark"] .elementor-icon-list-text, [data-theme="dark"] .elementor-icon-box-description { color: var(--neutral-100) !important; } /* ── Links (not buttons; table/map links untouched) ── */ [data-theme="dark"] a:not(.elementor-button):not(.apt-view-link):not(.bm-polygon) { color: var(--neutral-100) !important; } [data-theme="dark"] a:not(.elementor-button):not(.apt-view-link):hover, [data-theme="dark"] a:not(.elementor-button):not(.apt-view-link):focus-visible { color: var(--neutral-300) !important; } /* ── Buttons — inverted (#303030 → light surface, dark label). NO green ── */ [data-theme="dark"] .rb-scroll-button .elementor-button { background-color: transparent !important; } [data-theme="dark"] .rb-scroll-button .elementor-button:hover { background-color: transparent !important; color: #fff !important; } [data-theme="dark"] .elementor-button:hover, [data-theme="dark"] .elementor-button:focus-visible { background-color: var(--neutral-200); /* #C4C4C4 */ color: #303030 !important; } /* .c-button — label branco (fundo transparente p/ o branco ler no escuro) */ [data-theme="dark"] .c-button .elementor-button { background-color: #fff !important; color: #303030 !important; } /* .c-secondary-button — glass, label #D0D0D0. */ [data-theme="dark"] .c-secondary-button .elementor-button { background: transparent !important; color: #fff !important; } /* ── Form fields (Elementor Pro forms) ── */ [data-theme="dark"] .elementor-field-group input:not([type="submit"]), [data-theme="dark"] .elementor-field-group textarea, [data-theme="dark"] .elementor-field-group select { background-color: transparent !important; /* #141414 */ color: var(--input-text) !important; /* #FFFFFF */ border-color: var(--input-border) !important; /* #262626 */ } [data-theme="dark"] .elementor-field-group input::placeholder, [data-theme="dark"] .elementor-field-group textarea::placeholder { color: var(--input-placeholder) !important; /* #A6A6A6 */ } /* ── Cards / boxes ── */ [data-theme="dark"] .elementor-widget-container[class*="card"], [data-theme="dark"] .e-con[class*="card"], [data-theme="dark"] .elementor-widget-image-box .elementor-image-box-content { background-color: var(--neutral-800) !important; /* #1c1c1c */ border-color: var(--neutral-700) !important; /* #2E2E2D */ } /* Icon box — wrapper and content stay transparent (no card fill). */ [data-theme="dark"] .elementor-widget-icon-box .elementor-icon-box-wrapper, [data-theme="dark"] .elementor-widget-icon-box .elementor-icon-box-content { background-color: transparent !important; border-color: transparent !important; } /* ── Dividers / separators ── */ [data-theme="dark"] .elementor-divider, [data-theme="dark"] .elementor-divider-separator { border-color: var(--neutral-700) !important; } /* ── Icons (currentColor adapts cleanly) ── */ [data-theme="dark"] .elementor-icon svg, [data-theme="dark"] .elementor-icon i { color: var(--neutral-100) !important; fill: currentColor !important; } /* Logo monocromatico → branco no dark (funciona com PNG/SVG/JPG). */ [data-theme="dark"] .rb-logo img { filter: brightness(0) invert(1) !important; } /* ── Nav menu items ── */ [data-theme="dark"] .menu-item a, [data-theme="dark"] .elementor-nav-menu .elementor-item { color: var(--neutral-100) !important; } [data-theme="dark"] .menu-item a:hover, [data-theme="dark"] .elementor-nav-menu .elementor-item:hover { color: var(--neutral-300) !important; } /* ── Newsletter form fields — stay transparent (glass) ── */ [data-theme="dark"] .form-newsletter .elementor-field { background-color: transparent !important; } /* ────────────────────────────────────────────────────────────────── EXCEPTIONS — light-isolated components keep their own palette. ────────────────────────────────────────────────────────────────── */ /* [apartments_listing] has its OWN dark variant (token-driven) in components/apartments-listing.css — do not flatten it here. Only stop the generic Elementor-area rules from leaking into it. */ [data-theme="dark"] .apt-listing .e-con, [data-theme="dark"] .apt-listing .e-con-inner { background-color: transparent !important; color: inherit !important; } [data-theme="dark"] .apt-listing a:not(.apt-view-link), [data-theme="dark"] .apt-listing p { color: inherit !important; } [data-theme="dark"] .bm-viewer, [data-theme="dark"] .bm-viewer .e-con { background-color: initial !important; }