/** Shopify CDN: Minification failed Line 58:0 All "@import" rules must come first **/ /* ============================================================ Fan Wall Co. — Custom CSS overrides for Shopify Dawn theme Locked to the Brand Kit (April 2026) ============================================================ WHERE THIS GOES IN SHOPIFY: 1. Online Store > Themes > [your active theme] > Actions > Edit Code 2. In the left sidebar, scroll to "Assets" and click "Add a new asset" 3. Name it: custom.css (NOT custom.css.liquid) 4. Paste this entire file into it, save 5. Open theme.liquid (under Layout) 6. Find the section 7. Right BEFORE , paste this line: 8. Save theme.liquid ============================================================ */ /* ---------- 1. Brand tokens (CSS variables) ---------- */ :root { --fw-cream: #F1E6CC; --fw-cream-soft: #FAF5E8; --fw-navy: #0F1B2D; --fw-red: #9C2A2A; --fw-sepia: #8B6F47; --fw-gold: #C9A14A; --fw-charcoal: #1F1F1F; /* Map onto Dawn's color scheme variables so theme cascades naturally */ --color-background: 241 230 204; /* cream */ --color-foreground: 15 27 45; /* navy */ --color-button: 15 27 45; --color-button-text: 241 230 204; --color-secondary-button: 241 230 204; --color-secondary-button-text: 15 27 45; --color-link: 156 42 42; /* red */ --color-badge-foreground-on-sale: 156 42 42; --color-badge-background-on-sale: 241 230 204; --color-base-text: 31 31 31; --color-base-background-1: 241 230 204; --color-base-background-2: 250 245 232; --color-base-solid-button-labels: 241 230 204; --color-base-outline-button-labels: 15 27 45; --color-base-accent-1: 156 42 42; --color-base-accent-2: 201 161 74; /* Type stack */ --font-heading-family: 'Playfair Display', Georgia, serif; --font-body-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-cond-family: 'Oswald', Impact, sans-serif; } /* Load brand fonts (Dawn often loads its own — these add ours) */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Oswald:wght@500;700&family=Inter:wght@400;500;600&display=swap'); /* ---------- 2. Body + aged-paper grain ---------- */ body { background-color: var(--fw-cream) !important; color: var(--fw-navy); font-family: var(--font-body-family); -webkit-font-smoothing: antialiased; background-image: radial-gradient(rgba(139,111,71,0.06) 1px, transparent 1.5px), radial-gradient(rgba(15,27,45,0.04) 1px, transparent 1.5px); background-size: 3px 3px, 7px 7px; background-position: 0 0, 1px 2px; } main, .page-width, .section { background-color: transparent; } /* ---------- 3. Typography ---------- */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-heading-family); font-weight: 900; letter-spacing: -1px; line-height: 1.08; color: var(--fw-navy); } h1, .h1 { font-size: clamp(38px, 5.5vw, 72px); letter-spacing: -1.5px; } h2, .h2 { font-size: clamp(30px, 4.2vw, 52px); letter-spacing: -1.2px; } h3, .h3 { font-size: clamp(22px, 2.4vw, 30px); } /* Eyebrow / kicker — for "NEW DROP", section labels, etc. */ .fw-eyebrow, .section-header__line + h2, .collection-list-title { font-family: var(--font-cond-family) !important; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; font-size: 12px; color: var(--fw-red); } /* Body copy */ p, li, .product__text { color: var(--fw-charcoal); line-height: 1.6; } /* ---------- 4. Buttons ---------- */ .button, button.button, .button--primary, .shopify-payment-button__button--unbranded { font-family: var(--font-cond-family) !important; text-transform: uppercase !important; letter-spacing: 2px !important; font-weight: 700 !important; font-size: 13px !important; padding: 16px 24px !important; border-radius: 0 !important; border: 1.5px solid var(--fw-navy) !important; background: var(--fw-navy) !important; color: var(--fw-cream) !important; transition: transform 120ms ease, background 120ms ease, color 120ms ease, border-color 120ms ease !important; min-height: 0 !important; } .button:hover, button.button:hover, .button--primary:hover { background: var(--fw-red) !important; border-color: var(--fw-red) !important; color: var(--fw-cream) !important; transform: translateY(-1px) !important; } .button--secondary { background: transparent !important; color: var(--fw-navy) !important; border-color: var(--fw-navy) !important; } .button--secondary:hover { background: var(--fw-navy) !important; color: var(--fw-cream) !important; } /* ---------- 5. Header / navigation ---------- */ .header, sticky-header.header { background: rgba(241, 230, 204, 0.94) !important; backdrop-filter: blur(6px); border-bottom: 1px solid rgba(15, 27, 45, 0.15) !important; } .header__heading-link .h2 { font-family: var(--font-heading-family); font-weight: 900; font-size: 22px; letter-spacing: -0.6px; color: var(--fw-navy); } .header__menu-item, .header__active-menu-item { font-family: var(--font-cond-family) !important; text-transform: uppercase; letter-spacing: 1.6px; font-size: 12.5px; font-weight: 700; color: var(--fw-navy); } .header__menu-item:hover { color: var(--fw-red); } /* ---------- 6. Product cards (collection grids) ---------- */ .card, .card-wrapper .card { background: var(--fw-cream-soft) !important; border: 1px solid rgba(15, 27, 45, 0.12) !important; border-radius: 0 !important; box-shadow: 0 2px 0 rgba(139, 111, 71, 0.18), 0 14px 24px -12px rgba(15, 27, 45, 0.18) !important; transition: transform 160ms ease, box-shadow 160ms ease !important; } .card:hover, .card-wrapper:hover .card { transform: translateY(-4px) !important; box-shadow: 0 4px 0 rgba(139, 111, 71, 0.22), 0 22px 32px -14px rgba(15, 27, 45, 0.26) !important; } .card__heading, .card__information .card__heading { font-family: var(--font-heading-family) !important; font-weight: 900; font-size: 22px; letter-spacing: -0.5px; color: var(--fw-navy) !important; } .card__heading a:hover { color: var(--fw-red); } .price__regular .price-item--regular, .price-item--last, .price-item--sale { font-family: var(--font-heading-family) !important; font-weight: 900 !important; font-size: 22px !important; color: var(--fw-navy) !important; letter-spacing: -0.5px; } .price-item--regular.price-item--with-sale { text-decoration: line-through; color: var(--fw-sepia) !important; opacity: 0.7; } /* ---------- 7. Product detail page (PDP) ---------- */ .product__title h1, .product__title .h1 { font-family: var(--font-heading-family); font-weight: 900; font-size: clamp(32px, 4.5vw, 48px); letter-spacing: -1.2px; line-height: 1.1; color: var(--fw-navy); } .product__price .price__regular .price-item { font-size: clamp(28px, 3vw, 36px) !important; font-weight: 900; color: var(--fw-navy) !important; } /* Trust strip below add-to-cart (you'll add this via custom section in PDP template) */ .fw-trust-strip { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; padding: 14px; margin: 20px 0; background: var(--fw-navy); color: var(--fw-cream); font-family: var(--font-cond-family); text-transform: uppercase; letter-spacing: 1.8px; font-size: 11px; font-weight: 700; border-top: 1px solid var(--fw-gold); border-bottom: 1px solid var(--fw-gold); } .fw-trust-strip span { display: inline-flex; align-items: center; gap: 6px; } .fw-trust-strip .star { color: var(--fw-gold); } /* ---------- 8. Footer ---------- */ .footer { background: var(--fw-navy) !important; color: rgba(241, 230, 204, 0.78) !important; border-top: 1px solid rgba(201, 161, 74, 0.4); } .footer h2, .footer .h4, .footer__title { font-family: var(--font-cond-family) !important; text-transform: uppercase; letter-spacing: 2.5px; font-size: 12px; color: var(--fw-gold) !important; font-weight: 700; } .footer a { color: rgba(241, 230, 204, 0.78); transition: color 120ms ease; } .footer a:hover { color: var(--fw-cream); } .footer-block__newsletter input[type="email"] { background: rgba(241, 230, 204, 0.08) !important; border: 1px solid rgba(241, 230, 204, 0.2) !important; color: var(--fw-cream) !important; border-radius: 0 !important; } /* ---------- 9. Cart drawer / page ---------- */ cart-drawer .drawer__inner { background: var(--fw-cream-soft) !important; } .cart-item__name { font-family: var(--font-heading-family) !important; font-weight: 700; font-size: 18px; color: var(--fw-navy) !important; } /* Bundle prompt banner — used by the custom Liquid section */ .fw-bundle-prompt { background: var(--fw-navy); color: var(--fw-cream); padding: 16px 20px; margin: 16px 0; border-left: 4px solid var(--fw-gold); font-family: var(--font-body-family); font-size: 14.5px; line-height: 1.55; } .fw-bundle-prompt strong { color: var(--fw-gold); font-family: var(--font-cond-family); text-transform: uppercase; letter-spacing: 2px; font-size: 11px; display: block; margin-bottom: 4px; } /* ---------- 10. Sale / new badges ---------- */ .badge { border-radius: 0 !important; font-family: var(--font-cond-family) !important; text-transform: uppercase !important; letter-spacing: 2px !important; font-size: 10.5px !important; font-weight: 700 !important; padding: 5px 10px !important; background: var(--fw-red) !important; color: var(--fw-cream) !important; border: none !important; } .badge.badge--bottom-left, .card .badge { top: 12px; left: 12px; } /* ---------- 11. Forms (newsletter, contact) ---------- */ .field__input, input[type="text"], input[type="email"], input[type="tel"], textarea, select { background: var(--fw-cream-soft) !important; border: 1px solid rgba(15, 27, 45, 0.25) !important; border-radius: 0 !important; color: var(--fw-navy) !important; font-family: var(--font-body-family) !important; } .field__label, label { font-family: var(--font-cond-family) !important; text-transform: uppercase; letter-spacing: 1.5px; font-size: 11px; color: var(--fw-sepia); font-weight: 700; } /* ---------- 12. Section heads ---------- */ .section-header, .collection-hero { text-align: left; } .collection-hero__title { font-family: var(--font-heading-family); font-weight: 900; font-size: clamp(36px, 5vw, 60px); letter-spacing: -1.4px; line-height: 1.05; color: var(--fw-navy); } /* ---------- 13. Utility classes you can drop in any rich-text editor ---------- */ .fw-band-navy { background: var(--fw-navy); color: var(--fw-cream); padding: 28px 24px; margin: 28px 0; border-top: 1px solid var(--fw-gold); border-bottom: 1px solid var(--fw-gold); } .fw-band-cream { background: var(--fw-cream-soft); padding: 28px 24px; margin: 28px 0; border-top: 1px solid rgba(15,27,45,0.12); border-bottom: 1px solid rgba(15,27,45,0.12); } .fw-divider { text-align: center; margin: 24px 0; color: var(--fw-sepia); letter-spacing: 14px; font-size: 14px; } /* ---------- 14. Mobile tightening ---------- */ @media (max-width: 749px) { .button { padding: 14px 18px !important; font-size: 12px !important; } .product__title h1 { font-size: 32px; } } /* ---------- 15. Killing default Dawn corners (we want sharp, vintage-press feel) ---------- */ .card, .card__inner, .field, .field__input, .button, .media, .badge, .price__container, .product-form__buttons > * { border-radius: 0 !important; } /* ============================================================ END custom.css ============================================================ */