/* ============================================================ Design Variants — 5 distinct visual identities ============================================================ Each shop sets a data-design attribute on , which selects one of these variants. The base stylesheet still handles structure; this file overrides typography, button styles, hero treatment, and card styling per variant. ============================================================ */ /* ===== Design A — EDITORIAL (default) =================== */ /* Fraunces + Inter — warm, magazine-like, current default. */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap'); body[data-design="editorial"] { --font-display: 'Fraunces', Georgia, serif; --font-body: 'Inter', -apple-system, sans-serif; --radius-card: 8px; --radius-button: 4px; } body[data-design="editorial"] h1, body[data-design="editorial"] h2, body[data-design="editorial"] h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; } /* ===== Design B — BOUTIQUE ============================= */ /* Playfair Display + Manrope — sharp, modern, high-contrast. */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700;800&family=Manrope:wght@400;500;600;700&display=swap'); body[data-design="boutique"] { --font-display: 'Playfair Display', Georgia, serif; --font-body: 'Manrope', -apple-system, sans-serif; --radius-card: 0px; --radius-button: 0px; } body[data-design="boutique"] { font-family: var(--font-body); } body[data-design="boutique"] h1, body[data-design="boutique"] h2, body[data-design="boutique"] h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; } body[data-design="boutique"] .btn, body[data-design="boutique"] button, body[data-design="boutique"] .product-card { border-radius: 0 !important; } body[data-design="boutique"] .btn { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.85rem; font-weight: 600; } body[data-design="boutique"] .product-card { border: 1px solid var(--theme-primary); } /* ===== Design C — CLASSIC =============================== */ /* Cormorant Garamond + Source Sans — refined, traditional. */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Source+Sans+3:wght@400;500;600;700&display=swap'); body[data-design="classic"] { --font-display: 'Cormorant Garamond', 'Garamond', serif; --font-body: 'Source Sans 3', -apple-system, sans-serif; --radius-card: 12px; --radius-button: 50px; } body[data-design="classic"] { font-family: var(--font-body); } body[data-design="classic"] h1, body[data-design="classic"] h2, body[data-design="classic"] h3 { font-family: var(--font-display); font-weight: 600; font-style: italic; letter-spacing: 0; } body[data-design="classic"] h1 { font-size: clamp(2.5rem, 5vw, 4rem); } body[data-design="classic"] .btn { border-radius: 50px !important; padding: 0.8em 2em; } body[data-design="classic"] .product-card { border-radius: 12px !important; border: 1px solid rgba(0,0,0,0.08); } /* ===== Design D — FRIENDLY ============================= */ /* Lora + Nunito — warm, rounded, approachable. */ @import url('https://fonts.googleapis.com/css2?family=Lora:wght@500;600;700&family=Nunito:wght@400;600;700&display=swap'); body[data-design="friendly"] { --font-display: 'Lora', Georgia, serif; --font-body: 'Nunito', -apple-system, sans-serif; --radius-card: 20px; --radius-button: 24px; } body[data-design="friendly"] { font-family: var(--font-body); } body[data-design="friendly"] h1, body[data-design="friendly"] h2, body[data-design="friendly"] h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: 0; } body[data-design="friendly"] .btn { border-radius: 24px !important; padding: 0.75em 1.8em; font-weight: 700; } body[data-design="friendly"] .product-card { border-radius: 20px !important; box-shadow: 0 4px 16px rgba(0,0,0,0.06); } /* ===== Design E — ELEGANT ============================== */ /* Libre Caslon Text + Karla — refined, minimal, more whitespace. */ @import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:wght@400;700&family=Karla:wght@400;500;600;700&display=swap'); body[data-design="elegant"] { --font-display: 'Libre Caslon Text', 'Times New Roman', serif; --font-body: 'Karla', -apple-system, sans-serif; --radius-card: 2px; --radius-button: 2px; } body[data-design="elegant"] { font-family: var(--font-body); letter-spacing: 0.01em; } body[data-design="elegant"] h1, body[data-design="elegant"] h2, body[data-design="elegant"] h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.02em; } body[data-design="elegant"] h1 { font-weight: 400; } body[data-design="elegant"] .btn { border-radius: 2px !important; text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.78rem; font-weight: 600; padding: 1em 2.2em; } body[data-design="elegant"] .product-card { border-radius: 2px !important; border: 1px solid rgba(0,0,0,0.1); background: var(--theme-cream); } body[data-design="elegant"] .hero { padding-block: 6rem; } /* ===== Fallback for any shop without a design attribute === */ body:not([data-design]) { --font-display: 'Fraunces', Georgia, serif; --font-body: 'Inter', -apple-system, sans-serif; }