/* theme-purple.css — January Mascotas purple colour scheme. Applied ONLY when . style.css is never touched. Default (no attribute) = beige/blue. Design (shallbe.png): Hero background : beige oval image KEPT (january_34.png) "Un Día de Spa" : #000000 (black) "Sin Salir de Casa": #269aa2 (teal) Nav / header : #7B52AB purple, links black Pitch / Loved-by: #7B52AB purple section wrappers Testimonials : #7B52AB purple Groomers : #F7F3ED beige (unchanged) Review cards : #F7F3ED beige (unchanged) Headings : #269aa2 teal Body text : #000000 black CTA buttons : #269aa2 teal Theme toggle : 32 px round colour swatch, no text */ /* ═══════════════════════════════════════════════════════ CSS CUSTOM PROPERTIES ═══════════════════════════════════════════════════════ */ html[data-theme="purple"] { --contrast: #269aa2; --contrast-2: #269aa2; --contrast-3: #1a7278; --accent: #269aa2; } /* ═══════════════════════════════════════════════════════ TYPOGRAPHY ═══════════════════════════════════════════════════════ */ html[data-theme="purple"] p { color: #000000; } html[data-theme="purple"] p.lg { color: #269aa2; } html[data-theme="purple"] h1.sm, html[data-theme="purple"] .subhead { color: #000000; } html[data-theme="purple"] .subhead-bld { color: #269aa2; } html[data-theme="purple"] h2, html[data-theme="purple"] h1, html[data-theme="purple"] h2.lg, html[data-theme="purple"] h1.entry-title, html[data-theme="purple"] h2.entry-title, html[data-theme="purple"] h3, html[data-theme="purple"] h2.wp-block-heading, html[data-theme="purple"] h3.lg, html[data-theme="purple"] h4 { color: #269aa2; } html[data-theme="purple"] h2 span, html[data-theme="purple"] h3 span { color: #269aa2; } /* ── HERO headings: "Un Día de Spa" black / "Sin Salir de Casa" teal ── */ html[data-theme="purple"] h2.hero { color: #000000; } html[data-theme="purple"] h2.hero span:first-child { color: #000000; } html[data-theme="purple"] h2.hero span:last-child { color: #269aa2; } html[data-theme="purple"] .hero-bckgrnd h1.sm { color: #444444; } /* ═══════════════════════════════════════════════════════ BUTTONS ═══════════════════════════════════════════════════════ */ html[data-theme="purple"] button, html[data-theme="purple"] input[type="button"], html[data-theme="purple"] input[type="reset"], html[data-theme="purple"] input[type="submit"], html[data-theme="purple"] a.button, html[data-theme="purple"] a.wp-block-button__link:not(.has-background) { background-color: #269aa2; color: #ffffff; } html[data-theme="purple"] button:hover, html[data-theme="purple"] button:focus, html[data-theme="purple"] a.button:hover, html[data-theme="purple"] a.wp-block-button__link:not(.has-background):hover, html[data-theme="purple"] a.wp-block-button__link:not(.has-background):focus { background-color: #1d7d83; color: #ffffff; } html[data-theme="purple"] button.dk-blu { background-color: #269aa2; } html[data-theme="purple"] button.dk-blu:hover { background-color: #1d7d83; } /* Exclude the mobile hamburger trigger from purple button recoloring */ html[data-theme="purple"] .rmp_menu_trigger, html[data-theme="purple"] .rmp_menu_trigger:hover, html[data-theme="purple"] .rmp_menu_trigger:focus { background-color: transparent !important; color: inherit !important; } html[data-theme="purple"] .everest-forms button.button:not(.button-large) { background-color: #269aa2; } html[data-theme="purple"] .everest-forms button.button:not(.button-large):hover { background-color: #1d7d83; } /* ═══════════════════════════════════════════════════════ LINKS & ACCENTS ═══════════════════════════════════════════════════════ */ html[data-theme="purple"] a { color: #269aa2; } html[data-theme="purple"] .circle-text a { color: #269aa2; } html[data-theme="purple"] .circle-text a:hover{ color: #1d7d83; } html[data-theme="purple"] .readmore { color: #269aa2; } html[data-theme="purple"] .paw-text-lg, html[data-theme="purple"] .paw-text { color: #269aa2; } html[data-theme="purple"] .paw-text h4 { color: #269aa2; } html[data-theme="purple"] .why-list ul, html[data-theme="purple"] .why-list-1col ul { color: #269aa2; } html[data-theme="purple"] .hw-box p { color: #269aa2; } html[data-theme="purple"] .text-original, html[data-theme="purple"] .text-swapped { color: #269aa2; } /* ═══════════════════════════════════════════════════════ HEADER & NAVIGATION — purple bg, black links ═══════════════════════════════════════════════════════ */ html[data-theme="purple"] .site-header { background-color: #7B52AB !important; } html[data-theme="purple"] .main-navigation { background-color: #7B52AB !important; } html[data-theme="purple"] .main-navigation ul ul{ background-color: #6040A0; } html[data-theme="purple"] #navbar { background-color: #7B52AB; box-shadow: 0 2px 10px rgba(123,82,171,0.4); } html[data-theme="purple"] .top-nav-mobile { background-color: #7B52AB; } html[data-theme="purple"] .header-mobile { background-color: #7B52AB; } html[data-theme="purple"] .mob-bar-1 { background-color: #7B52AB !important; border-bottom-color: rgba(255,255,255,0.15) !important; } html[data-theme="purple"] .mob-bar-2 { background-color: #7B52AB !important; border-bottom-color: rgba(255,255,255,0.15) !important; } html[data-theme="purple"] .main-navigation .main-nav ul li a, html[data-theme="purple"] .main-navigation .menu-toggle, html[data-theme="purple"] .main-navigation .menu-bar-items { color: #000000; } /* RMP menu item links — override plugin stylesheet */ html[data-theme="purple"] .rmp-menu-item-link, html[data-theme="purple"] .rmp-menu .rmp-menu-top-level-item > a, html[data-theme="purple"] #primary-menu .rmp-menu-item-link { color: #000000 !important; } html[data-theme="purple"] .main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a, html[data-theme="purple"] .main-navigation .main-nav ul li[class*="current-menu-"] > a { color: #ffffff; } html[data-theme="purple"] .lang-btn { color: #000000; border-color: #000000; } html[data-theme="purple"] .lang-btn.active { background-color: #000000; border-color: #000000; color: #ffffff; } html[data-theme="purple"] .lang-btn:hover { background-color: rgba(0,0,0,0.15); } html[data-theme="purple"] .top-nav { color: #ffffff; } html[data-theme="purple"] .phone-cta { color: #ffffff; } /* ═══════════════════════════════════════════════════════ HERO SECTION — background IMAGE KEPT (oval shape visible) Only text colours change. ═══════════════════════════════════════════════════════ */ /* No background override — january_34.png stays intact */ /* ═══════════════════════════════════════════════════════ PITCH / WHY-ZG wrapper (.jp-pitch-section added in HTML) Purple background visible below hero, soft oval-curve top ═══════════════════════════════════════════════════════ */ html[data-theme="purple"] .jp-pitch-section { background-color: #7B52AB; border-radius: 50% 50% 0 0 / 60px 60px 0 0; margin-top: -30px; padding-top: 30px; } html[data-theme="purple"] .jp-pitch-section h2.hero, html[data-theme="purple"] .jp-pitch-section h2.hero span:first-child, html[data-theme="purple"] .jp-pitch-section h2.hero span:last-child, html[data-theme="purple"] .jp-pitch-section h3.lg, html[data-theme="purple"] .jp-pitch-section h2 { color: #ffffff; } html[data-theme="purple"] .jp-pitch-section p, html[data-theme="purple"] .jp-pitch-section .subhead { color: rgba(255,255,255,0.9); } html[data-theme="purple"] .jp-pitch-section .why-list ul { color: #ffffff; } /* ═══════════════════════════════════════════════════════ SERVICES (lt-blu-img-bckgrnd) — light lavender, no blue image ═══════════════════════════════════════════════════════ */ html[data-theme="purple"] .lt-blu-img-bckgrnd { background-color: #F8F5FF; background-image: none; } html[data-theme="purple"] .lt-blu-bckgrnd { background-color: #F8F5FF; } html[data-theme="purple"] .lt-blu-grad-bckgrnd { background-image: linear-gradient(#ffffff, #F0E8FF); } /* ═══════════════════════════════════════════════════════ LOVED-BY wrapper (.jp-loved-by-section added in HTML) ═══════════════════════════════════════════════════════ */ html[data-theme="purple"] .jp-loved-by-section { background-color: #7B52AB; } html[data-theme="purple"] .jp-loved-by-section h3.lg, html[data-theme="purple"] .jp-loved-by-section h2 { color: #ffffff; } html[data-theme="purple"] .jp-loved-by-section .subhead { color: rgba(255,255,255,0.9); } html[data-theme="purple"] .jp-loved-by-section .why-list ul { color: #ffffff; } /* ═══════════════════════════════════════════════════════ GROOMERS (tan-img-bckgrnd) — BEIGE STAYS ═══════════════════════════════════════════════════════ */ html[data-theme="purple"] .tan-img-bckgrnd { background-color: #F7F3ED; } html[data-theme="purple"] .tan-img-bckgrnd h2, html[data-theme="purple"] .tan-img-bckgrnd h2.lg, html[data-theme="purple"] .tan-img-bckgrnd h3, html[data-theme="purple"] .tan-img-bckgrnd h3.lg { color: #269aa2; } html[data-theme="purple"] .tan-img-bckgrnd .subhead { color: #000000; } html[data-theme="purple"] .tan-img-v2-bckgrnd { background-color: #F7F3ED; } /* ═══════════════════════════════════════════════════════ TESTIMONIALS (blu-pattern-bckgrnd) — purple ═══════════════════════════════════════════════════════ */ html[data-theme="purple"] .blu-pattern-bckgrnd { background: #7B52AB; background-image: none; } /* ═══════════════════════════════════════════════════════ MAP / LOCATION — keep map image (neutral) ═══════════════════════════════════════════════════════ */ /* No override */ /* ═══════════════════════════════════════════════════════ FOOTER — deep purple ═══════════════════════════════════════════════════════ */ html[data-theme="purple"] .footer-bckgrnd { background-color: #3D1F6E; background-image: none; } /* ═══════════════════════════════════════════════════════ INLINE STYLE OVERRIDES ═══════════════════════════════════════════════════════ */ html[data-theme="purple"] [style*="color:#0081E2"], html[data-theme="purple"] [style*="color: #0081E2"] { color: #269aa2 !important; } html[data-theme="purple"] [style*="color: #025CA0"], html[data-theme="purple"] [style*="color:#025CA0"] { color: #269aa2 !important; } html[data-theme="purple"] [style*="color: #0376CC"], html[data-theme="purple"] [style*="color:#0376CC"] { color: #269aa2 !important; } html[data-theme="purple"] .content-padding-130 h3.lg[style], html[data-theme="purple"] .content-padding-130 h3[style] { color: #269aa2 !important; } /* ═══════════════════════════════════════════════════════ REVIEW CARDS — beige STAYS ═══════════════════════════════════════════════════════ */ html[data-theme="purple"] .review-card { background-color: #F7F3ED; } html[data-theme="purple"] .review-item { background-color: #F7F3ED; } /* ═══════════════════════════════════════════════════════ THEME TOGGLE — 32 px PNG icon button, NO text ═══════════════════════════════════════════════════════ */ .theme-toggle-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; min-width: 36px; border-radius: 50%; border: none; background: transparent; cursor: pointer; padding: 0; margin-right: 10px; flex-shrink: 0; box-shadow: none; transition: transform 200ms ease, opacity 200ms ease; font-size: 0; line-height: 1; } .theme-toggle-btn img.theme-icon { width: 36px; height: 36px; border-radius: 50%; display: block; pointer-events: none; } .theme-toggle-btn:hover { transform: scale(1.15); opacity: 0.9; } .theme-toggle-btn:active { transform: scale(0.95); } .theme-toggle-btn:focus-visible { outline: 3px solid #269aa2; outline-offset: 3px; } /* Override any generic button background rules in purple mode */ html[data-theme="purple"] .theme-toggle-btn, html[data-theme="purple"] .theme-toggle-btn:hover, html[data-theme="purple"] .theme-toggle-btn:focus, html[data-theme="purple"] .theme-toggle-btn:active { background: transparent; border: none; color: transparent; box-shadow: none; } /* Completely hide label text */ .theme-toggle-btn .theme-toggle-label { display: none; }