/** Shopify CDN: Minification failed Line 254:11 Unexpected "{" Line 254:20 Expected ":" Line 254:26 Unexpected "," **/ /* * ============================================================ * E FASHION — Unified Design System (assets/ef-design-system.css) * ============================================================ * Single source of truth for every colour, font size, spacing * radius, shadow and transition used across all CRO sections. * * HOW TO INSTALL * 1. Upload this file to your theme's /assets folder. * 2. In layout/theme.liquid, add ONE line inside , AFTER * the existing stylesheet tags: * {{ 'ef-design-system.css' | asset_url | stylesheet_tag }} * 3. That's it. All CRO section styles will pick up the tokens * automatically — no other file changes needed. * ============================================================ */ /* ─── 1. DESIGN TOKENS ──────────────────────────────────────── */ :root { /* --- Brand palette --- */ --ef-black: #111111; --ef-white: #ffffff; --ef-warm-dark: #1a1a1a; /* primary text / buttons */ --ef-warm-mid: #967259; /* brand accent (theme primary) */ --ef-warm-light: #f5f0ea; /* soft warm bg for sections */ --ef-warm-mist: #faf6f2; /* very light section bg */ --ef-warm-border: #e8e0d8; /* unified border colour */ --ef-sale: #c25b4e; /* sale badges / urgency */ --ef-sale-light: #fef0ee; /* sale badge bg */ --ef-trust-bg: #f8f5f2; /* trust bar bg */ --ef-muted: #777777; /* secondary / caption text */ --ef-muted-light: #aaaaaa; /* placeholder / strikethrough */ /* --- Typography --- */ --ef-font: 'Instrument Sans', sans-serif; /* single font everywhere */ --ef-weight-regular: 400; --ef-weight-medium: 500; --ef-weight-semibold:600; --ef-weight-bold: 700; --ef-weight-black: 800; /* --- Type scale (mobile-first, fluid) --- */ --ef-text-xs: 11px; --ef-text-sm: 13px; --ef-text-base: 14px; --ef-text-md: 15px; --ef-text-lg: 16px; --ef-text-xl: clamp(18px, 2.5vw, 22px); --ef-text-2xl: clamp(20px, 3.5vw, 28px); --ef-text-3xl: clamp(24px, 4.5vw, 34px); --ef-text-hero: clamp(30px, 6vw, 56px); /* --- Letter spacing --- */ --ef-ls-tight: -0.01em; --ef-ls-normal: 0; --ef-ls-wide: 0.06em; --ef-ls-wider: 0.12em; --ef-ls-widest: 0.18em; /* --- Spacing scale --- */ --ef-space-1: 4px; --ef-space-2: 8px; --ef-space-3: 12px; --ef-space-4: 16px; --ef-space-5: 20px; --ef-space-6: 24px; --ef-space-7: 28px; --ef-space-8: 32px; --ef-space-10: 40px; --ef-space-12: 48px; --ef-space-16: 64px; /* --- Section vertical rhythm --- */ --ef-section-gap: clamp(36px, 5vw, 56px); --ef-section-pad-x: clamp(16px, 4vw, 24px); --ef-container: 1200px; /* --- Radius --- */ --ef-radius-sm: 8px; --ef-radius-md: 12px; --ef-radius-lg: 16px; --ef-radius-xl: 20px; --ef-radius-pill: 999px; /* --- Shadows --- */ --ef-shadow-card: 0 2px 8px rgba(0,0,0,.07); --ef-shadow-lift: 0 4px 18px rgba(0,0,0,.12); /* --- Transitions --- */ --ef-transition: 0.18s ease; --ef-transition-slow: 0.35s ease; /* --- Button tokens --- */ --ef-btn-h: 50px; --ef-btn-pad-x: 28px; --ef-btn-radius: var(--ef-radius-pill); --ef-btn-font-size: var(--ef-text-lg); --ef-btn-weight: var(--ef-weight-bold); } /* ─── 2. SECTION WRAPPER UTILITY ────────────────────────────── */ /* Every CRO section should use the class .ef-section on its outermost wrapper and .ef-container on the max-width div. This ensures identical left/right gutters and vertical gaps across all sections. */ .ef-section { padding-top: var(--ef-section-gap); padding-bottom: var(--ef-section-gap); } .ef-section--flush-top { padding-top: 0; } .ef-section--flush-bottom { padding-bottom: 0; } .ef-container { max-width: var(--ef-container); margin-inline: auto; padding-inline: var(--ef-section-pad-x); width: 100%; } /* ─── 3. UNIFIED HEADING STYLE ──────────────────────────────── */ /* Every section heading uses one of these classes so font weight, size and letter-spacing are identical site-wide. */ .ef-eyebrow { font-family: var(--ef-font); font-size: var(--ef-text-xs); font-weight: var(--ef-weight-bold); letter-spacing: var(--ef-ls-widest); text-transform: uppercase; color: var(--ef-warm-mid); margin: 0 0 var(--ef-space-2); } .ef-heading { font-family: var(--ef-font); font-size: var(--ef-text-2xl); font-weight: var(--ef-weight-black); letter-spacing: var(--ef-ls-tight); line-height: 1.15; color: var(--ef-warm-dark); margin: 0 0 var(--ef-space-3); } .ef-subheading { font-family: var(--ef-font); font-size: var(--ef-text-md); font-weight: var(--ef-weight-regular); line-height: 1.6; color: var(--ef-muted); margin: 0 0 var(--ef-space-6); } /* ─── 4. UNIFIED BUTTON STYLES ──────────────────────────────── */ .ef-btn { display: inline-flex; align-items: center; justify-content: center; height: var(--ef-btn-h); padding: 0 var(--ef-btn-pad-x); border-radius: var(--ef-btn-radius); font-family: var(--ef-font); font-size: var(--ef-btn-font-size); font-weight: var(--ef-btn-weight); line-height: 1; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: filter var(--ef-transition), transform var(--ef-transition), background-color var(--ef-transition), color var(--ef-transition); white-space: nowrap; } .ef-btn:active { transform: scale(0.97); } /* Primary — dark fill */ .ef-btn--primary { background: var(--ef-warm-dark); color: var(--ef-white); border-color: var(--ef-warm-dark); } .ef-btn--primary:hover { filter: brightness(1.15); } /* Ghost — transparent with border */ .ef-btn--ghost { background: transparent; color: var(--ef-warm-dark); border-color: var(--ef-warm-dark); } .ef-btn--ghost:hover { background: var(--ef-warm-dark); color: var(--ef-white); } /* Accent — brand warm brown */ .ef-btn--accent { background: var(--ef-warm-mid); color: var(--ef-white); border-color: var(--ef-warm-mid); } .ef-btn--accent:hover { filter: brightness(1.1); } /* Small variant */ .ef-btn--sm { height: 40px; padding: 0 18px; font-size: var(--ef-text-base); } /* ─── 5. UNIFIED BADGE STYLES ───────────────────────────────── */ .ef-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--ef-radius-pill); font-family: var(--ef-font); font-size: var(--ef-text-xs); font-weight: var(--ef-weight-bold); line-height: 1; white-space: nowrap; } .ef-badge--sale { background: var(--ef-sale); color: var(--ef-white); } .ef-badge--best { background: var(--ef-warm-dark); color: var(--ef-white); } .ef-badge--new { background: var(--ef-warm-mid); color: var(--ef-white); } .ef-badge--low { background: var(--ef-sale-light); color: var(--ef-sale); } .ef-badge--out { background: #e8e8e8; color: #666; } /* ─── 6. ANNOUNCEMENT BAR (announcement-bar-cro) ───────────── */ #cro-abar-{{ section.id }}, [id^="cro-abar-"] { font-family: var(--ef-font) !important; font-size: var(--ef-text-sm) !important; font-weight: var(--ef-weight-semibold) !important; letter-spacing: var(--ef-ls-wide) !important; } /* ─── 7. HOME HERO (home-hero-cro) ─────────────────────────── */ [id^="cro-hero-"] .cro-hero__eyebrow { font-family: var(--ef-font); font-size: var(--ef-text-xs); font-weight: var(--ef-weight-bold); letter-spacing: var(--ef-ls-widest); text-transform: uppercase; } [id^="cro-hero-"] .cro-hero__title { font-family: var(--ef-font); font-size: var(--ef-text-hero); font-weight: var(--ef-weight-black); letter-spacing: var(--ef-ls-tight); line-height: 1.05; } [id^="cro-hero-"] .cro-hero__sub { font-family: var(--ef-font); font-size: clamp(14px, 2vw, 18px); font-weight: var(--ef-weight-regular); line-height: 1.6; } [id^="cro-hero-"] .cro-hero__btn { font-family: var(--ef-font); font-size: var(--ef-text-lg); font-weight: var(--ef-weight-bold); min-height: var(--ef-btn-h); padding: 0 var(--ef-btn-pad-x); border-radius: var(--ef-btn-radius); } [id^="cro-hero-"] .cro-hero__badges li { font-family: var(--ef-font); font-size: var(--ef-text-sm); font-weight: var(--ef-weight-semibold); } /* ─── 8. SHOP BY CATEGORY (home-categories-cro) ────────────── */ [id^="cro-cats-"] .cro-cats__heading { font-family: var(--ef-font); font-size: var(--ef-text-2xl); font-weight: var(--ef-weight-black); letter-spacing: var(--ef-ls-tight); margin-bottom: var(--ef-space-5); } [id^="cro-cats-"] .cro-cat__label { font-family: var(--ef-font); font-size: var(--ef-text-sm); font-weight: var(--ef-weight-semibold); color: var(--ef-warm-dark); padding-top: var(--ef-space-3); } [id^="cro-cats-"] .cro-cat__media { border-radius: var(--ef-radius-lg); background: var(--ef-warm-light); } [id^="cro-cats-"] { padding-top: var(--ef-section-gap); padding-bottom: var(--ef-section-gap); } /* ─── 9. FEATURED COLLECTION (home-featured-collection-cro) ── */ [id^="cro-fc-"] .cro-fc__eyebrow { font-family: var(--ef-font); font-size: var(--ef-text-xs); font-weight: var(--ef-weight-bold); letter-spacing: var(--ef-ls-widest); text-transform: uppercase; } [id^="cro-fc-"] .cro-fc__heading { font-family: var(--ef-font); font-size: var(--ef-text-2xl); font-weight: var(--ef-weight-black); letter-spacing: var(--ef-ls-tight); } [id^="cro-fc-"] .cro-fc__viewall { font-family: var(--ef-font); font-size: var(--ef-text-sm); font-weight: var(--ef-weight-semibold); } [id^="cro-fc-"] .cro-fc__title { font-family: var(--ef-font); font-size: var(--ef-text-base); font-weight: var(--ef-weight-semibold); line-height: 1.35; color: var(--ef-warm-dark); } [id^="cro-fc-"] .cro-fc__now { font-family: var(--ef-font); font-size: var(--ef-text-lg); font-weight: var(--ef-weight-bold); color: var(--ef-warm-dark); } [id^="cro-fc-"] .cro-fc__was { font-family: var(--ef-font); font-size: var(--ef-text-sm); color: var(--ef-muted-light); } [id^="cro-fc-"] .cro-fc__flag { font-family: var(--ef-font); font-size: var(--ef-text-xs); font-weight: var(--ef-weight-bold); border-radius: var(--ef-radius-pill); } [id^="cro-fc-"] .cro-fc__btn { font-family: var(--ef-font); font-size: var(--ef-text-sm); font-weight: var(--ef-weight-bold); border-radius: var(--ef-radius-md); padding: 11px; } [id^="cro-fc-"] .cro-fc__card { border-radius: var(--ef-radius-lg); border-color: var(--ef-warm-border); box-shadow: var(--ef-shadow-card); } [id^="cro-fc-"] .cro-fc__imgwrap { background: var(--ef-warm-light); } [id^="cro-fc-"] { padding-top: var(--ef-section-gap); padding-bottom: var(--ef-section-gap); } /* ─── 10. SHOP BY SIZE (home-shop-by-size-cro) ─────────────── */ [id^="cro-sizes-"] .cro-sizes__heading { font-family: var(--ef-font); font-size: var(--ef-text-2xl); font-weight: var(--ef-weight-black); letter-spacing: var(--ef-ls-tight); } [id^="cro-sizes-"] .cro-sizes__sub { font-family: var(--ef-font); font-size: var(--ef-text-sm); color: var(--ef-muted); } [id^="cro-sizes-"] .cro-size { font-family: var(--ef-font); font-size: var(--ef-text-lg); font-weight: var(--ef-weight-bold); border-radius: var(--ef-radius-md); border-color: var(--ef-warm-border); min-height: 56px; transition: all var(--ef-transition); } [id^="cro-sizes-"] .cro-size:hover { transform: translateY(-2px); box-shadow: var(--ef-shadow-lift); } [id^="cro-sizes-"] { padding-top: var(--ef-section-gap); padding-bottom: var(--ef-section-gap); } /* ─── 11. EMAIL CAPTURE (home-newsletter-cro) ───────────────── */ [id^="cro-nl-"] .cro-nl__heading { font-family: var(--ef-font); font-size: var(--ef-text-3xl); font-weight: var(--ef-weight-black); letter-spacing: var(--ef-ls-tight); } [id^="cro-nl-"] .cro-nl__sub { font-family: var(--ef-font); font-size: var(--ef-text-md); line-height: 1.6; opacity: 0.92; } [id^="cro-nl-"] .cro-nl__input { font-family: var(--ef-font); font-size: var(--ef-text-md); height: var(--ef-btn-h); border-radius: var(--ef-radius-pill); } [id^="cro-nl-"] .cro-nl__btn { font-family: var(--ef-font); font-size: var(--ef-text-md); font-weight: var(--ef-weight-bold); height: var(--ef-btn-h); padding: 0 var(--ef-btn-pad-x); border-radius: var(--ef-radius-pill); } [id^="cro-nl-"] .cro-nl__fine { font-family: var(--ef-font); font-size: var(--ef-text-xs); opacity: 0.7; } /* ─── 12. COLLECTION ANNOUNCEMENT + HERO (ef-announcement-hero) */ .ef-annc { font-family: var(--ef-font); font-size: var(--ef-text-sm) !important; font-weight: var(--ef-weight-semibold) !important; letter-spacing: var(--ef-ls-wide) !important; } .ef-hero__title { font-family: var(--ef-font) !important; font-size: clamp(22px, 3.5vw, 32px) !important; font-weight: var(--ef-weight-black) !important; letter-spacing: var(--ef-ls-tight) !important; } .ef-hero__sub { font-family: var(--ef-font) !important; font-size: var(--ef-text-sm) !important; line-height: 1.6 !important; color: var(--ef-muted) !important; } .ef-hero__trust { font-family: var(--ef-font) !important; font-size: var(--ef-text-xs) !important; font-weight: var(--ef-weight-semibold) !important; letter-spacing: var(--ef-ls-wide) !important; } /* ─── 13. TRUST BAR (ef-trust-bar) ─────────────────────────── */ .ef-trust { background: var(--ef-trust-bg); border-top: 1px solid var(--ef-warm-border); border-bottom: 1px solid var(--ef-warm-border); } .ef-trust__text strong { font-family: var(--ef-font); font-size: var(--ef-text-sm); font-weight: var(--ef-weight-bold); color: var(--ef-warm-dark); } .ef-trust__text span { font-family: var(--ef-font); font-size: var(--ef-text-xs); color: var(--ef-muted); } .ef-trust__icon { font-size: 20px; } /* ─── 14. PRODUCT CARD (ef-card-product) ───────────────────── */ .ef-card { border-radius: var(--ef-radius-lg); box-shadow: var(--ef-shadow-card); background: var(--ef-white); overflow: hidden; transition: box-shadow var(--ef-transition-slow); } .ef-card:hover { box-shadow: var(--ef-shadow-lift); } .ef-card__media { background: var(--ef-warm-light); } .ef-card__title { font-family: var(--ef-font); font-size: var(--ef-text-base); font-weight: var(--ef-weight-semibold); line-height: 1.35; color: var(--ef-warm-dark); text-decoration: none; } .ef-price__final { font-family: var(--ef-font); font-size: var(--ef-text-lg); font-weight: var(--ef-weight-bold); color: var(--ef-warm-dark); } .ef-price__final--sale { color: var(--ef-sale); } .ef-price__compare { font-family: var(--ef-font); font-size: var(--ef-text-sm); color: var(--ef-muted-light); } .ef-price__pct { font-family: var(--ef-font); font-size: var(--ef-text-xs); font-weight: var(--ef-weight-bold); color: var(--ef-white); background: var(--ef-sale); padding: 2px 7px; border-radius: var(--ef-radius-pill); } /* Quick-add buttons on cards */ .ef-quickadd__btn { font-family: var(--ef-font); font-size: var(--ef-text-sm); font-weight: var(--ef-weight-bold); border-radius: var(--ef-radius-md); height: 42px; transition: filter var(--ef-transition); } .ef-quickadd__btn:hover { filter: brightness(1.12); } /* Size selector inside card */ .ef-size { font-family: var(--ef-font); font-size: var(--ef-text-sm); font-weight: var(--ef-weight-semibold); border-radius: var(--ef-radius-sm); border: 1.5px solid var(--ef-warm-border); transition: all var(--ef-transition); } .ef-size:not(.ef-size--soldout):hover { border-color: var(--ef-warm-dark); background: var(--ef-warm-dark); color: var(--ef-white); } .ef-size--soldout { opacity: 0.45; text-decoration: line-through; cursor: not-allowed; } /* Star ratings */ .ef-stars { --ef-star-filled: var(--ef-warm-mid); --ef-star-empty: #ddd; } .ef-card__rating-count { font-family: var(--ef-font); font-size: var(--ef-text-xs); color: var(--ef-muted); } /* ─── 15. SECTION DIVIDER RHYTHM ────────────────────────────── */ /* Prevents sections from bumping into each other with inconsistent top/bottom margins. The theme wraps each section in a
; this resets their margins so only --ef-section-gap governs space. */ .shopify-section:has([id^="cro-"]), .shopify-section:has(.ef-trust), .shopify-section:has(.ef-promo), .shopify-section:has([id^="ef-"]) { margin-top: 0; margin-bottom: 0; } /* Light zebra rhythm: alternate sections get the warm-mist bg */ .shopify-section:has([id^="cro-cats-"]), .shopify-section:has([id^="cro-sizes-"]) { background: var(--ef-warm-mist); } .shopify-section:has([id^="cro-nl-"]) { /* newsletter keeps its own bg set via section settings */ } /* ─── 16. MOBILE POLISH ─────────────────────────────────────── */ @media (max-width: 749px) { :root { --ef-btn-h: 48px; --ef-btn-pad-x: 22px; } .ef-heading { letter-spacing: 0; } [id^="cro-fc-"] .cro-fc__card { border-radius: var(--ef-radius-md); } .ef-card { border-radius: var(--ef-radius-md); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }