/*---------------------------------------------------------------- Mile Away Stowe — Light / Dark Mode Toggle Default site look (unchanged) = dark. This file adds an eggshell/green LIGHT mode, active whenever does NOT carry the .liko-dark-active class (removed by theme-toggle.js). ------------------------------------------------------------------*/ :root { --ma-light-bg: #F1ECDB; --ma-light-bg-soft: #F7F3E7; --ma-light-text: #222B1D; --ma-light-text-soft: #4B5342; --ma-light-border: rgba(34, 43, 29, 0.18); } /* ---------------- Toggle switch UI ---------------- */ .tp-header-right-actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; } /* Footer copyright row: theme toggle sits alongside the copyright text */ .tp-copyright-2-left { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; } @media (min-width: 992px) { .tp-copyright-2-left { justify-content: flex-start; } } .tp-copyright-2-left p { margin-bottom: 0; } .tp-theme-toggle { position: relative; flex: 0 0 auto; width: 52px; height: 28px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; background: rgba(255, 255, 255, 0.08); cursor: pointer; transition: background-color 0.3s ease, border-color 0.3s ease; } .tp-theme-toggle:hover { border-color: rgba(255, 255, 255, 0.6); } .tp-theme-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--tp-common-white, #fff); display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease; } .tp-theme-toggle[aria-pressed="true"] .tp-theme-toggle-thumb { transform: translateX(24px); } .tp-theme-toggle-thumb svg { width: 13px; height: 13px; color: #222222; } .tp-theme-toggle-thumb .tp-theme-icon-sun { display: none; } .tp-theme-toggle[aria-pressed="true"] .tp-theme-toggle-thumb .tp-theme-icon-sun { display: block; } .tp-theme-toggle[aria-pressed="true"] .tp-theme-toggle-thumb .tp-theme-icon-moon { display: none; } /* Toggle appearance while page is in light mode (button sits on the translucent light header, so give it a dark-on-light look) */ html:not(.liko-dark-active) .tp-theme-toggle { border-color: var(--ma-light-border); background: rgba(34, 43, 29, 0.08); } html:not(.liko-dark-active) .tp-theme-toggle-thumb { background: var(--ma-light-text); } html:not(.liko-dark-active) .tp-theme-toggle-thumb svg { color: var(--ma-light-bg); } /* ================================================================ LIGHT MODE OVERRIDES Active whenever body does NOT have .liko-dark-active ================================================================ */ html:not(.liko-dark-active) { background-color: var(--ma-light-bg); /* Body's own text color var is barely used elsewhere in main.css, so it's safe to flip here — this fixes "naked" text (spans, labels, etc. with no color of their own) that would otherwise silently inherit white forever, since it's set unconditionally on body rather than being toggle-aware. */ --tp-text-body: var(--ma-light-text-soft); } /* Section-level backgrounds that are hard-coded dark in the markup */ html:not(.liko-dark-active) .dark-bg, html:not(.liko-dark-active) .black-bg, html:not(.liko-dark-active) .black-bg-2 { background-color: var(--ma-light-bg) !important; } /* Generic headings & body copy */ html:not(.liko-dark-active) h1, html:not(.liko-dark-active) h2, html:not(.liko-dark-active) h3, html:not(.liko-dark-active) h4, html:not(.liko-dark-active) h5, html:not(.liko-dark-active) h6 { color: var(--ma-light-text) !important; } html:not(.liko-dark-active) p, html:not(.liko-dark-active) .tp-hero-content p { color: var(--ma-light-text-soft) !important; } /* Fix latent logo display bug: .logo-2 is `display:none` by default and only shown via `.liko-dark-active .logo-2`. Since these pages have no .logo-1 counterpart, keep .logo-2 visible in light mode too. */ html:not(.liko-dark-active) .logo-2 { display: block !important; } /* ---------------- Header ---------------- */ /* Give the header a light, legible backdrop at all times (not just when scrolled) since nav text/logo now render dark. */ html:not(.liko-dark-active) .tp-header-area, html:not(.liko-dark-active) .tp-inner-header-area { background: rgba(241, 236, 219, 0.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } html:not(.liko-dark-active) .header-sticky { background: rgba(241, 236, 219, 0.92) !important; } html:not(.liko-dark-active) .custom-book-btn-dark { border-color: var(--ma-light-text); color: var(--ma-light-text); } html:not(.liko-dark-active) .custom-book-btn-dark:hover { background-color: var(--ma-light-text); border-color: var(--ma-light-text); color: var(--ma-light-bg); } /* ---------------- Footer ---------------- */ html:not(.liko-dark-active) .tp-footer-2-widget-menu ul li a { color: var(--ma-light-text-soft) !important; background-image: linear-gradient(var(--ma-light-text), var(--ma-light-text)), linear-gradient(var(--ma-light-text), var(--ma-light-text)) !important; } html:not(.liko-dark-active) .tp-footer-2-widget-menu ul li a:hover { color: var(--ma-light-text) !important; } html:not(.liko-dark-active) .tp-copyright-2-bdr-top { border-top-color: var(--ma-light-border); } html:not(.liko-dark-active) .tp-copyright-2-social a { color: var(--ma-light-text) !important; border-color: var(--ma-light-border); } html:not(.liko-dark-active) .tp-copyright-2-social a:hover { background-color: var(--ma-light-text); border-color: var(--ma-light-text); color: var(--ma-light-bg) !important; } html:not(.liko-dark-active) .tp-footer-2-input input { color: var(--ma-light-text) !important; border-bottom-color: var(--ma-light-border); } html:not(.liko-dark-active) .tp-footer-2-input input::-webkit-input-placeholder { color: var(--ma-light-text-soft) !important; } html:not(.liko-dark-active) .tp-footer-2-input input::-moz-placeholder { color: var(--ma-light-text-soft) !important; } html:not(.liko-dark-active) .tp-footer-2-input input::placeholder { color: var(--ma-light-text-soft) !important; } html:not(.liko-dark-active) .tp-footer-2-input input:focus { border-color: var(--ma-light-text); } html:not(.liko-dark-active) .tp-footer-2-input button svg path { fill: var(--ma-light-text) !important; } /* ---------------- Eyebrow / label text hardcoded to white ---------------- */ html:not(.liko-dark-active) .sv-small-text-box span, html:not(.liko-dark-active) .ab-inner-hero-subtitle, html:not(.liko-dark-active) .service-details__subtitle, html:not(.liko-dark-active) .sv-service-subtitle, html:not(.liko-dark-active) .tp-about-5-subtitle, html:not(.liko-dark-active) .tp-video-subtitle { color: var(--ma-light-text-soft) !important; } /* ---------------- Accordion / FAQ ---------------- */ html:not(.liko-dark-active) .accordion-buttons { color: var(--ma-light-text) !important; border-color: var(--ma-light-border) !important; } html:not(.liko-dark-active) .accordion-body { color: var(--ma-light-text-soft) !important; } /* ---------------- Back-to-top / misc borders ---------------- */ html:not(.liko-dark-active) hr, html:not(.liko-dark-active) [class*="bdr-top"], html:not(.liko-dark-active) [class*="bdr-bottom"] { border-color: var(--ma-light-border); }