/* ===================================================================== theme.css — Light theme overrides + theme-toggle button Dark is the default (defined in styles.css :root). Light is applied when is set (persisted to localStorage by js/theme.js). Loaded on every page AFTER styles.css / property.css. ===================================================================== */ /* ---------- Light palette (global) ---------- */ html[data-theme="light"] { /* Palette: Olive Leaf 606C38 · Black Forest 283618 · Cornsilk FEFAE0 · Sunlit Clay DDA15E · Copperwood BC6C25 */ --night: #FEFAE0; --cream: #283618; --copper: #BC6C25; --rust: #9C5A1E; --gold: #DDA15E; --forest: #FFFFFF; --sage: #606C38; --moss: #606C38; --night-95: rgba(254, 250, 224, 0.97); --night-80: rgba(254, 250, 224, 0.86); --night-70: rgba(254, 250, 224, 0.78); --night-55: rgba(254, 250, 224, 0.60); --night-45: rgba(254, 250, 224, 0.50); --night-30: rgba(254, 250, 224, 0.35); /* Theme channels */ --sage-rgb: 86, 107, 60; --cream-rgb: 40, 54, 24; --surface-rgb: 0, 0, 0; /* Semantic surfaces / hairlines */ --edge-30: rgba(0, 0, 0, 0.08); --edge-50: rgba(0, 0, 0, 0.10); --edge-60: rgba(0, 0, 0, 0.10); --edge-70: rgba(0, 0, 0, 0.12); --edge-100: rgba(0, 0, 0, 0.14); --field-bg: rgba(0, 0, 0, 0.04); --field-border: rgba(0, 0, 0, 0.14); --backdrop: rgba(0, 0, 0, 0.50); --surface-1: #E9EDC9; /* booking card */ --surface-2: #FEFAE0; /* lodgify widget surfaces */ /* ---- Lodgify widget tokens (light) ---- */ --ldg-bnb-color-primary: #bc6c25; --ldg-bnb-color-primary-lighter: #d4a373; --ldg-bnb-color-primary-darker: #9c5a1e; --ldg-bnb-color-primary-contrast: #283618; --ldg-semantic-color-primary: #d4a373; --ldg-semantic-color-primary-darker: #c08a4e; --ldg-semantic-color-primary-lighter: rgba(212, 163, 115, 0.16); --ldg-semantic-color-primary-contrast: #283618; --ldg-semantic-color-error: #283618; --ldg-component-alert-color: #283618; --lodgify-ui-text-color: #283618; --ldg-core-color-neutral-0: #FEFAE0; --ldg-core-color-neutral-50: #FEFAE0; --ldg-core-color-neutral-100: #f3eed2; --ldg-core-color-neutral-200: #ece6c8; --ldg-core-color-neutral-300: #ddd7b8; --ldg-core-color-neutral-400: #9aa07e; --ldg-core-color-neutral-500: #6d7553; --ldg-core-color-neutral-600: #4d5640; --ldg-core-color-neutral-700: #3a4230; --ldg-core-color-neutral-800: #313a26; --ldg-core-color-neutral-900: #283618; --ldg-core-color-neutral-1000: #283618; --ldg-core-color-neutral-1000-rgb: 40, 54, 24; --ldg-component-popover-background: #FEFAE0; --ldg-component-card-background: #FEFAE0; --ldg-component-select-trigger-background-color: #FEFAE0; --ldg-component-select-main-background-color: #FEFAE0; --ldg-component-select-item-background-color: #FEFAE0; --ldg-component-calendar-bg-color: transparent; --ldg-component-calendar-cell-selection-bg-color: #d4a373; --ldg-component-calendar-cell-selection-color: #283618; --ldg-component-calendar-cell-selected-bg-color: rgba(212, 163, 115, 0.16); --ldg-component-calendar-cell-selected-color: #283618; --ldg-component-calendar-cell-hover-bg-color: rgba(212, 163, 115, 0.12); --ldg-component-calendar-cell-disabled-outside-color: rgba(0, 0, 0, 0.22); } /* ===================================================================== HOME PAGE (index.html) ===================================================================== */ /* Keep image-overlay sections dark: re-pin night vars within those subtrees */ html[data-theme="light"] .hero, html[data-theme="light"] .section-fullbleed { --night: #0a0f0d; --night-95: rgba(10, 15, 13, 0.95); --night-80: rgba(10, 15, 13, 0.8); --night-70: rgba(10, 15, 13, 0.7); --night-55: rgba(10, 15, 13, 0.55); --night-45: rgba(10, 15, 13, 0.45); --night-30: rgba(10, 15, 13, 0.3); } html[data-theme="light"] body, html[data-theme="light"] .section-dark, html[data-theme="light"] .signup-section, html[data-theme="light"] .spacer-12, html[data-theme="light"] footer { background-color: #FEFAE0 !important; } html[data-theme="light"] .nav-desktop { background-color: rgba(254,250,224,0.9) !important; border-bottom: 1px solid rgba(40,54,24,0.08); } html[data-theme="light"] .nav-mobile, html[data-theme="light"] .mobile-menu { background-color: rgba(254,250,224,0.97) !important; } html[data-theme="light"] .nav-link { color: rgba(40,54,24,0.85) !important; } html[data-theme="light"] .nav-link:hover { color: #283618 !important; } html[data-theme="light"] .mobile-menu a { color: rgba(40,54,24,0.85) !important; border-bottom-color: rgba(40,54,24,0.12) !important; } html[data-theme="light"] .mobile-menu-btn { color: #283618 !important; } html[data-theme="light"] .pillars-heading, html[data-theme="light"] .properties-heading, html[data-theme="light"] .signup-heading, html[data-theme="light"] .footer-nav-title { color: #283618 !important; } html[data-theme="light"] .properties-subhead { color: rgba(40,54,24,0.7) !important; } html[data-theme="light"] .footer-address, html[data-theme="light"] .footer-tagline, html[data-theme="light"] .footer-nav a { color: rgba(96,108,56,0.95) !important; } html[data-theme="light"] .footer-nav a:hover { color: #283618 !important; } html[data-theme="light"] .footer-copyright, html[data-theme="light"] .footer-nav-muted { color: rgba(96,108,56,0.7) !important; } html[data-theme="light"] footer { border-top-color: rgba(40,54,24,0.15) !important; } html[data-theme="light"] .footer-bottom { border-top-color: rgba(40,54,24,0.12) !important; } html[data-theme="light"] .signup-input { background-color: #ffffff !important; border-color: rgba(40,54,24,0.2) !important; color: #283618 !important; } html[data-theme="light"] .signup-input::placeholder { color: rgba(40,54,24,0.45) !important; } html[data-theme="light"] .signup-input:focus { border-color: #DDA15E !important; } html[data-theme="light"] .map-container { background-color: rgba(40,54,24,0.06) !important; } /* ===================================================================== WPB PROPERTY PAGE (property.css classes) ===================================================================== */ html[data-theme="light"] .prop-nav { border-bottom-color: rgba(0,0,0,0.08) !important; } html[data-theme="light"] .host-card { background-color: var(--forest) !important; border-color: rgba(40,54,24,0.16) !important; } html[data-theme="light"] .host-badge { background-color: #E9EDC9 !important; color: #283618 !important; } /* Check-availability CTA stays Copperwood; Contact Host → Light Bronze */ html[data-theme="light"] .host-contact-btn { background-color: #D4A373 !important; } html[data-theme="light"] .host-contact-btn:hover { background-color: #c08a4e !important; } /* ===================================================================== LODGIFY WIDGET (light-specific rule overrides; tokens handled above) ===================================================================== */ /* Day numbers must be dark on the light calendar */ html[data-theme="light"] #ldg-book-now-box-date-picker [data-testid="book-now-box.date-picker-range-calendar"] { --ldg-component-calendar-cell-color: #283618 !important; } /* Guests +/- stepper icons must be dark on the light panel */ html[data-theme="light"] [data-testid$="-add-button"], html[data-theme="light"] [data-testid$="-remove-button"] { color: #283618 !important; border-color: rgba(40,54,24,0.3) !important; } html[data-theme="light"] [data-testid$="-add-button"] svg, html[data-theme="light"] [data-testid$="-remove-button"] svg, html[data-theme="light"] [data-testid$="-add-button"] svg *, html[data-theme="light"] [data-testid$="-remove-button"] svg * { stroke: #283618 !important; fill: #283618 !important; color: #283618 !important; } /* Calendar footer (Clear / Close) */ html[data-theme="light"] #ldg-book-now-box-date-picker .ldg-cal-clear { color: #283618 !important; } html[data-theme="light"] #ldg-book-now-box-date-picker .ldg-cal-close { background: #d4a373 !important; color: #283618 !important; } html[data-theme="light"] #ldg-book-now-box-date-picker .ldg-cal-close:hover { background: #c08a4e !important; } /* ===================================================================== PHOTOS GALLERY (pt-* classes) ===================================================================== */ html[data-theme="light"] .pt-photo-hover svg { color: #FEFAE0 !important; } /* ===================================================================== THEME TOGGLE BUTTON ===================================================================== */ .theme-toggle { display: inline-flex; align-items: center; gap: 0.45rem; background: var(--edge-30); border: 1px solid var(--edge-50); color: var(--cream); border-radius: 9999px; padding: 0.4rem 0.85rem; font-family: inherit; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; cursor: pointer; line-height: 1; transition: background-color 150ms, border-color 150ms, color 150ms; white-space: nowrap; } .theme-toggle:hover { background: var(--edge-50); } .theme-toggle svg { width: 1rem; height: 1rem; flex-shrink: 0; } /* Show the icon/label for the theme you'll switch TO */ .theme-toggle .tt-to-light, html[data-theme="light"] .theme-toggle .tt-to-dark { display: inline-flex; } .theme-toggle .tt-to-dark, html[data-theme="light"] .theme-toggle .tt-to-light { display: none; }