/** * BedSync Dealer Site Themes * 12 complete themes — fonts, colors, buttons, cards, layout * Applied via [data-color-scheme="theme-name"] on */ /* ===== DEFAULT: Clean Slate ===== */ :root { --primary-gradient-start: #1a1a2e; --primary-gradient-end: #16213e; --primary-color: #1a1a2e; --secondary-color: #16213e; --accent-color: #e94560; --button-color: #e94560; --background: #ffffff; --header-bg: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); --card-bg: #ffffff; --card-border: #e5e7eb; --card-shadow: 0 2px 12px rgba(0,0,0,0.08); --card-radius: 12px; --btn-radius: 8px; --btn-shadow: 0 2px 8px rgba(0,0,0,0.15); --btn-text-transform: none; --btn-letter-spacing: 0; --btn-font-weight: 600; --text-dark: #111827; --text-light: #6b7280; --border: #e5e7eb; --font-heading: 'Outfit', -apple-system, sans-serif; --font-body: 'DM Sans', -apple-system, sans-serif; --nav-style: solid; --hero-overlay: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.4)); --footer-bg: #111827; --footer-text: #9ca3af; --section-spacing: 3rem; --grid-gap: 1.5rem; } /* ===== 1. MIDNIGHT LUXE — Dark luxury, gold accents ===== */ [data-color-scheme="midnight-luxe"] { --primary-gradient-start: #0f0f0f; --primary-gradient-end: #1a1a1a; --primary-color: #0f0f0f; --secondary-color: #1a1a1a; --accent-color: #c9a84c; --button-color: #c9a84c; --background: #0a0a0a; --header-bg: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%); --card-bg: #141414; --card-border: #2a2a2a; --card-shadow: 0 4px 20px rgba(0,0,0,0.4); --card-radius: 4px; --btn-radius: 0; --btn-shadow: 0 0 20px rgba(201,168,76,0.3); --btn-text-transform: uppercase; --btn-letter-spacing: 2px; --btn-font-weight: 500; --text-dark: #f1f1f1; --text-light: #999; --border: #2a2a2a; --font-heading: 'Playfair Display', Georgia, serif; --font-body: 'Cormorant Garamond', Georgia, serif; --hero-overlay: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.7)); --footer-bg: #0a0a0a; --footer-text: #666; } [data-color-scheme="midnight-luxe"] body { background: #0a0a0a; color: #f1f1f1; } [data-color-scheme="midnight-luxe"] .mattress-card { background: #141414; border: 1px solid #2a2a2a; } [data-color-scheme="midnight-luxe"] .mattress-info { color: #e0e0e0; } [data-color-scheme="midnight-luxe"] .mattress-title { color: #c9a84c; } [data-color-scheme="midnight-luxe"] .mattress-detail-item .label { color: #888; } [data-color-scheme="midnight-luxe"] .mattress-detail-item .value { color: #ccc; } [data-color-scheme="midnight-luxe"] .inquire-btn { background: #c9a84c; color: #000; border-radius: 0; text-transform: uppercase; letter-spacing: 2px; } [data-color-scheme="midnight-luxe"] .inquire-btn:hover { background: #d4b65c; } [data-color-scheme="midnight-luxe"] .welcome-section { background: #0f0f0f; } [data-color-scheme="midnight-luxe"] .welcome-section h2 { color: #c9a84c; } [data-color-scheme="midnight-luxe"] .welcome-section p { color: #999; } [data-color-scheme="midnight-luxe"] .feature-card { background: #141414; border: 1px solid #2a2a2a; } [data-color-scheme="midnight-luxe"] .feature-card h3 { color: #c9a84c; } [data-color-scheme="midnight-luxe"] .feature-card p { color: #999; } [data-color-scheme="midnight-luxe"] footer { background: #0a0a0a; border-top: 1px solid #1a1a1a; } [data-color-scheme="midnight-luxe"] .inventory-count { color: #999; } [data-color-scheme="midnight-luxe"] .filters select { background: #141414; color: #e0e0e0; border-color: #2a2a2a; } [data-color-scheme="midnight-luxe"] #status-filter { background: #141414; color: #e0e0e0; border-color: #2a2a2a; } /* ===== 2. COASTAL BREEZE — Light, airy, beach vibes ===== */ [data-color-scheme="coastal-breeze"] { --primary-gradient-start: #1e6091; --primary-gradient-end: #457b9d; --primary-color: #1e6091; --secondary-color: #457b9d; --accent-color: #e76f51; --button-color: #1e6091; --background: #f8fbff; --header-bg: linear-gradient(135deg, #1e6091 0%, #457b9d 100%); --card-bg: #ffffff; --card-border: #d4e8f7; --card-shadow: 0 2px 16px rgba(30,96,145,0.08); --card-radius: 16px; --btn-radius: 24px; --btn-shadow: 0 4px 12px rgba(30,96,145,0.2); --btn-text-transform: none; --btn-letter-spacing: 0.5px; --btn-font-weight: 600; --text-dark: #1d3557; --text-light: #6b8aab; --border: #d4e8f7; --font-heading: 'Poppins', sans-serif; --font-body: 'Nunito', sans-serif; --footer-bg: #1d3557; --footer-text: #8db8d9; } [data-color-scheme="coastal-breeze"] body { background: #f8fbff; color: #1d3557; } [data-color-scheme="coastal-breeze"] .mattress-card { border-radius: 16px; border: 1px solid #d4e8f7; } [data-color-scheme="coastal-breeze"] .inquire-btn { border-radius: 24px; } [data-color-scheme="coastal-breeze"] .welcome-section { background: #eef6ff; } [data-color-scheme="coastal-breeze"] .feature-card { border-radius: 16px; border: 1px solid #d4e8f7; } /* ===== 3. HERITAGE CLASSIC — Traditional, trustworthy ===== */ [data-color-scheme="heritage-classic"] { --primary-gradient-start: #2c3e50; --primary-gradient-end: #1a252f; --primary-color: #2c3e50; --secondary-color: #8b0000; --accent-color: #8b0000; --button-color: #8b0000; --background: #faf9f6; --header-bg: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%); --card-bg: #ffffff; --card-border: #d4cfc4; --card-shadow: 0 1px 8px rgba(0,0,0,0.06); --card-radius: 4px; --btn-radius: 4px; --btn-shadow: none; --btn-text-transform: uppercase; --btn-letter-spacing: 1.5px; --btn-font-weight: 700; --text-dark: #2c3e50; --text-light: #7f8c8d; --border: #d4cfc4; --font-heading: 'Merriweather', Georgia, serif; --font-body: 'Source Sans 3', sans-serif; --footer-bg: #2c3e50; --footer-text: #95a5a6; } [data-color-scheme="heritage-classic"] body { background: #faf9f6; } [data-color-scheme="heritage-classic"] .mattress-card { border-radius: 4px; border-bottom: 3px solid #8b0000; } [data-color-scheme="heritage-classic"] .inquire-btn { border-radius: 4px; text-transform: uppercase; letter-spacing: 1.5px; font-size: 0.8rem; } [data-color-scheme="heritage-classic"] .welcome-section h2 { font-style: italic; } /* ===== 4. NORDIC FROST — Minimal, icy, Scandinavian ===== */ [data-color-scheme="nordic-frost"] { --primary-gradient-start: #2d3436; --primary-gradient-end: #636e72; --primary-color: #2d3436; --secondary-color: #636e72; --accent-color: #00b894; --button-color: #2d3436; --background: #ffffff; --header-bg: #2d3436; --card-bg: #f9fafb; --card-border: #e8ecef; --card-shadow: none; --card-radius: 2px; --btn-radius: 2px; --btn-shadow: none; --btn-text-transform: uppercase; --btn-letter-spacing: 3px; --btn-font-weight: 400; --text-dark: #2d3436; --text-light: #adb5bd; --border: #e8ecef; --font-heading: 'Inter', sans-serif; --font-body: 'Inter', sans-serif; --footer-bg: #2d3436; --footer-text: #adb5bd; } [data-color-scheme="nordic-frost"] body { background: #ffffff; } [data-color-scheme="nordic-frost"] .mattress-card { border-radius: 2px; box-shadow: none; border: 1px solid #e8ecef; } [data-color-scheme="nordic-frost"] .mattress-card:hover { box-shadow: none; transform: none; border-color: #2d3436; } [data-color-scheme="nordic-frost"] .inquire-btn { border-radius: 2px; font-size: 0.75rem; letter-spacing: 3px; text-transform: uppercase; } [data-color-scheme="nordic-frost"] .welcome-section { background: #f9fafb; } [data-color-scheme="nordic-frost"] .feature-card { box-shadow: none; border: 1px solid #e8ecef; border-radius: 2px; } [data-color-scheme="nordic-frost"] header::after { display: none; } /* ===== 5. URBAN EDGE — Bold, dark, modern ===== */ [data-color-scheme="urban-edge"] { --primary-gradient-start: #111; --primary-gradient-end: #222; --primary-color: #111; --secondary-color: #222; --accent-color: #ff4757; --button-color: #ff4757; --background: #fafafa; --header-bg: #111; --card-bg: #fff; --card-border: #111; --card-shadow: 6px 6px 0px #111; --card-radius: 0; --btn-radius: 0; --btn-shadow: 4px 4px 0px #111; --btn-text-transform: uppercase; --btn-letter-spacing: 1px; --btn-font-weight: 800; --text-dark: #111; --text-light: #555; --border: #111; --font-heading: 'Space Grotesk', sans-serif; --font-body: 'Space Grotesk', sans-serif; --footer-bg: #111; --footer-text: #777; } [data-color-scheme="urban-edge"] .mattress-card { border-radius: 0; border: 2px solid #111; box-shadow: 6px 6px 0px #111; } [data-color-scheme="urban-edge"] .mattress-card:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0px #111; } [data-color-scheme="urban-edge"] .inquire-btn { border-radius: 0; border: 2px solid #111; box-shadow: 4px 4px 0px #111; font-weight: 800; } [data-color-scheme="urban-edge"] .inquire-btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0px #111; } [data-color-scheme="urban-edge"] .welcome-section { background: #111; color: #fff; } [data-color-scheme="urban-edge"] .welcome-section h2 { color: #ff4757; } [data-color-scheme="urban-edge"] .welcome-section p { color: #ccc; } [data-color-scheme="urban-edge"] .feature-card { border: 2px solid #111; box-shadow: 4px 4px 0px #111; border-radius: 0; } [data-color-scheme="urban-edge"] header::after { display: none; } /* ===== 6. DESERT MODERN — Warm tans, terracotta ===== */ [data-color-scheme="desert-modern"] { --primary-gradient-start: #8d5524; --primary-gradient-end: #c68642; --primary-color: #8d5524; --secondary-color: #c68642; --accent-color: #c44536; --button-color: #c44536; --background: #fdf6ec; --header-bg: linear-gradient(135deg, #8d5524 0%, #c68642 100%); --card-bg: #fffcf5; --card-border: #e8d5b7; --card-shadow: 0 2px 12px rgba(141,85,36,0.08); --card-radius: 12px; --btn-radius: 8px; --btn-shadow: 0 2px 8px rgba(196,69,54,0.2); --btn-text-transform: none; --btn-letter-spacing: 0.5px; --btn-font-weight: 600; --text-dark: #3d2c1e; --text-light: #8a7462; --border: #e8d5b7; --font-heading: 'DM Serif Display', Georgia, serif; --font-body: 'DM Sans', sans-serif; --footer-bg: #3d2c1e; --footer-text: #b09a82; } [data-color-scheme="desert-modern"] body { background: #fdf6ec; } [data-color-scheme="desert-modern"] .welcome-section { background: #f5ead6; } /* ===== 7. ROYAL VELVET — Deep plum, gold, opulent ===== */ [data-color-scheme="royal-velvet"] { --primary-gradient-start: #2d1b4e; --primary-gradient-end: #4a2c6e; --primary-color: #2d1b4e; --secondary-color: #4a2c6e; --accent-color: #d4a843; --button-color: #d4a843; --background: #f9f5ff; --header-bg: linear-gradient(135deg, #2d1b4e 0%, #4a2c6e 100%); --card-bg: #ffffff; --card-border: #d8c8ec; --card-shadow: 0 4px 16px rgba(45,27,78,0.08); --card-radius: 8px; --btn-radius: 6px; --btn-shadow: 0 4px 16px rgba(212,168,67,0.3); --btn-text-transform: none; --btn-letter-spacing: 0.5px; --btn-font-weight: 600; --text-dark: #2d1b4e; --text-light: #7c6a94; --border: #d8c8ec; --font-heading: 'Cormorant Garamond', Georgia, serif; --font-body: 'Nunito', sans-serif; --footer-bg: #1a0f30; --footer-text: #8b7aac; } [data-color-scheme="royal-velvet"] body { background: #f9f5ff; } [data-color-scheme="royal-velvet"] .mattress-title { color: #2d1b4e; } [data-color-scheme="royal-velvet"] .inquire-btn { background: #d4a843; color: #1a0f30; } [data-color-scheme="royal-velvet"] .welcome-section { background: #f0e8ff; } /* ===== 8. EMERALD ESTATE — Deep green, cream, refined ===== */ [data-color-scheme="emerald-estate"] { --primary-gradient-start: #1b4332; --primary-gradient-end: #2d6a4f; --primary-color: #1b4332; --secondary-color: #2d6a4f; --accent-color: #b7791f; --button-color: #1b4332; --background: #faf9f5; --header-bg: linear-gradient(135deg, #1b4332 0%, #2d6a4f 100%); --card-bg: #ffffff; --card-border: #c8d8c5; --card-shadow: 0 2px 12px rgba(27,67,50,0.06); --card-radius: 8px; --btn-radius: 6px; --btn-shadow: 0 2px 8px rgba(27,67,50,0.15); --btn-text-transform: none; --btn-letter-spacing: 0; --btn-font-weight: 600; --text-dark: #1b4332; --text-light: #6b7f6b; --border: #c8d8c5; --font-heading: 'Lora', Georgia, serif; --font-body: 'Karla', sans-serif; --footer-bg: #1b4332; --footer-text: #8fac8f; } [data-color-scheme="emerald-estate"] body { background: #faf9f5; } [data-color-scheme="emerald-estate"] .welcome-section { background: #eef5ee; } /* ===== 9. FARMHOUSE WARM — Soft whites, warm wood tones ===== */ [data-color-scheme="farmhouse-warm"] { --primary-gradient-start: #5c4033; --primary-gradient-end: #8b6f47; --primary-color: #5c4033; --secondary-color: #8b6f47; --accent-color: #c75c2e; --button-color: #5c4033; --background: #fefcf8; --header-bg: linear-gradient(135deg, #5c4033 0%, #8b6f47 100%); --card-bg: #ffffff; --card-border: #e0d5c5; --card-shadow: 0 2px 8px rgba(92,64,51,0.06); --card-radius: 10px; --btn-radius: 10px; --btn-shadow: 0 2px 6px rgba(92,64,51,0.15); --btn-text-transform: none; --btn-letter-spacing: 0; --btn-font-weight: 600; --text-dark: #3e2c20; --text-light: #8c7a68; --border: #e0d5c5; --font-heading: 'Libre Baskerville', Georgia, serif; --font-body: 'Cabin', sans-serif; --footer-bg: #3e2c20; --footer-text: #b09a82; } [data-color-scheme="farmhouse-warm"] body { background: #fefcf8; } [data-color-scheme="farmhouse-warm"] .welcome-section { background: #f5ece0; } /* ===== 10. SLATE PROFESSIONAL — Clean, corporate, modern ===== */ [data-color-scheme="slate-pro"] { --primary-gradient-start: #334155; --primary-gradient-end: #1e293b; --primary-color: #334155; --secondary-color: #1e293b; --accent-color: #3b82f6; --button-color: #3b82f6; --background: #f8fafc; --header-bg: linear-gradient(135deg, #334155 0%, #1e293b 100%); --card-bg: #ffffff; --card-border: #e2e8f0; --card-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); --card-radius: 8px; --btn-radius: 6px; --btn-shadow: 0 1px 3px rgba(59,130,246,0.2); --btn-text-transform: none; --btn-letter-spacing: 0; --btn-font-weight: 500; --text-dark: #0f172a; --text-light: #64748b; --border: #e2e8f0; --font-heading: 'Plus Jakarta Sans', sans-serif; --font-body: 'Plus Jakarta Sans', sans-serif; --footer-bg: #0f172a; --footer-text: #94a3b8; } [data-color-scheme="slate-pro"] body { background: #f8fafc; } [data-color-scheme="slate-pro"] .inquire-btn { background: #3b82f6; } [data-color-scheme="slate-pro"] .inquire-btn:hover { background: #2563eb; } /* ===== 11. SUNSET WARMTH — Orange gradients, inviting ===== */ [data-color-scheme="sunset-warmth"] { --primary-gradient-start: #dc6b19; --primary-gradient-end: #c2410c; --primary-color: #c2410c; --secondary-color: #dc6b19; --accent-color: #c2410c; --button-color: #c2410c; --background: #fffbf5; --header-bg: linear-gradient(135deg, #dc6b19 0%, #c2410c 100%); --card-bg: #ffffff; --card-border: #fcd9b6; --card-shadow: 0 2px 12px rgba(194,65,12,0.06); --card-radius: 14px; --btn-radius: 14px; --btn-shadow: 0 4px 12px rgba(194,65,12,0.2); --btn-text-transform: none; --btn-letter-spacing: 0; --btn-font-weight: 700; --text-dark: #431407; --text-light: #9a6b4a; --border: #fcd9b6; --font-heading: 'Outfit', sans-serif; --font-body: 'DM Sans', sans-serif; --footer-bg: #431407; --footer-text: #c4956a; } [data-color-scheme="sunset-warmth"] body { background: #fffbf5; } [data-color-scheme="sunset-warmth"] .welcome-section { background: #fff3e0; } [data-color-scheme="sunset-warmth"] .mattress-card { border-radius: 14px; } /* ===== 12. IVORY ELEGANCE — Cream/white, subtle gold, refined ===== */ [data-color-scheme="ivory-elegance"] { --primary-gradient-start: #3c3c3c; --primary-gradient-end: #555555; --primary-color: #3c3c3c; --secondary-color: #555; --accent-color: #b8860b; --button-color: #3c3c3c; --background: #fdfcfa; --header-bg: linear-gradient(135deg, #3c3c3c 0%, #555 100%); --card-bg: #ffffff; --card-border: #e8e4dc; --card-shadow: 0 1px 6px rgba(0,0,0,0.04); --card-radius: 6px; --btn-radius: 30px; --btn-shadow: none; --btn-text-transform: uppercase; --btn-letter-spacing: 2px; --btn-font-weight: 500; --text-dark: #2c2c2c; --text-light: #8a8580; --border: #e8e4dc; --font-heading: 'Cormorant Garamond', Georgia, serif; --font-body: 'Jost', sans-serif; --footer-bg: #2c2c2c; --footer-text: #a09890; } [data-color-scheme="ivory-elegance"] body { background: #fdfcfa; } [data-color-scheme="ivory-elegance"] .mattress-card { border-radius: 6px; } [data-color-scheme="ivory-elegance"] .inquire-btn { border-radius: 30px; font-size: 0.8rem; letter-spacing: 2px; text-transform: uppercase; } [data-color-scheme="ivory-elegance"] .welcome-section { background: #f5f1ea; } [data-color-scheme="ivory-elegance"] .feature-card { border-radius: 6px; } /* ===== GLOBAL THEME OVERRIDES ===== */ /* Apply theme variables to components */ [data-color-scheme] .mattress-card { background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); border-radius: var(--card-radius); } [data-color-scheme] .inquire-btn { background: var(--button-color); border-radius: var(--btn-radius); box-shadow: var(--btn-shadow); text-transform: var(--btn-text-transform); letter-spacing: var(--btn-letter-spacing); font-weight: var(--btn-font-weight); } [data-color-scheme] .feature-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius); } [data-color-scheme] body { font-family: var(--font-body); color: var(--text-dark); } [data-color-scheme] h1, [data-color-scheme] h2, [data-color-scheme] h3 { font-family: var(--font-heading); } [data-color-scheme] footer { background: var(--footer-bg); color: var(--footer-text); } /* Custom button color override (works with any theme) */ [data-custom-button-color] { --button-color: var(--custom-button-color); }