/* ===================================================================== * Miami Emlak — Light Mode Theme * ===================================================================== * * Drop-in stylesheet that flips the entire site to a light theme when * has the .light-mode class. Toggling is handled by theme-toggle.js * which persists user choice in localStorage and adds a floating button. * * Architecture: * 1. Override the semantic CSS custom properties (var(--text-primary), * var(--surface-*), var(--m-*), var(--glass), etc.) so any rule that * uses them automatically flips. * 2. Direct overrides for body bg/color and a handful of components * that hard-code dark colors instead of using variables. * 3. A few media filters for the hero video and white-on-transparent * logos so contrast remains correct on a light background. * * IMPORTANT: every rule is scoped under body.light-mode to leave the * default dark theme 100% untouched. * ================================================================== */ /* ------------------------------------------------------------------- * 1. SEMANTIC TOKEN OVERRIDES * ----------------------------------------------------------------- */ body.light-mode { /* Netflix-Premium token system used by index.html ----------------- */ --surface-primary: #fafafa; --surface-elevated: #ffffff; --surface-card: rgba(255, 255, 255, 0.96); --text-primary: #1a1a1a; --text-secondary: rgba(0, 0, 0, 0.72); --text-tertiary: rgba(0, 0, 0, 0.5); --border-subtle: rgba(0, 0, 0, 0.1); --border-hover: rgba(0, 0, 0, 0.2); --glow-gold: rgba(212, 175, 55, 0.35); /* Glassy panel & overlay tokens used across header / chat / nav --- */ --glass: rgba(255, 255, 255, 0.92); /* Mobile-frame tokens (m-* family — used in nav & menu) --------- */ --m-bg: #fafafa; --m-text: #1a1a1a; --m-text-sec: rgba(0, 0, 0, 0.65); --m-glass: rgba(255, 255, 255, 0.88); --m-glass-border: rgba(0, 0, 0, 0.1); --m-overlay: rgba(255, 255, 255, 0.98); /* Subpage tokens (about/visa/schools/neighborhoods) -------------- */ --bg: #fafafa; --dark: #ffffff; --darker: #f4f4f4; --dark-gray: #f0f0f0; --black: #fafafa; --black-light: #f4f4f4; --black-medium: #ededed; --charcoal: #f0f0f0; --text: #1a1a1a; --muted: rgba(0, 0, 0, 0.6); /* Borders that were "rgba(255,255,255,X)" by token --------------- */ --border-gold: rgba(212, 175, 55, 0.4); --border-gold-strong: rgba(212, 175, 55, 0.6); --border-gold-bright: rgba(212, 175, 55, 0.8); --border-accent: rgba(212, 175, 55, 0.5); /* Project-specific palette tokens (Mandarin Oriental, Baccarat, Coral Gables, Faena, etc.) we leave on dark surfaces — they represent ACCENT color identities, not theme colors. */ color-scheme: light; } /* ------------------------------------------------------------------- * 2. BODY + GLOBAL TYPOGRAPHY * ----------------------------------------------------------------- */ body.light-mode { background-color: #fafafa !important; color: #1a1a1a !important; } body.light-mode h1, body.light-mode h2, body.light-mode h3, body.light-mode h4, body.light-mode h5, body.light-mode h6 { color: #0a0a0a; } body.light-mode p, body.light-mode li, body.light-mode span:not(.gold):not(.gold-text):not(.badge):not(.dev-thumb-badge) { /* Don't override gold accents and badges — they should stay branded */ } /* ------------------------------------------------------------------- * 3. NAVIGATION * ----------------------------------------------------------------- */ body.light-mode nav, body.light-mode .top-nav { background: rgba(255, 255, 255, 0.92) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.08); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } body.light-mode .nav-link, body.light-mode nav a { color: #1a1a1a !important; } body.light-mode .nav-link:hover { color: var(--gold) !important; } /* The site logo is a white-on-transparent PNG — invert to make it black on light backgrounds. */ body.light-mode .logo-img, body.light-mode .footer-logo, body.light-mode .mobile-logo { filter: brightness(0); } /* The hamburger menu lines */ body.light-mode .hamburger-line { background: #1a1a1a !important; } body.light-mode .mobile-menu-btn { color: #1a1a1a; } /* Mobile header buttons — invert dark glass surfaces */ body.light-mode .mobile-header-actions a, body.light-mode .mobile-header-actions button, body.light-mode .mobile-header-lang, body.light-mode .mobile-header-wa, body.light-mode .mobile-header-ai { background: rgba(255, 255, 255, 0.85) !important; border-color: rgba(0, 0, 0, 0.12) !important; color: #1a1a1a !important; } /* Mobile menu overlay */ body.light-mode .mobile-menu-overlay { background: rgba(255, 255, 255, 0.98) !important; } body.light-mode .mobile-menu { background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%) !important; border-right: 1px solid rgba(0, 0, 0, 0.08) !important; } body.light-mode .mobile-menu a, body.light-mode .mobile-menu li, body.light-mode .mobile-menu button { color: #1a1a1a !important; } /* ------------------------------------------------------------------- * 4. HERO SECTION * ----------------------------------------------------------------- */ /* The hero video at design opacity 0.65 looks dim/gray on a white bg — boost it to look natural, with a subtle white-tinted overlay. */ body.light-mode .video-bg { opacity: 0.55 !important; filter: brightness(1.05) saturate(1.05); } body.light-mode .vignette-top, body.light-mode .vignette-bottom { background: linear-gradient(to bottom, rgba(255,255,255,0.85), rgba(255,255,255,0)) !important; } body.light-mode .vignette-bottom { background: linear-gradient(to top, rgba(255,255,255,0.95), rgba(255,255,255,0)) !important; } body.light-mode .hero-section { background: #fafafa !important; } body.light-mode .hero-text h1, body.light-mode .hero-text p { color: #0a0a0a !important; text-shadow: 0 1px 4px rgba(255,255,255,0.5); } body.light-mode .hero-text .no-italic { color: var(--gold); } body.light-mode .hero-text b { color: #0a0a0a; } body.light-mode .hero-cta-rotating { background: var(--gold) !important; color: #0a0a0a !important; } /* ------------------------------------------------------------------- * 5. SECTIONS — backgrounds and gradients * ----------------------------------------------------------------- */ body.light-mode .featured-section, body.light-mode section, body.light-mode main { background: #fafafa !important; } body.light-mode .featured-section { background: linear-gradient(180deg, #ffffff 0%, #f7f7f7 50%, #fafafa 100%) !important; } body.light-mode .section-title, body.light-mode .section-subtitle { color: #0a0a0a !important; } body.light-mode .section-subtitle { color: rgba(0, 0, 0, 0.65) !important; } /* ------------------------------------------------------------------- * 6. FEATURED PROJECT CARDS / CAROUSEL * ----------------------------------------------------------------- */ body.light-mode .dev-thumb-card { background: #ffffff !important; border-color: rgba(0, 0, 0, 0.08) !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06); } body.light-mode .dev-thumb-card:hover { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12); } body.light-mode .dev-thumb-content { background: #ffffff !important; } body.light-mode .dev-thumb-name { color: #0a0a0a !important; } body.light-mode .dev-thumb-location { color: rgba(0, 0, 0, 0.65) !important; } body.light-mode .dev-thumb-detail-value { color: #0a0a0a !important; } body.light-mode .dev-thumb-detail-label { color: rgba(0, 0, 0, 0.55) !important; } /* Dropdown overlay (Featured Properties modal) */ body.light-mode .projects-dropdown-overlay { background: rgba(255, 255, 255, 0.96) !important; } body.light-mode .projects-dropdown-content { background: #ffffff !important; } body.light-mode .dropdown-header h2 { color: #0a0a0a !important; } body.light-mode .project-card { background: #ffffff !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); } body.light-mode .project-card:hover { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12); } body.light-mode .project-info h3 { color: #0a0a0a !important; } body.light-mode .project-info p { color: rgba(0, 0, 0, 0.65) !important; } /* ------------------------------------------------------------------- * 7. AI CHAT SIDEBAR — keep it dark for visual separation, OR flip to * light. We flip to light so the entire experience feels coherent. * ----------------------------------------------------------------- */ body.light-mode .chat-sidebar { background: rgba(252, 252, 252, 0.97) !important; border-left: 1px solid rgba(0, 0, 0, 0.08) !important; } body.light-mode .chat-header { border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; } body.light-mode .chat-subtitle { color: rgba(0, 0, 0, 0.6) !important; } body.light-mode .chat-messages { background: transparent !important; } body.light-mode .message.bot { background: #f0f0f0 !important; color: #1a1a1a !important; } body.light-mode .message.user { background: var(--gold) !important; color: #0a0a0a !important; } body.light-mode .chat-input-area { border-top: 1px solid rgba(0, 0, 0, 0.08) !important; } body.light-mode .chat-input-field { background: rgba(255, 255, 255, 0.85) !important; border-color: rgba(0, 0, 0, 0.12) !important; color: #1a1a1a !important; } body.light-mode .chat-input-field::placeholder { color: rgba(0, 0, 0, 0.4) !important; } body.light-mode .chat-chip { background: rgba(212, 175, 55, 0.12) !important; color: #0a0a0a !important; border-color: rgba(212, 175, 55, 0.4) !important; } body.light-mode .close-chat { color: #0a0a0a !important; } /* ------------------------------------------------------------------- * 8. CARDS / GLASS / SURFACES — generic catch * ----------------------------------------------------------------- */ body.light-mode .card, body.light-mode .info-card, body.light-mode .area-card, body.light-mode .service-card, body.light-mode .stat-card, body.light-mode .stats-grid, body.light-mode .neighborhood, body.light-mode .school-card, body.light-mode .opportunity-section, body.light-mode .timeline-item, body.light-mode .support-banner, body.light-mode .team-member, body.light-mode .value-card, body.light-mode .why-card, body.light-mode .story-text, body.light-mode .about-card, body.light-mode details { background: #ffffff !important; border-color: rgba(0, 0, 0, 0.08) !important; color: #1a1a1a !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05); } body.light-mode .info-card h3, body.light-mode .area-card h3, body.light-mode .service-card h3, body.light-mode .stat-card h3, body.light-mode .neighborhood h3, body.light-mode .school-card h3, body.light-mode .timeline-item h3, body.light-mode .support-banner h3, body.light-mode .value-card h3, body.light-mode .why-card h3 { color: #0a0a0a !important; } body.light-mode .info-card p, body.light-mode .area-card p, body.light-mode .service-card p, body.light-mode .stat-card p, body.light-mode .neighborhood p, body.light-mode .school-card p, body.light-mode .timeline-item p, body.light-mode .support-banner p, body.light-mode .value-card p, body.light-mode .why-card p { color: rgba(0, 0, 0, 0.7) !important; } /* FAQ

patterns */ body.light-mode summary { color: #0a0a0a !important; background: #f7f7f7 !important; border-color: rgba(0, 0, 0, 0.08) !important; } body.light-mode details[open] summary { background: #f0f0f0 !important; } /* ------------------------------------------------------------------- * 9. MAP SECTION * ----------------------------------------------------------------- */ body.light-mode .map-section { background: #fafafa !important; } body.light-mode .map-ui, body.light-mode .city-search { background: rgba(255, 255, 255, 0.95) !important; border-color: rgba(0, 0, 0, 0.08) !important; } body.light-mode #cityInput { background: rgba(255, 255, 255, 0.95) !important; color: #1a1a1a !important; border-color: rgba(0, 0, 0, 0.12) !important; } /* ------------------------------------------------------------------- * 10. FOOTER * ----------------------------------------------------------------- */ body.light-mode footer, body.light-mode .footer, body.light-mode .footer-bottom { background: #f0f0f0 !important; color: #1a1a1a !important; border-top: 1px solid rgba(0, 0, 0, 0.08) !important; } body.light-mode footer a, body.light-mode .footer a { color: #1a1a1a !important; } body.light-mode footer a:hover { color: var(--gold) !important; } body.light-mode .footer-bottom p, body.light-mode .footer-license { color: rgba(0, 0, 0, 0.65) !important; } /* ------------------------------------------------------------------- * 11. WHATSAPP / CTAs / BUTTONS * ----------------------------------------------------------------- */ body.light-mode .whatsapp-btn, body.light-mode .hero-whatsapp-btn, body.light-mode .floating-whatsapp { /* Keep WhatsApp green — it's brand identity. */ } body.light-mode .scroll-top-btn { background: var(--gold) !important; color: #0a0a0a !important; box-shadow: 0 4px 14px rgba(212, 175, 55, 0.35); } /* Generic dark-on-dark buttons → flip to dark-on-light */ body.light-mode button:not(.whatsapp-btn):not(.hero-whatsapp-btn):not(.send-btn):not(.chat-chip):not(.scroll-top-btn):not(.theme-toggle-btn):not(.mobile-menu-btn) { /* Be conservative — only restyle generic buttons that don't have their own brand styling. */ } /* ------------------------------------------------------------------- * 12. BADGES — keep gold/red badges visible on white * ----------------------------------------------------------------- */ body.light-mode .dev-thumb-badge { background: rgba(212, 175, 55, 0.95) !important; color: #0a0a0a !important; } body.light-mode .bestseller-ribbon, body.light-mode .dev-thumb-bestseller { background: linear-gradient(135deg, #ff6b35, #f7c52c) !important; color: #0a0a0a !important; } /* ------------------------------------------------------------------- * 13. SHADOWS — softer in light mode * ----------------------------------------------------------------- */ body.light-mode * { --shadow-gold: 0 8px 20px rgba(212, 175, 55, 0.25); } /* ------------------------------------------------------------------- * 14. THEME TOGGLE BUTTON * ----------------------------------------------------------------- */ .theme-toggle-btn { position: fixed; bottom: 24px; left: 24px; width: 48px; height: 48px; border-radius: 50%; background: rgba(20, 20, 20, 0.92); border: 1px solid rgba(255, 255, 255, 0.15); color: #ffffff; font-size: 18px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 9998; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease, color 0.3s ease; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .theme-toggle-btn:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4); } .theme-toggle-btn:active { transform: translateY(0) scale(0.98); } body.light-mode .theme-toggle-btn { background: rgba(255, 255, 255, 0.95); border-color: rgba(0, 0, 0, 0.1); color: #1a1a1a; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); } /* Hide the label visually on mobile; icon-only is enough */ @media (max-width: 768px) { .theme-toggle-btn { bottom: 80px; /* clear of the WhatsApp floating btn */ left: 16px; width: 44px; height: 44px; font-size: 16px; } } /* Avoid jarring flash before JS runs — set color-scheme up front */ html { color-scheme: dark; } html.theme-light { color-scheme: light; }