/* ============================================================ Maison Decor — alternate template themes Same layouts as the default "Boutique" theme (styles.css); only colours, fonts, radii and a few accents change. Applied via an attribute on : data-theme="minimal" | "luxe" | "scandi" | "editorial". No attribute = default Boutique theme. The floating picker (bottom-left) switches these live and remembers your choice. To hard-set one site-wide, add the attribute to , e.g. on every page. ============================================================ */ /* ============================================================ 1. MODERN MINIMAL — white space, mono accent, squared, sans ============================================================ */ html[data-theme="minimal"] { --bg: #ffffff; --surface: #ffffff; --surface-2: #f5f5f4; --text: #3c3c3c; --text-muted: #9b9b9b; --heading: #0a0a0a; --border: #e9e9e7; --accent: #111111; --accent-strong: #000000; --accent-soft: rgba(0, 0, 0, 0.05); --gold: #111111; --on-accent: #ffffff; --serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --radius: 6px; --radius-sm: 3px; --shadow: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-hover: 0 12px 34px rgba(0, 0, 0, 0.10); --header-bg: rgba(255, 255, 255, 0.85); } html[data-theme="minimal"].dark-mode { --bg: #0b0b0b; --surface: #151515; --surface-2: #1c1c1c; --text: #d4d4d4; --text-muted: #8a8a8a; --heading: #ffffff; --border: #262626; --accent: #f5f5f5; --accent-strong: #ffffff; --accent-soft: rgba(255, 255, 255, 0.08); --gold: #f5f5f5; --on-accent: #0b0b0b; --shadow: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-hover: 0 14px 40px rgba(0, 0, 0, 0.6); --header-bg: rgba(11, 11, 11, 0.85); } html[data-theme="minimal"] h1, html[data-theme="minimal"] h2, html[data-theme="minimal"] h3, html[data-theme="minimal"] h4 { font-weight: 800; letter-spacing: -0.03em; } html[data-theme="minimal"] .hero-title em { font-style: normal; color: var(--accent); } html[data-theme="minimal"] .eyebrow { color: var(--text-muted); } html[data-theme="minimal"] .btn-primary, html[data-theme="minimal"] .btn-ghost, html[data-theme="minimal"] .nav-cta, html[data-theme="minimal"] .filter-btn, html[data-theme="minimal"] .btn-cart, html[data-theme="minimal"] .product-tag, html[data-theme="minimal"] .newsletter input { border-radius: 4px; } /* ============================================================ 2. LUXE DARK — moody charcoal, gold accents, elegant serif ============================================================ */ html[data-theme="luxe"] { --bg: #17130f; --surface: #1f1a14; --surface-2: #251f18; --text: #d8cdbd; --text-muted: #a08f78; --heading: #f3e9d8; --border: #352c20; --accent: #c9a35b; --accent-strong: #b8923f; --accent-soft: rgba(201, 163, 91, 0.14); --gold: #d9b873; --on-accent: #1a140d; --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --radius: 10px; --radius-sm: 6px; --shadow: 0 2px 6px rgba(0, 0, 0, 0.5); --shadow-hover: 0 18px 44px rgba(0, 0, 0, 0.6); --header-bg: rgba(23, 19, 15, 0.85); } html[data-theme="luxe"].dark-mode { --bg: #0e0b08; --surface: #16110c; --surface-2: #1c1610; --text: #d8cdbd; --text-muted: #a08f78; --heading: #f6ecda; --border: #2c2419; --accent: #d9b873; --accent-strong: #c9a35b; --accent-soft: rgba(217, 184, 115, 0.16); --gold: #e6c987; --on-accent: #120d08; --header-bg: rgba(14, 11, 8, 0.85); } /* Cormorant runs small & light — give the display type more presence. */ html[data-theme="luxe"] .hero-title { font-size: clamp(2.8rem, 6vw, 4.6rem); font-weight: 600; } html[data-theme="luxe"] .section-title { font-size: clamp(2.1rem, 4.5vw, 3.1rem); font-weight: 600; } html[data-theme="luxe"] .page-title { font-weight: 600; } html[data-theme="luxe"] .brand { letter-spacing: 0.01em; } /* ============================================================ 3. SCANDI / NATURAL — airy, sage green, soft rounded ============================================================ */ html[data-theme="scandi"] { --bg: #f3f1ea; --surface: #ffffff; --surface-2: #eef0e9; --text: #4b4f47; --text-muted: #8a8f82; --heading: #2f3a31; --border: #e2e4da; --accent: #7d9b76; --accent-strong: #5f7d59; --accent-soft: rgba(125, 155, 118, 0.14); --gold: #c2a36b; --on-accent: #ffffff; --serif: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --radius: 22px; --radius-sm: 14px; --shadow: 0 2px 6px rgba(60, 70, 55, 0.05), 0 10px 24px rgba(60, 70, 55, 0.07); --shadow-hover: 0 14px 36px rgba(60, 70, 55, 0.12); --header-bg: rgba(243, 241, 234, 0.85); } html[data-theme="scandi"].dark-mode { --bg: #161a15; --surface: #1d231c; --surface-2: #222a21; --text: #d6ddd1; --text-muted: #9aa496; --heading: #eef3ea; --border: #2c352a; --accent: #9bbf92; --accent-strong: #7d9b76; --accent-soft: rgba(155, 191, 146, 0.16); --gold: #cdb079; --on-accent: #13180f; --header-bg: rgba(22, 26, 21, 0.85); } html[data-theme="scandi"] h1, html[data-theme="scandi"] h2, html[data-theme="scandi"] h3, html[data-theme="scandi"] h4 { font-weight: 700; letter-spacing: -0.01em; } html[data-theme="scandi"] .hero-title em { font-style: normal; color: var(--accent); } /* ============================================================ 4. BOLD EDITORIAL — big display serif, sharp edges, punchy accent ============================================================ */ html[data-theme="editorial"] { --bg: #f6f1e9; --surface: #fffdf9; --surface-2: #efe7da; --text: #33302b; --text-muted: #857c6e; --heading: #1c1916; --border: #e4d9c8; --accent: #c0392b; --accent-strong: #9c2c20; --accent-soft: rgba(192, 57, 43, 0.10); --gold: #b8862f; --on-accent: #fffdf9; --serif: "Fraunces", Georgia, "Times New Roman", serif; --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --radius: 2px; --radius-sm: 2px; --shadow: 0 2px 4px rgba(40, 30, 20, 0.06), 0 10px 26px rgba(40, 30, 20, 0.08); --shadow-hover: 0 16px 40px rgba(40, 30, 20, 0.16); --header-bg: rgba(246, 241, 233, 0.85); } html[data-theme="editorial"].dark-mode { --bg: #1a1714; --surface: #221d18; --surface-2: #2a241d; --text: #e4dac9; --text-muted: #a8997f; --heading: #f6efe2; --border: #352c20; --accent: #e0573f; --accent-strong: #c0392b; --accent-soft: rgba(224, 87, 63, 0.16); --gold: #d2a14f; --on-accent: #1a1714; --header-bg: rgba(26, 23, 20, 0.85); } html[data-theme="editorial"] .hero-title { font-size: clamp(2.8rem, 7vw, 5rem); font-weight: 900; letter-spacing: -0.02em; line-height: 1.02; } html[data-theme="editorial"] .section-title { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 900; } html[data-theme="editorial"] .page-title { font-weight: 900; } html[data-theme="editorial"] .hero-title em { font-style: italic; color: var(--accent); } html[data-theme="editorial"] .btn-primary, html[data-theme="editorial"] .btn-ghost, html[data-theme="editorial"] .nav-cta, html[data-theme="editorial"] .filter-btn, html[data-theme="editorial"] .btn-cart, html[data-theme="editorial"] .product-tag, html[data-theme="editorial"] .newsletter input { border-radius: 2px; }