/* ═══════════════════════════════════════════════════════════════════════ RR Interiors — Light / Dark Theme Toggle Default: dark. Toggled by [data-theme="light"] on . All light overrides use !important to beat custom-home.css specificity. ═══════════════════════════════════════════════════════════════════════ */ /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ TOGGLE SWITCH UI ━━━━━━━━━━━━━━ */ .rr-theme-toggle { cursor: pointer; background: none; border: none; padding: 4px; display: inline-flex; align-items: center; outline: none; border-radius: 100px; transition: box-shadow 0.25s; } .rr-theme-toggle:focus-visible { box-shadow: 0 0 0 2px #C8A040; } .rr-theme-toggle__pill { position: relative; width: 54px; height: 28px; background: rgba(200, 160, 64, 0.12); border: 1px solid rgba(200, 160, 64, 0.32); border-radius: 100px; display: flex; align-items: center; justify-content: space-between; padding: 0 7px; box-sizing: border-box; transition: background 0.4s ease, border-color 0.4s ease; overflow: hidden; } .rr-theme-toggle__icon { font-size: 0.6rem; z-index: 1; display: flex; align-items: center; line-height: 1; transition: color 0.35s, opacity 0.35s; } .rr-theme-toggle__icon--sun { color: rgba(232, 201, 108, 0.38); } .rr-theme-toggle__icon--moon { color: #E8C96C; } .rr-theme-toggle__thumb { position: absolute; right: 4px; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, #E8C96C 0%, #C8A040 100%); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255,255,255,0.25); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.35s ease, box-shadow 0.35s ease; z-index: 2; } /* ── Light mode state ── */ .rr-theme-toggle.is-light .rr-theme-toggle__pill { background: rgba(245, 237, 216, 0.9); border-color: rgba(155, 91, 58, 0.28); } .rr-theme-toggle.is-light .rr-theme-toggle__thumb { transform: translateX(-26px); background: linear-gradient(135deg, #C4854A 0%, #9B5B3A 100%); box-shadow: 0 2px 10px rgba(155, 91, 58, 0.5), inset 0 1px 0 rgba(255,255,255,0.2); } .rr-theme-toggle.is-light .rr-theme-toggle__icon--sun { color: #C8A040; } .rr-theme-toggle.is-light .rr-theme-toggle__icon--moon { color: rgba(155, 91, 58, 0.3); } /* ── Tooltip label ── */ .rr-theme-toggle__label { font-family: 'Josefin Sans', sans-serif; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); margin-right: 8px; transition: color 0.3s; white-space: nowrap; display: none; /* hidden by default, show on lg+ */ } [data-theme="light"] .rr-theme-toggle__label { color: rgba(28, 26, 23, 0.4); } /* Desktop wrapper */ .rr-theme-toggle-wrap { display: flex; align-items: center; margin-right: 12px; } /* Mobile floating button */ #rr-theme-float { position: fixed; bottom: 148px; right: 22px; z-index: 9990; } #rr-theme-float .rr-theme-toggle__pill { width: 58px; height: 30px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); } #rr-theme-float .rr-theme-toggle__thumb { width: 20px; height: 20px; right: 4px; top: 4px; } #rr-theme-float.is-light .rr-theme-toggle__thumb { transform: translateX(-28px); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SMOOTH TRANSITIONS ━━━━━━━━━━━━ */ body, .profession-caption, .gallery-area, .rr-gallery-header, .testimonial-area, .team-area, .home-blog-area, .rr-stats-band, .rr-stat-num, .rr-stat-label, .rr-stat-desc, .rr-testi-card, .single-services .services-caption, .rr-mobile-cta, .main-header, .section-tittle h2, .rr-diff-body h4, .rr-diff-body p, .profession-details h2, .profession-details p { transition: background-color 0.38s ease, color 0.28s ease, border-color 0.28s ease; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ LIGHT THEME OVERRIDES ━━━━━━━━━━ */ /* ── Body ── */ [data-theme="light"] body, [data-theme="light"] body.body-bg { background-color: #FDFAF5 !important; } /* ── Sticky header ── */ [data-theme="light"] .main-header.sticky-bar { background: #ffffff !important; box-shadow: 0 2px 24px rgba(0, 0, 0, 0.08) !important; } [data-theme="light"] .sticky-bar .main-menu ul#navigation > li > a { color: #1C1A17 !important; } [data-theme="light"] .sticky-bar .main-menu ul#navigation > li > a:hover { color: #9B5B3A !important; } [data-theme="light"] .rr-theme-toggle__icon--moon { /* handled above per .is-light */ } /* ── Mobile CTA strip ── */ [data-theme="light"] .rr-mobile-cta { background: #F5EDD8 !important; border-top-color: #C8A040 !important; } [data-theme="light"] .rr-mobile-cta .rr-lead-card__title { color: #1C1A17 !important; } [data-theme="light"] .rr-mobile-cta .rr-lead-card__sub { color: rgba(28, 26, 23, 0.45) !important; } [data-theme="light"] .rr-mobile-cta .rr-lead-form input[type="text"], [data-theme="light"] .rr-mobile-cta .rr-lead-form input[type="tel"] { color: #1C1A17 !important; border-bottom-color: rgba(28, 26, 23, 0.14) !important; } [data-theme="light"] .rr-mobile-cta .rr-lead-form input::placeholder { color: rgba(28, 26, 23, 0.28) !important; } [data-theme="light"] .rr-mobile-cta .rr-pill span { border-color: rgba(28, 26, 23, 0.12) !important; color: rgba(28, 26, 23, 0.42) !important; } [data-theme="light"] .rr-mobile-cta .rr-pills-label { color: rgba(28, 26, 23, 0.35) !important; } [data-theme="light"] .rr-mobile-cta .rr-lead-card__note { color: rgba(28, 26, 23, 0.22) !important; } [data-theme="light"] .rr-mobile-cta .rr-lead-card__note a { color: rgba(155, 91, 58, 0.6) !important; border-bottom-color: rgba(155, 91, 58, 0.25) !important; } /* ── Stats band ── */ [data-theme="light"] .rr-stats-band { background: #EDE5D0 !important; border-top-color: rgba(155, 91, 58, 0.18) !important; border-bottom-color: rgba(155, 91, 58, 0.1) !important; } [data-theme="light"] .rr-stat-item, [data-theme="light"] .rr-stat-item--mid { border-color: rgba(155, 91, 58, 0.12) !important; } [data-theme="light"] .rr-stat-num { color: #9B5B3A !important; } [data-theme="light"] .rr-stat-label { color: #7A4328 !important; border-left-color: #7A4328 !important; } [data-theme="light"] .rr-stat-desc { color: rgba(28, 26, 23, 0.52) !important; } /* ── Why Us ── */ [data-theme="light"] .profession-caption { background: #FDFAF5 !important; } [data-theme="light"] .section-tittle.profession-details span { color: #9B5B3A !important; border-left-color: #9B5B3A !important; } [data-theme="light"] .profession-details h2 { color: #1C1A17 !important; } [data-theme="light"] .profession-details p { color: rgba(28, 26, 23, 0.52) !important; } [data-theme="light"] .rr-diff-cta { color: #9B5B3A !important; border-bottom-color: rgba(155, 91, 58, 0.32) !important; } [data-theme="light"] .rr-diff-num { color: rgba(155, 91, 58, 0.22) !important; } [data-theme="light"] .rr-diff-body h4 { color: #1C1A17 !important; } [data-theme="light"] .rr-diff-body p { color: rgba(28, 26, 23, 0.5) !important; } [data-theme="light"] .rr-diff-item { border-bottom-color: rgba(28, 26, 23, 0.08) !important; } [data-theme="light"] .rr-diff-item:first-child { border-top-color: rgba(28, 26, 23, 0.08) !important; } /* ── Services (section background only — cards already white) ── */ [data-theme="light"] .services-area { background-color: #FDFAF5 !important; } [data-theme="light"] .services-area .section-tittle h2 { color: #1C1A17 !important; } [data-theme="light"] .services-area .section-tittle span { color: #9B5B3A !important; border-top-color: #9B5B3A !important; } /* ── Gallery area ── */ [data-theme="light"] .gallery-area { background: #F0E8D4 !important; } [data-theme="light"] .rr-gallery-header { background: #F0E8D4 !important; } [data-theme="light"] .gallery-area .section-tittle h2 { color: #1C1A17 !important; } [data-theme="light"] .gallery-area .section-tittle span { color: #9B5B3A !important; border-top-color: #9B5B3A !important; } /* Label gradient — warm cream base instead of dark */ [data-theme="light"] .gallery-area .single-gallery .thumb-content-box { background: linear-gradient( to bottom, transparent 35%, rgba(225, 210, 185, 0.9) 100% ) !important; } [data-theme="light"] .gallery-area .single-gallery .thumb-content-box .thumb-content h3 { color: #1C1A17 !important; } /* Hover: dark overlay takes over — revert text to white */ [data-theme="light"] .gallery-area .single-gallery:hover .thumb-content-box { background: none !important; } [data-theme="light"] .gallery-area .single-gallery:hover .thumb-content-box .thumb-content h3 { color: #ffffff !important; } /* ── Team ── */ [data-theme="light"] .team-area { background-color: #FDFAF5 !important; } [data-theme="light"] .single-team .team-caption h3 a { color: #1C1A17 !important; } [data-theme="light"] .single-team .team-caption span { color: rgba(28, 26, 23, 0.5) !important; } [data-theme="light"] .rr-team-placeholder { background: #ede5d4 !important; border-color: rgba(155, 91, 58, 0.3) !important; } /* ── Testimonials ── */ [data-theme="light"] .testimonial-area { background: #F5EDD8 !important; } [data-theme="light"] .testimonial-area .section-tittle h2 { color: #1C1A17 !important; } [data-theme="light"] .testimonial-area .section-tittle span { color: #9B5B3A !important; border-top-color: #9B5B3A !important; } [data-theme="light"] .rr-testi-card { background: #ffffff !important; border-color: rgba(200, 160, 64, 0.3) !important; border-top-color: #C8A040 !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07) !important; } [data-theme="light"] .rr-testi-card::before { color: rgba(155, 91, 58, 0.08) !important; } [data-theme="light"] .rr-testi-card p { color: #3A302A !important; } [data-theme="light"] .rr-testi-footer { border-top-color: rgba(28, 26, 23, 0.08) !important; } [data-theme="light"] .rr-testi-footer strong { color: #1C1A17 !important; } [data-theme="light"] .rr-testi-footer span { color: rgba(28, 26, 23, 0.42) !important; } /* ── Brand area ── */ [data-theme="light"] .brand-area { background-color: #FDFAF5 !important; } [data-theme="light"] .brand-active.brand-border { border-top-color: rgba(28, 26, 23, 0.08) !important; border-bottom-color: rgba(28, 26, 23, 0.08) !important; } /* ── Blog / Recent Projects ── */ [data-theme="light"] .home-blog-area { background: #F0E8D4 !important; } [data-theme="light"] .home-blog-area .section-tittle h2 { color: #1C1A17 !important; } [data-theme="light"] .home-blog-area .section-tittle span { color: #9B5B3A !important; border-top-color: #9B5B3A !important; } [data-theme="light"] .blog-cap h3 a { color: #1C1A17 !important; } [data-theme="light"] .blog-cap h3 a:hover { color: #9B5B3A !important; } [data-theme="light"] .home-blog-single .blog-img-cap ul { background: transparent !important; } [data-theme="light"] .home-blog-single .blog-img-cap ul li { background: rgba(28, 26, 23, 0.65) !important; color: #ffffff !important; } /* ── CTA Band — keep sienna (works on both themes) ── */ /* ── Footer — keep dark on both themes (premium convention) ── */ /* ── Back to top ── */ [data-theme="light"] #back-top a { background: #9B5B3A !important; color: #ffffff !important; } /* ── Contact page section ── */ [data-theme="light"] .contact-section { background-color: #FDFAF5 !important; } [data-theme="light"] .contact-title { color: #1C1A17 !important; } [data-theme="light"] .contact-info h3 { color: #1C1A17 !important; } [data-theme="light"] .contact-info p { color: rgba(28, 26, 23, 0.45) !important; } [data-theme="light"] .rr-sent-msg { background: #ede5d4 !important; } /* ── Submenu on light sticky header ── */ [data-theme="light"] .sticky-bar .main-menu .submenu { background: #ffffff !important; box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important; } [data-theme="light"] .sticky-bar .main-menu .submenu li a { color: #1C1A17 !important; } /* ── Page hero banner (contact/inner pages) ── */ [data-theme="light"] .slider-area2 .hero-overly { background: linear-gradient(rgba(28,26,23,0.65), rgba(28,26,23,0.65)) !important; }