/* ══ WHITE / LIGHT THEME ═════════════════════════════════════════════════════ Applied when has class="theme-light" Overrides all dark variables and section backgrounds ══════════════════════════════════════════════════════════════════════════════ */ html.theme-light { --dark: #FFFFFF; --dark-2: #F8F5EF; --dark-3: #F2EDE3; --dark-4: #EAE4D8; --cream: #1A1410; --cream-d:#2C2018; --muted: #7A6858; --muted-l:#6A5848; --shadow: 0 20px 60px rgba(0,0,0,0.12); --shadow-sm: 0 8px 24px rgba(0,0,0,0.08); } /* ── Base ────────────────────────────────────────────────────────────────── */ html.theme-light body { background: #FFFFFF; color: #1A1410; } html.theme-light ::-webkit-scrollbar-track { background: #F2EDE3; } /* ── Navbar ──────────────────────────────────────────────────────────────── */ html.theme-light #navbar { background: rgba(255,255,255,0.0); } html.theme-light #navbar.scrolled { background: rgba(255,255,255,0.97); box-shadow: 0 1px 0 rgba(232,116,26,0.15), 0 4px 20px rgba(0,0,0,0.06); } html.theme-light .nav-logo-text h2 { color: #1A1410; } html.theme-light .nav-logo-text span { color: #E8741A; } html.theme-light .nav-links li a { color: rgba(26,20,16,0.7); } html.theme-light .nav-links li a:hover { color: #1A1410; } html.theme-light .hamburger span { background: #1A1410; } html.theme-light .nav-links { background: #fff; border-bottom: 1px solid rgba(232,116,26,0.15); } /* ── Hero ────────────────────────────────────────────────────────────────── */ html.theme-light #hero { background: #FFFFFF; } html.theme-light .hero-stats-bar { background: #F2EDE3; border-top: 1px solid rgba(0,0,0,0.06); } html.theme-light .stat-item { border-right-color: rgba(0,0,0,0.08); } html.theme-light .stat-lbl { color: #8B7060; } html.theme-light .hero-badge { color: #E8741A; border-color: rgba(232,116,26,0.35); background: rgba(232,116,26,0.07); } html.theme-light .hero-subtitle { color: #6A5848; } html.theme-light .hero-location { color: #9A8878; } html.theme-light .hero-title { color: #1A1410; } html.theme-light .btn-outline { color: #1A1410; border-color: rgba(26,20,16,0.35); } html.theme-light .btn-outline:hover { background: rgba(26,20,16,0.06); border-color: #1A1410; } html.theme-light .mosaic-overlay { background: rgba(0,0,0,0.25); } /* ── About ───────────────────────────────────────────────────────────────── */ html.theme-light #about { background: #F8F5EF; } html.theme-light .about-accent { border-color: #F8F5EF; } html.theme-light .about-feat h4 { color: #1A1410; } html.theme-light .about-feat p { color: #6A5848; } html.theme-light .section-subtitle { color: #6A5848; } html.theme-light .section-title { color: #1A1410; } /* ── Rooms ───────────────────────────────────────────────────────────────── */ html.theme-light #rooms { background: #FFFFFF; } html.theme-light .room-card { background: #FFFFFF; border-color: rgba(0,0,0,0.08); box-shadow: 0 4px 24px rgba(0,0,0,0.07); } html.theme-light .room-card:hover { box-shadow: 0 12px 48px rgba(0,0,0,0.12); } html.theme-light .room-collection { color: #E8741A; } html.theme-light .room-name { color: #1A1410; } html.theme-light .room-desc { color: #6A5848; } html.theme-light .room-tag { background: #F2EDE3; border-color: rgba(0,0,0,0.08); color: #7A6858; } html.theme-light .room-price .from { color: #9A8878; } html.theme-light .room-price .per { color: #9A8878; } html.theme-light .room-rating-badge { background: rgba(255,255,255,0.92); color: #E8741A; border-color: rgba(232,116,26,0.3); } html.theme-light .slide-btn { background: rgba(255,255,255,0.9); color: #1A1410; } html.theme-light .slide-btn:hover { background: var(--orange); color: #fff; } html.theme-light .slide-dot { background: rgba(0,0,0,0.25); } /* ── Amenities ───────────────────────────────────────────────────────────── */ html.theme-light #amenities { background: #F2EDE3; } html.theme-light .amenity-card { background: #FFFFFF; border-color: rgba(0,0,0,0.07); } html.theme-light .amenity-card:hover { background: rgba(232,116,26,0.05); border-color: rgba(232,116,26,0.25); } html.theme-light .amenity-card .label { color: #5A4838; } /* ── Gallery ─────────────────────────────────────────────────────────────── */ html.theme-light #gallery { background: #FFFFFF; } /* ── Experiences ─────────────────────────────────────────────────────────── */ html.theme-light #experiences { background: #F8F5EF; } html.theme-light .exp-card { background: #FFFFFF; border-color: rgba(0,0,0,0.07); box-shadow: 0 4px 16px rgba(0,0,0,0.05); } html.theme-light .exp-card:hover { border-color: rgba(232,116,26,0.2); box-shadow: 0 12px 36px rgba(0,0,0,0.1); } html.theme-light .exp-title { color: #1A1410; } html.theme-light .exp-desc { color: #6A5848; } /* ── Testimonials ────────────────────────────────────────────────────────── */ html.theme-light #testimonials { background: #FFFFFF; } html.theme-light .testi-card { background: #F8F5EF; border-color: rgba(0,0,0,0.07); } html.theme-light .testi-card:hover { border-color: rgba(232,116,26,0.2); } html.theme-light .testi-text { color: #5A4838; } html.theme-light .testi-author { color: #1A1410; } html.theme-light .testi-meta { color: #8B7060; } /* ── Custom sections ─────────────────────────────────────────────────────── */ html.theme-light .custom-section.bg-dark { background: #F2EDE3; } html.theme-light .custom-section.bg-dark2 { background: #F8F5EF; } html.theme-light .custom-section h2 { color: #1A1410; } html.theme-light .custom-section p { color: #6A5848; } html.theme-light .custom-feature-item { background: #FFFFFF; border-color: rgba(0,0,0,0.07); } html.theme-light .custom-feature-item h4 { color: #1A1410; } html.theme-light .custom-feature-item p { color: #6A5848; } /* ── Location ────────────────────────────────────────────────────────────── */ html.theme-light #location { background: #F8F5EF; } html.theme-light .loc-item strong { color: #E8741A; } html.theme-light .loc-item p { color: #5A4838; } html.theme-light .loc-item a { color: #5A4838; } html.theme-light .loc-item a:hover { color: #E8741A; } html.theme-light .map-embed-wrap { border-color: rgba(0,0,0,0.1); } html.theme-light .section-tag { color: #E8741A; } /* ── Footer ──────────────────────────────────────────────────────────────── */ html.theme-light footer { background: #F2EDE3; border-top-color: rgba(232,116,26,0.15); } html.theme-light .footer-desc { color: #7A6858; } html.theme-light .footer-col h4 { color: #E8741A; } html.theme-light .footer-links a { color: #7A6858; } html.theme-light .footer-links a:hover { color: #1A1410; } html.theme-light .footer-bottom { border-top-color: rgba(0,0,0,0.08); } html.theme-light .footer-copy { color: #9A8878; } html.theme-light .nav-logo-text h2 { color: #1A1410; } html.theme-light .social-btn { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.1); color: #7A6858; } html.theme-light .social-btn:hover { background: var(--orange); color: #fff; border-color: var(--orange); } /* ── Booking modal ───────────────────────────────────────────────────────── */ html.theme-light #bookingOverlay { background: rgba(0,0,0,0.55); } html.theme-light .booking-modal { background: #FFFFFF; border-color: rgba(232,116,26,0.2); box-shadow: 0 40px 100px rgba(0,0,0,0.2); } html.theme-light .modal-title { color: #1A1410; } html.theme-light .modal-close { color: #9A8878; } html.theme-light .modal-close:hover { color: #1A1410; } html.theme-light .modal-field input, html.theme-light .modal-field select { background: #F8F5EF; border-color: #E0D8CC; color: #1A1410; color-scheme: light; } html.theme-light .modal-field input:focus, html.theme-light .modal-field select:focus { border-color: var(--orange); } /* ── Float buttons ───────────────────────────────────────────────────────── */ html.theme-light .float-tip { background: #FFFFFF; color: #1A1410; border-color: rgba(0,0,0,0.1); box-shadow: 0 4px 12px rgba(0,0,0,0.1); } html.theme-light .float-call { background: #FFFFFF; border-color: rgba(0,0,0,0.1); color: #1A1410; box-shadow: 0 4px 12px rgba(0,0,0,0.1); } /* ── Theme toggle button on site ─────────────────────────────────────────── */ .theme-toggle-btn { position: fixed; top: 82px; right: 18px; z-index: 800; background: rgba(255,255,255,0.12); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.85); border-radius: 20px; padding: 6px 14px; font-family: 'Nunito', sans-serif; font-size: 0.72rem; font-weight: 800; cursor: pointer; transition: all 0.25s; letter-spacing: 0.05em; display: flex; align-items: center; gap: 6px; } .theme-toggle-btn:hover { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.4); } html.theme-light .theme-toggle-btn { background: rgba(26,20,16,0.07); border-color: rgba(26,20,16,0.15); color: #5A4838; } html.theme-light .theme-toggle-btn:hover { background: rgba(26,20,16,0.12); } /* ── Smooth theme transition ──────────────────────────────────────────────── */ body, #navbar, #hero, #about, #rooms, #amenities, #gallery, #experiences, #testimonials, #location, footer, .room-card, .amenity-card, .exp-card, .testi-card, .booking-modal, .nav-links { transition: background 0.4s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }