/* ==================================================================== BebeClub — 4 STYLE VARIANTS Activate by adding class to : style-modern | style-luxe | style-pop | style-earth ==================================================================== */ /* ────────────────────────────────────── COMMON — base CSS variables (defaults rose) ────────────────────────────────────── */ body { --bc-bg: #FFFFFF; --bc-bg-soft: #FBF7F4; --bc-bg-card: #FBF7F4; --bc-ink: #1A1F2E; --bc-ink-700: #2D3344; --bc-ink-500: #4A5160; --bc-ink-400: #6B7280; --bc-line: #E5E7EB; --bc-primary: #C4707A; --bc-primary-700: #A05560; --bc-primary-50: #FBEFF1; --bc-accent: #E5A93B; --bc-coral: #E63946; --bc-mint: #2EC4B6; --bc-radius: 999px; --bc-radius-card: 12px; --bc-radius-sm: 8px; --bc-font-display: "Fraunces", Georgia, serif; --bc-font-body: "DM Sans", system-ui, sans-serif; --bc-shadow: 0 4px 14px rgba(26,31,46,.08); --bc-shadow-strong: 0 8px 22px rgba(196,112,122,.35); } /* ────────────────────────────────────── 01 — MODERN MINIMAL · Black + Electric Blue ────────────────────────────────────── */ body.style-modern { --bc-bg: #FFFFFF; --bc-bg-soft: #F5F5F7; --bc-bg-card: #FFFFFF; --bc-ink: #0A0A0F; --bc-ink-700: #1A1F2E; --bc-ink-500: #4A5160; --bc-ink-400: #6B7280; --bc-line: #E5E7EB; --bc-primary: #0066FF; --bc-primary-700: #0052CC; --bc-primary-50: #E5F0FF; --bc-accent: #0066FF; --bc-coral: #FF3B30; --bc-mint: #22C55E; --bc-radius: 8px; --bc-radius-card: 12px; --bc-radius-sm: 6px; --bc-font-display: "Inter", system-ui, sans-serif; --bc-font-body: "Inter", system-ui, sans-serif; --bc-shadow: 0 1px 3px rgba(0,0,0,.06); --bc-shadow-strong: 0 4px 14px rgba(0,102,255,.25); } body.style-modern h1, body.style-modern h2, body.style-modern h3, body.style-modern .product_title { letter-spacing: -.025em !important; font-weight: 800 !important; } body.style-modern .bc-topbar { background: #0A0A0F !important; font-weight: 500 !important; } body.style-modern .bc-topbar-code { background: #0066FF !important; color: white !important; } body.style-modern .bc-hero { background: white !important; border-bottom: 1px solid #E5E7EB; } body.style-modern .bc-hero-cta, body.style-modern .single_add_to_cart_button, body.style-modern .checkout-button, body.style-modern .wc-proceed-to-checkout a { background: #0A0A0F !important; color: white !important; border-radius: 8px !important; box-shadow: none !important; font-weight: 600 !important; } body.style-modern .bc-hero-cta--ghost { background: white !important; color: #0A0A0F !important; border: 1px solid #E5E7EB !important; } body.style-modern .bc-header-fid { background: #0066FF !important; color: white !important; border-radius: 8px !important; } body.style-modern .bc-pdp-now { color: #0A0A0F !important; font-weight: 800 !important; } body.style-modern .bc-prod-price-now { color: #0A0A0F !important; } body.style-modern .bc-pdp-save { background: #0066FF !important; } body.style-modern .bc-category-card { border-radius: 12px !important; } body.style-modern a.bc-nav-link.bc-nav-promo { background: #FF3B30 !important; } /* ────────────────────────────────────── 02 — PREMIUM LUXE · Cream + Gold + Brown ────────────────────────────────────── */ body.style-luxe { --bc-bg: #FBF6EE; --bc-bg-soft: #F5EFE2; --bc-bg-card: #FFFFFF; --bc-ink: #2A1F18; --bc-ink-700: #4A3A2D; --bc-ink-500: #6B5A4C; --bc-ink-400: #9C8A78; --bc-line: rgba(42,31,24,.12); --bc-primary: #2A1F18; --bc-primary-700: #1A130E; --bc-primary-50: #F5EFE2; --bc-accent: #B8943F; --bc-coral: #B8943F; --bc-mint: #6B8E5A; --bc-radius: 0px; --bc-radius-card: 0px; --bc-radius-sm: 0px; --bc-font-display: "Playfair Display", Georgia, serif; --bc-font-body: "Inter", system-ui, sans-serif; --bc-shadow: 0 2px 8px rgba(42,31,24,.08); --bc-shadow-strong: 0 6px 22px rgba(42,31,24,.18); } body.style-luxe { background: #FBF6EE !important; } body.style-luxe h1, body.style-luxe h2, body.style-luxe h3, body.style-luxe .product_title, body.style-luxe .bc-pdp-now, body.style-luxe .bc-prod-price-now, body.style-luxe .bc-prod-name { font-family: "Playfair Display", Georgia, serif !important; font-weight: 700 !important; letter-spacing: -.005em !important; } body.style-luxe .bc-topbar { background: #2A1F18 !important; color: #FBF6EE !important; font-size: 12px !important; letter-spacing: .04em !important; } body.style-luxe .bc-topbar-code { background: #B8943F !important; color: #2A1F18 !important; border-radius: 0 !important; } body.style-luxe .bc-hero { background: #FBF6EE !important; } body.style-luxe .bc-hero-cta, body.style-luxe .single_add_to_cart_button, body.style-luxe .checkout-button, body.style-luxe .wc-proceed-to-checkout a { background: #2A1F18 !important; color: #FBF6EE !important; border-radius: 0 !important; letter-spacing: .08em !important; text-transform: uppercase !important; font-weight: 600 !important; font-size: 12.5px !important; box-shadow: none !important; } body.style-luxe .bc-hero-cta--ghost { background: transparent !important; color: #2A1F18 !important; border: 1px solid #2A1F18 !important; } body.style-luxe .bc-header-fid { background: #2A1F18 !important; color: #B8943F !important; border-radius: 0 !important; letter-spacing: .12em !important; text-transform: uppercase !important; font-weight: 600 !important; font-size: 11px !important; } body.style-luxe a.bc-nav-link.bc-nav-promo { background: #2A1F18 !important; color: #B8943F !important; border-radius: 0 !important; } body.style-luxe .bc-prod, body.style-luxe .bc-category-card { border-radius: 0 !important; } body.style-luxe .bc-pdp-save { background: #2A1F18 !important; color: #B8943F !important; border-radius: 0 !important; font-family: "Inter", sans-serif !important; } body.style-luxe .bc-prod-brand { font-family: "Inter", sans-serif !important; letter-spacing: .14em !important; color: #B8943F !important; } /* ────────────────────────────────────── 03 — POP COLORÉ JOYEUX · Multi-accent + Quicksand ────────────────────────────────────── */ body.style-pop { --bc-bg: #FFFAF3; --bc-bg-soft: #FFF0EB; --bc-bg-card: #FFFFFF; --bc-ink: #2A1F18; --bc-ink-700: #2A1F18; --bc-ink-500: #6B5A4C; --bc-ink-400: #9C8A78; --bc-line: #FFE0D6; --bc-primary: #FF6B6B; --bc-primary-700: #E84545; --bc-primary-50: #FFE0E0; --bc-accent: #FFD93D; --bc-coral: #FF6B6B; --bc-mint: #4ECDC4; --bc-radius: 999px; --bc-radius-card: 18px; --bc-radius-sm: 12px; --bc-font-display: "Quicksand", system-ui, sans-serif; --bc-font-body: "Quicksand", system-ui, sans-serif; --bc-shadow: 0 4px 0 rgba(42,31,24,.12); --bc-shadow-strong: 0 6px 0 #2A8A85; } body.style-pop * { font-family: "Quicksand", system-ui, sans-serif !important; } body.style-pop h1, body.style-pop h2, body.style-pop .bc-pdp-now, body.style-pop .bc-prod-price-now { font-weight: 700 !important; letter-spacing: -.01em !important; } body.style-pop .bc-topbar { background: #FF6B6B !important; color: white !important; font-weight: 600 !important; } body.style-pop .bc-topbar-code { background: #FFD93D !important; color: #2A1F18 !important; border-radius: 999px !important; } body.style-pop .bc-hero { background: linear-gradient(135deg, #FFE0B2 0%, #FFB7B7 50%, #B5E6E6 100%) !important; } body.style-pop .bc-hero-cta, body.style-pop .single_add_to_cart_button, body.style-pop .checkout-button, body.style-pop .wc-proceed-to-checkout a { background: #4ECDC4 !important; color: #2A1F18 !important; border-radius: 999px !important; font-weight: 700 !important; box-shadow: 0 6px 0 #2A8A85 !important; } body.style-pop .bc-hero-cta:hover { transform: translateY(2px) !important; box-shadow: 0 4px 0 #2A8A85 !important; } body.style-pop .bc-hero-cta--ghost { background: white !important; color: #2A1F18 !important; box-shadow: 0 6px 0 #BBB5AE !important; } body.style-pop .bc-header-fid { background: #FFD93D !important; color: #2A1F18 !important; } body.style-pop a.bc-nav-link.bc-nav-promo { background: #FF6B6B !important; color: white !important; } body.style-pop .bc-prod { border: 2px dashed #FFB7B7 !important; border-radius: 18px !important; } body.style-pop .bc-pdp-save { background: #FFD93D !important; color: #2A1F18 !important; transform: rotate(-2deg); box-shadow: 0 3px 0 #C9A929 !important; } body.style-pop .bc-pdp-now { color: #FF6B6B !important; } body.style-pop .bc-prod-price-now { color: #FF6B6B !important; } body.style-pop .bc-category-card { border-radius: 22px !important; } /* ────────────────────────────────────── 04 — NATUREL BIO EARTH · Sage + Terracotta + Cream ────────────────────────────────────── */ body.style-earth { --bc-bg: #F4EDE0; --bc-bg-soft: #EAE0CD; --bc-bg-card: #FFFFFF; --bc-ink: #3D4A33; --bc-ink-700: #4A5840; --bc-ink-500: #6B7B5E; --bc-ink-400: #9CA08F; --bc-line: rgba(107,123,94,.18); --bc-primary: #6B8E5A; --bc-primary-700: #4F6E40; --bc-primary-50: #E8EFE0; --bc-accent: #C77B4D; --bc-coral: #C77B4D; --bc-mint: #6B8E5A; --bc-radius: 4px; --bc-radius-card: 6px; --bc-radius-sm: 4px; --bc-font-display: "Marcellus", Georgia, serif; --bc-font-body: "Inter", system-ui, sans-serif; --bc-shadow: 0 2px 8px rgba(61,74,51,.08); --bc-shadow-strong: 0 6px 18px rgba(107,142,90,.25); } body.style-earth { background: #F4EDE0 !important; } body.style-earth h1, body.style-earth h2, body.style-earth h3, body.style-earth .product_title, body.style-earth .bc-prod-name { font-family: "Marcellus", Georgia, serif !important; font-weight: 400 !important; color: #3D4A33 !important; letter-spacing: -.005em !important; } body.style-earth .bc-topbar { background: #3D4A33 !important; color: #F4EDE0 !important; } body.style-earth .bc-topbar-code { background: #C77B4D !important; color: white !important; border-radius: 4px !important; } body.style-earth .bc-hero { background: #F4EDE0 !important; } body.style-earth .bc-hero h1 em { color: #C77B4D !important; } body.style-earth .bc-hero-cta, body.style-earth .single_add_to_cart_button, body.style-earth .checkout-button, body.style-earth .wc-proceed-to-checkout a { background: #6B8E5A !important; color: white !important; border-radius: 4px !important; font-weight: 500 !important; letter-spacing: .04em !important; box-shadow: none !important; } body.style-earth .bc-hero-cta--ghost { background: transparent !important; color: #3D4A33 !important; border: 1px solid #3D4A33 !important; } body.style-earth .bc-header-fid { background: #6B8E5A !important; color: white !important; border-radius: 4px !important; } body.style-earth a.bc-nav-link.bc-nav-promo { background: #C77B4D !important; color: white !important; border-radius: 4px !important; } body.style-earth a.bc-nav-link.bc-nav-promo::before { content: "🌿" !important; } body.style-earth .bc-prod, body.style-earth .bc-category-card { border-radius: 6px !important; } body.style-earth .bc-pdp-save { background: #C77B4D !important; color: white !important; border-radius: 4px !important; } body.style-earth .bc-pdp-now { color: #3D4A33 !important; font-weight: 600 !important; } body.style-earth .bc-prod-brand { color: #6B8E5A !important; letter-spacing: .14em !important; } /* ────────────────────────────────────── FLOATING STYLE SWITCHER (admin only) ────────────────────────────────────── */ #bc-style-switcher { position: fixed; bottom: 90px; left: 16px; z-index: 99998; background: white; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,.18); padding: 14px; font-family: "DM Sans", sans-serif; font-size: 12px; width: 200px; border: 1px solid rgba(0,0,0,.08); } #bc-style-switcher h6 { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #6B7280; margin: 0 0 10px; } #bc-style-switcher .bc-style-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } #bc-style-switcher button { background: white; border: 1px solid #E5E7EB; border-radius: 8px; padding: 10px 8px; font-size: 11px; font-weight: 600; color: #1A1F2E; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 5px; transition: all .15s; } #bc-style-switcher button:hover { border-color: #C4707A; transform: translateY(-1px); } #bc-style-switcher button.active { border-color: #1A1F2E; background: #1A1F2E; color: white; } #bc-style-switcher .swatches { display: flex; gap: 2px; } #bc-style-switcher .swatch { width: 10px; height: 10px; border-radius: 2px; border: 1px solid rgba(0,0,0,.04); } #bc-style-switcher .bc-share { margin-top: 10px; padding-top: 10px; border-top: 1px solid #E5E7EB; font-size: 10px; color: #6B7280; } #bc-style-switcher .bc-share a { color: #C4707A; font-weight: 700; cursor: pointer; } #bc-style-switcher-toggle { position: fixed; bottom: 24px; left: 24px; z-index: 99997; width: 44px; height: 44px; border-radius: 999px; background: #1A1F2E; color: white; border: none; cursor: pointer; font-size: 20px; box-shadow: 0 6px 18px rgba(0,0,0,.25); } #bc-style-switcher[hidden] { display: none; }