/* ========================================================= BLUE HIPPO — PRODUCTION CSS (CLEANED + VIPPO FIXED) - Brand fonts preserved everywhere - Header compact - Buttons: pill globally, but colors scoped to product tiles + key CTAs - VIPpo capsule: single source of truth (centered desktop + no mobile overflow) ========================================================= */ /* ========================= 0. BRAND TOKENS ========================= */ :root{ --bh-ink: #21275c; --bh-ink-soft: #3e3472; --bh-accent: #704c9f; --bh-lavender: #c1a5cf; --bh-ice: #f0ece7; --bh-radius-soft: 14px; --bh-radius-input: 12px; --bh-radius-btn: 999px; --bh-radius-card: 16px; --bh-font-primary: "BH Brown", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* ========================= 1. BRAND FONTS ========================= */ @font-face{ font-family:"BH Brown"; src:url("https://bluehippo.zohoecommerce.com/files/brown_regular.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:"BH Brown"; src:url("https://bluehippo.zohoecommerce.com/files/brownstd-bold.ttf") format("truetype"); font-weight:700; font-style:normal; font-display:swap; } /* ========================= 2. GLOBAL TYPE LOCK (forces BH Brown across Zoho theme elements) ========================= */ html, body{ font-family: var(--bh-font-primary) !important; color: var(--bh-ink); } body, p, span, div, li, input, textarea, select, button{ font-family: var(--bh-font-primary) !important; } h1,h2,h3,h4,h5,h6, .zpheading, .theme-section-heading, .theme-product-name, .theme-product-name a, .theme-menu-name, .theme-product-price{ font-family: var(--bh-font-primary) !important; font-weight: 700 !important; } /* If the theme is still fighting fonts in some widgets */ *{ font-family: var(--bh-font-primary) !important; } /* ========================= 3. GLOBAL BUTTON SHAPE ONLY (SAFE) Keep your site “pill”, but DO NOT override colors globally ========================= */ button, input[type="button"], input[type="submit"], input[type="reset"], a[role="button"], .zpbutton, .zp-btn, .zc-btn{ border-radius: var(--bh-radius-btn) !important; font-family: var(--bh-font-primary) !important; font-weight: 700 !important; } /* ========================= 4. FORMS ========================= */ input, select, textarea{ border-radius: var(--bh-radius-input) !important; } /* ========================= 5. MOBILE VERTICAL RHYTHM (LESS DEAD SPACE) ========================= */ @media (max-width: 767px){ section, .zpsection, .theme-section{ padding-top: 26px !important; padding-bottom: 26px !important; } } /* ========================= 6. VIPPO / JOIN — CAPSULE (SINGLE SOURCE OF TRUTH) - No blue background band - Centered on desktop (no right shift) - Mobile never overflows right edge ========================= */ .bh-join{ background: transparent !important; padding: 12px 0 !important; /* adjust spacing under hero */ margin: 0 !important; display: flex !important; /* force true centering even if theme uses grid/flex weirdly */ justify-content: center !important; align-items: center !important; } .bh-join .bh-capsule{ /* The actual purple capsule */ background-color: var(--bh-accent) !important; border-radius: var(--bh-radius-card) !important; box-shadow: 0 14px 34px rgba(0,0,0,0.22) !important; /* Perfect centering */ margin-left: auto !important; margin-right: auto !important; /* Stable sizing: never use 100vw here (causes shifting/overflow) */ width: 100% !important; max-width: 980px !important; /* Side breathing room so full rounded corners are always visible */ padding: 28px 20px !important; box-sizing: border-box !important; text-align: center !important; } /* Typography inside capsule */ .bh-join .bh-capsule h2{ color:#fff !important; font-size: clamp(1.5rem, 2vw, 2rem) !important; line-height: 1.1 !important; margin: 0 0 10px !important; } .bh-join .bh-capsule p{ color: rgba(255,255,255,0.92) !important; font-size: 15px !important; line-height: 1.45 !important; margin: 0 auto 14px !important; } /* Keep pill shape in capsule buttons */ .bh-join .bh-btn, .bh-join a[role="button"], .bh-join button{ border-radius: var(--bh-radius-btn) !important; } /* VIPPO REFINEMENT — HEART + BUTTON (kept, cleaned) */ .bh-join-eyebrow{ font-size: clamp(1.6rem, 2.4vw, 2rem) !important; font-weight: 700 !important; letter-spacing: .02em !important; line-height: 1.2 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; margin-bottom: 14px !important; } .bh-heart{ font-size: 1.5rem; line-height: 1; } .bh-vippo-btn{ padding: 10px 22px !important; font-size: 15px !important; line-height: 1 !important; border-radius: 999px !important; } .bh-join-micro{ font-size: 13px !important; opacity: 0.9; margin-top: 12px !important; } /* Mobile: prevent right overflow + keep equal margins */ @media (max-width: 767px){ .bh-join{ padding: 10px 0 !important; } .bh-join .bh-capsule{ /* This is the key: create equal side margins on any phone */ width: calc(100% - 32px) !important; /* 16px margin each side */ max-width: 560px !important; padding: 22px 16px !important; border-radius: 16px !important; } .bh-join-eyebrow{ font-size: 1.2rem !important; } .bh-heart{ font-size: 1.4rem; } .bh-vippo-btn{ padding: 9px 20px !important; font-size: 14px !important; } } /* ========================= 7. BOTANICALS SECTION (reduce extra space) Add class .bh-botanicals to that section ========================= */ .bh-botanicals{ background: var(--bh-ink) !important; padding-top: 26px !important; padding-bottom: 18px !important; margin-bottom: 0 !important; } /* ========================= 8. PRODUCT TILES — BUTTON COLORS (SCOPED ONLY) ========================= */ .theme-product-button-area, .theme-product-view-details{ display:flex !important; justify-content:center !important; align-items:center !important; width:100% !important; } /* Base button sizing inside product cards */ .theme-product-button-area a, .theme-product-button-area button, .theme-product-view-details a{ display:inline-flex !important; justify-content:center !important; align-items:center !important; min-width: 180px !important; padding: 12px 22px !important; border-radius: var(--bh-radius-btn) !important; font-family: var(--bh-font-primary) !important; font-weight: 700 !important; text-decoration:none !important; } /* Add to cart = accent */ .theme-product-button-area a, .theme-product-button-area button, a.theme-cart-button{ background-color: var(--bh-accent) !important; border: 2px solid var(--bh-accent) !important; color:#fff !important; } /* View details / select options = outline ink */ .theme-product-view-details a{ background: transparent !important; border: 2px solid var(--bh-ink) !important; color: var(--bh-ink) !important; } /* Hover (only product buttons) */ .theme-product-button-area a:hover, .theme-product-button-area button:hover{ background-color: var(--bh-ink) !important; border-color: var(--bh-ink) !important; } .theme-product-view-details a:hover{ background-color: rgba(112, 76, 159, 0.12) !important; border-color: var(--bh-accent) !important; } /* ========================= PRODUCT TILE BUTTONS — SMALLER (DESKTOP + MOBILE) ========================= */ .theme-product-button-area a, .theme-product-button-area button, .theme-product-view-details a{ min-width: 140px !important; padding: 9px 14px !important; font-size: 13px !important; line-height: 1.1 !important; } @media (max-width: 767px){ .theme-product-button-area a, .theme-product-button-area button, .theme-product-view-details a{ width: 88% !important; max-width: 220px !important; min-width: 0 !important; padding: 8px 12px !important; font-size: 13px !important; } .theme-product-button-area, .theme-product-view-details{ justify-content: center !important; } } /* ========================= 9. HEADER (colors + compact) ========================= */ .theme-header, .zpheader, .zpcontainer > .theme-header, header[role="banner"], .theme-banner-base-header, [data-header="zptheme-data-header"], [data-banner-base-header="theme-banner-base-header"], .zph-navbar, .zph-header, .mobile-header, .zp-header, .zp-header-container{ background: var(--bh-lavender) !important; border: none !important; box-shadow: none !important; } .theme-menu-name, .theme-header a, .zpheader a, .zph-navbar a{ color: var(--bh-ink) !important; font-weight: 600 !important; } .theme-header svg path, .theme-header svg circle, .theme-header svg line, .zph-navbar svg path, .zph-navbar svg circle, .zph-navbar svg line, .mobile-header svg path, .mobile-header svg circle, .mobile-header svg line{ stroke: var(--bh-ink) !important; fill: var(--bh-ink) !important; } /* hide currency selector */ .theme-currency-non-res, .theme-curency-option-left-space, [data-theme-currency-placeholder-non-res], [data-theme-currency-list-container], [data-theme-currency-hide-overlay], .theme-currency-open-label, .theme-currency-close-icon-container{ display:none !important; height:0 !important; padding:0 !important; margin:0 !important; visibility:hidden !important; } /* compact header sizing */ .theme-header, .zpheader, .zph-navbar, .zph-header, .zp-header, .zp-header-container{ padding-top: 6px !important; padding-bottom: 6px !important; min-height: 54px !important; } .theme-header img, .zpheader img, .zph-navbar img, .mobile-header img, .theme-header svg, .zpheader svg, .zph-navbar svg, .mobile-header svg{ max-height: 32px !important; height:auto !important; width:auto !important; } @media (max-width: 767px){ .theme-header, .zpheader, .zph-navbar, .mobile-header, .zp-header, .zp-header-container{ padding: 4px 10px !important; min-height: 46px !important; } .theme-header img, .zpheader img, .zph-navbar img, .mobile-header img, .theme-header svg, .zpheader svg, .zph-navbar svg, .mobile-header svg{ max-height: 24px !important; } .theme-menu-name, .theme-header a, .zpheader a, .zph-navbar a{ font-size: 13px !important; } } /* ========================= HERO BANNER TEXT COLOR — FORCE BRAND INK ========================= */ .theme-banner h1, .theme-banner h2, .theme-banner .zpheading, .theme-banner .zptext, .theme-banner-base-header ~ * h1, .theme-banner-base-header ~ * h2{ color: #21275c !important; } /* ========================= PROMISES STRIP — FULL WIDTH ========================= */ .bh-promises{ background:#21275c; padding:58px 16px; width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); } .bh-promises__inner{ max-width:1080px; margin:0 auto; text-align:center; } .bh-promises__title{ color: var(--bh-ice); font-size:clamp(1.6rem,2.4vw,2rem); margin-bottom:32px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; } .bh-promises__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:36px; align-items:flex-start; } .bh-promise{ text-align:left; padding:0 8px; } .bh-promise h3{ display:flex; align-items:center; gap:12px; color: var(--bh-ice); font-size:1rem; margin:0 0 10px; font-weight:700; } .bh-promise img{ width:34px; height:auto; filter:brightness(0) invert(1); opacity:.95; margin:0; } .bh-promise p{ color: rgba(240,236,231,0.87) !important; /* based on #f0ece7 */
  font-size:.85rem;
  line-height:1.5;
  margin:0 0 0 46px; } @media (max-width: 900px){ .bh-promises__grid{ grid-template-columns:repeat(2,1fr); gap:26px; } } @media (max-width: 600px){ .bh-promises{ padding:42px 12px; } .bh-promises__grid{ grid-template-columns:1fr; gap:28px; } } /* Product page copy (Short Description / Description) */ .bh-copy{ font-family:"BH Brown", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; color:#21275c; } .bh-copy .bh-kicker{ font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin:0 0 8px 0; line-height:1.2; } .bh-copy .bh-lede{ margin:0 0 14px 0; /* controls the gap under your intro */ line-height:1.5; font-weight:400; } .bh-copy .bh-h{ margin:12px 0 8px 0; /* tighter heading spacing */ font-weight:700; font-size:22px; /* match your visual style */ line-height:1.15; color:#21275c; } .bh-copy .bh-list{ margin:0 0 14px 0; /* removes Zoho’s default big gaps */ padding-left:18px; /* clean indent */ line-height:1.45; } .bh-copy .bh-list li{ margin:4px 0; /* THIS is the key to fixing the “too much space” */ } .bh-copy .bh-small{ margin:0; line-height:1.55; font-weight:400; } .bh-copy .bh-lines{ margin:0 0 14px 0; } .bh-copy .bh-line{ margin:4px 0; line-height:1.45; } .bh-copy .bh-bullet{ display:inline-block; width:14px; } /* ========================================================= BLUE HIPPO – NUCLEAR Color Swatch Buttons (NO DOT) Forces pill + full background swatch on Zoho product page ========================================================= */ /* ---------- 1) Force the variant container to behave ---------- */ html body .theme-content-area .theme-content-container .theme-product-details-style-10 .theme-product-detail-container .theme-product-varients-conatiner{ margin-top: 8px !important; } /* ---------- 2) Target ONLY Color attribute labels (max chain) ---------- */ html body .theme-content-area .theme-content-container .theme-product-details-style-10 .theme-product-detail-container .theme-product-varients-conatiner .theme-product-variant[data-zs-product-variant-container="Color"] fieldset.theme-variant-select-container span.theme-product-variant > label[data-theme-variant-label]{ /* pill button */ display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 12px 18px !important; margin: 6px 12px 6px 0 !important; min-height: 44px !important; min-width: 120px !important; border-radius: 999px !important; border: 1px solid rgba(33,39,92,0.25) !important; background: #ffffff !important; color: #21275c !important; font-family: "BH Brown", system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important; font-weight: 700 !important; font-size: 13px !important; letter-spacing: 0.01em !important; line-height: 1 !important; cursor: pointer !important; transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease !important; /* kill inherited weirdness */ box-shadow: none !important; outline: none !important; text-decoration: none !important; position: relative !important; overflow: hidden !important; } /* ---------- 3) REMOVE the radio dot (but keep input for logic) ---------- */ html body .theme-content-area .theme-content-container .theme-product-details-style-10 .theme-product-detail-container .theme-product-varients-conatiner .theme-product-variant[data-zs-product-variant-container="Color"] fieldset.theme-variant-select-container span.theme-product-variant > label[data-theme-variant-label] input[type="radio"]{ position: absolute !important; opacity: 0 !important; pointer-events: none !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; appearance: none !important; -webkit-appearance: none !important; } /* ---------- 4) Hover + Selected (Zoho uses aria-checked on label) ---------- */ html body .theme-content-area .theme-content-container .theme-product-details-style-10 .theme-product-detail-container .theme-product-varients-conatiner .theme-product-variant[data-zs-product-variant-container="Color"] fieldset.theme-variant-select-container span.theme-product-variant > label[data-theme-variant-label]:hover{ border-color: rgba(33,39,92,0.60) !important; box-shadow: 0 10px 22px rgba(33,39,92,0.14) !important; transform: translateY(-1px) !important; } html body .theme-content-area .theme-content-container .theme-product-details-style-10 .theme-product-detail-container .theme-product-varients-conatiner .theme-product-variant[data-zs-product-variant-container="Color"] fieldset.theme-variant-select-container span.theme-product-variant > label[data-theme-variant-label][aria-checked="true"]{ border-color: #21275c !important; box-shadow: 0 0 0 2px #21275c inset, 0 10px 22px rgba(33,39,92,0.12) !important; transform: none !important; } /* ========================================================= 5) SWATCH BACKGROUNDS — use the option-id values from YOUR HTML Full button background = swatch ========================================================= */ /* Desert Cream */ html body .theme-content-area .theme-content-container .theme-product-details-style-10 .theme-product-detail-container .theme-product-varients-conatiner label[for="option-id-5666950000003212324"]{ background: #fff7cd !important; color: #21275c !important; } /* Siwa Sienna */ html body .theme-content-area .theme-content-container .theme-product-details-style-10 .theme-product-detail-container .theme-product-varients-conatiner label[for="option-id-5666950000003212326"]{ background: #c16a45 !important; color: #ffffff !important; border-color: rgba(0,0,0,0.16) !important; } /* Cairo Rose */ html body .theme-content-area .theme-content-container .theme-product-details-style-10 .theme-product-detail-container .theme-product-varients-conatiner label[for="option-id-5666950000003213059"]{ background: #d58aa0 !important; color: #21275c !important; } /* Dune Clay */ html body .theme-content-area .theme-content-container .theme-product-details-style-10 .theme-product-detail-container .theme-product-varients-conatiner label[for="option-id-5666950000003213067"]{ background: #b07a5a !important; color: #ffffff !important; border-color: rgba(0,0,0,0.16) !important; } /* Optional: if a swatch is super light, ensure border always visible */ html body .theme-content-area .theme-content-container .theme-product-details-style-10 .theme-product-detail-container .theme-product-varients-conatiner label[for="option-id-5666950000003212324"]{ border-color: rgba(33,39,92,0.35) !important; } /* ========================================================= BLUE HIPPO — REMOVE PRODUCT GRID SHIMMER/SKELETON LOADER Fixes the “horizon” gradient before images render (Home / Shop / Category grids) ========================================================= */ /* 1) Hide the skeleton loader layer */ .theme-product-image-loader-dots, [data-theme-product-image-skeleton-loader]{ display: none !important; background: none !important; } /* 2) Kill shimmer animation applied to images while loading */ .theme-product-image-area img.theme-shimmer-animation, .zs-product-grid img.theme-shimmer-animation, .zs-product-list-container img.theme-shimmer-animation{ animation: none !important; -webkit-animation: none !important; background: none !important; background-image: none !important; } /* 3) Ensure nothing overlays/dims product images */ .theme-product-image-area::before, .theme-product-image-area::after{ content: none !important; display: none !important; }
body{
  background: var(--bh-ice) !important;
}