/* ========================================================= Realtor Akhil — Dark Theme Variable-level overrides. Activated via [data-theme="dark"] on . Main style.css is untouched. ========================================================= */ :root[data-theme="dark"] { --ink: #f2ede3; --ink-2: #c9d0c6; --muted: #8a9089; --line: #2a3330; --cream: #0f1411; --cream-2: #161d19; --paper: #17201c; --forest: #0a2019; --forest-2: #0e3a2f; --forest-3: #05130f; --brass: #c9a06e; --brass-2: #e0bd8b; --shadow-sm: 0 1px 2px rgba(0,0,0,.35), 0 4px 12px rgba(0,0,0,.28); --shadow-md: 0 12px 32px rgba(0,0,0,.5); --shadow-lg: 0 24px 60px rgba(0,0,0,.65); } /* Header default (not scrolled) — bg is transparent over dark hero, so keep the nav/icons light in both themes */ :root[data-theme="dark"] .header:not(.is-scrolled) .nav a { color: #f6f1e8; } :root[data-theme="dark"] .header:not(.is-scrolled) .theme-toggle { color: #f6f1e8; border-color: rgba(246,241,232,.3); } :root[data-theme="dark"] .header:not(.is-scrolled) .burger { border-color: rgba(246,241,232,.3); } :root[data-theme="dark"] .header:not(.is-scrolled) .burger span, :root[data-theme="dark"] .header:not(.is-scrolled) .burger span::before, :root[data-theme="dark"] .header:not(.is-scrolled) .burger span::after { background: #f6f1e8; } /* Header scrolled state — swap the cream wash for a dark wash */ :root[data-theme="dark"] .header.is-scrolled { background: rgba(15,20,17,.9); box-shadow: 0 1px 0 rgba(246,241,232,.06); } /* Scrolled logo swap: in dark mode keep white logo even when scrolled */ :root[data-theme="dark"] .header.is-scrolled .logo__img--white { display: inline-block; } :root[data-theme="dark"] .header.is-scrolled .logo__img--black { display: none; } /* Scrolled nav/burger text — already white, so revert override */ :root[data-theme="dark"] .header.is-scrolled .nav a { color: var(--ink); } :root[data-theme="dark"] .header.is-scrolled .burger { border-color: rgba(246,241,232,.3); } :root[data-theme="dark"] .header.is-scrolled .burger span, :root[data-theme="dark"] .header.is-scrolled .burger span::before, :root[data-theme="dark"] .header.is-scrolled .burger span::after { background: var(--ink); } /* Soften Unsplash hero images so they don't blaze at night */ :root[data-theme="dark"] .hero__bg img { filter: brightness(.75); } :root[data-theme="dark"] .page-hero::before { opacity: .25; filter: brightness(.7); } /* Page hero text — pinned light in both themes (bg is always dark) */ :root[data-theme="dark"] .page-hero { color: #f6f1e8; } :root[data-theme="dark"] .page-hero h1 { color: #f6f1e8; } :root[data-theme="dark"] .page-hero p { color: rgba(246,241,232,.8); } /* Hero title & ghost button — over dark video bg, keep light text in both themes */ :root[data-theme="dark"] .hero__title { color: #f6f1e8; } :root[data-theme="dark"] .btn--ghost { color: #f6f1e8; border-color: rgba(246,241,232,.4); } :root[data-theme="dark"] .btn--ghost:hover { background: rgba(246,241,232,.08); border-color: rgba(246,241,232,.7); } /* Footer — dark bg in both themes, so keep headings & contact values light */ :root[data-theme="dark"] .footer h4 { color: #f6f1e8; } :root[data-theme="dark"] .footer__contact p { color: #f6f1e8; } /* Locations section — forest bg stays dark, keep text light */ :root[data-theme="dark"] .locations { color: #f6f1e8; } :root[data-theme="dark"] .locations h2 { color: #f6f1e8; } :root[data-theme="dark"] .locations p { color: rgba(246,241,232,.78); } :root[data-theme="dark"] .loc-list li:hover { color: #f6f1e8; } :root[data-theme="dark"] .loc-list li b { color: #f6f1e8; } /* Same treatment for any .section--dark block */ :root[data-theme="dark"] .section--dark { color: #f6f1e8; } :root[data-theme="dark"] .section--dark h1, :root[data-theme="dark"] .section--dark h2, :root[data-theme="dark"] .section--dark h3 { color: #f6f1e8; } :root[data-theme="dark"] .section--dark p { color: rgba(246,241,232,.78); } /* Service icons — forest stroke is invisible on dark bg */ :root[data-theme="dark"] .service__icon { color: var(--brass-2); } /* Contact page icons — forest stroke is invisible on the dark circle bg */ :root[data-theme="dark"] .contact-card__icon { color: var(--brass-2); } /* Enquiry submit button — forest bg stays dark, keep text light */ :root[data-theme="dark"] .enquire__submit { color: #f6f1e8; } :root[data-theme="dark"] .enquire__submit:hover { background: var(--brass); color: #0f1411; } /* About bio pull-quote — forest color is too dark on dark bg */ :root[data-theme="dark"] .bio__quote { color: var(--brass-2); } /* Mobile drawer — forest bg stays dark, so keep labels light */ :root[data-theme="dark"] .drawer__close { color: #f6f1e8; } :root[data-theme="dark"] .drawer__nav a { color: #f6f1e8; } /* Marquee strip — pinned dark in both themes */ :root[data-theme="dark"] .strip { background: #0f1411; color: #f6f1e8; } :root[data-theme="dark"] .strip__track span { color: rgba(246,241,232,.7); } /* CTA banner — pinned dark in both themes */ :root[data-theme="dark"] .cta-banner { background: #0f1411; color: #f6f1e8; } :root[data-theme="dark"] .cta-banner h2 { color: #f6f1e8; } :root[data-theme="dark"] .cta-banner p { color: rgba(246,241,232,.7); } /* Map iframe desaturate more in dark */ :root[data-theme="dark"] .map iframe { filter: grayscale(.6) contrast(1.05) brightness(.85); } /* Theme toggle button */ .theme-toggle { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(246,241,232,.3); background: transparent; cursor: pointer; color: var(--cream); transition: color .3s, border-color .3s, background .3s; margin-left: 4px; } .header.is-scrolled .theme-toggle { border-color: var(--ink); color: var(--ink); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .icon-moon { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: inline-block; } .theme-toggle:hover { background: rgba(246,241,232,.08); } :root[data-theme="dark"] .theme-toggle:hover { background: rgba(246,241,232,.06); }