{% comment %}
Pitmaster — Men's Tallow Line
Custom page section for Caldwell Cosmetics / Caldwell County BBQ
SETUP (one-time):
1. Theme editor > Edit code > Assets > Add a new asset > upload "Empera.ttf"
2. Settings > Files (or Content > Files) > Upload files > upload "logo-cream.png" and "logo-lineart.png"
(keep those exact filenames, or update the file_url references below to match)
3. Save this file as sections/pitmaster-page.liquid
4. Save templates/page.pitmaster.json (provided separately)
5. Online Store > Pages > Add page > Title "Pitmaster" > Theme template: page.pitmaster > Save
6. Visit /pages/pitmaster to view it live
Product handles used below match your live store:
- mens-beard-oil ($10.00)
- mens-beard-balm ($9.00)
- repair-lotion ($13.00)
All three currently show 0 inventory in Shopify — restock or enable
"continue selling when out of stock" before launch, or the Add to Cart
buttons below will correctly show "Sold Out."
{% endcomment %}
{% assign oil = all_products['mens-beard-oil'] %}
{% assign balm = all_products['mens-beard-balm'] %}
{% assign lotion = all_products['repair-lotion'] %}
<style>
@font-face {
font-family: 'Empera';
src: url('{{ "Empera.ttf" | asset_url }}') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
.pm {
--rust: #B52A0E;
--hide-tan: #A78A72;
--ink: #1B1916;
--cream: #FFFDD7;
--black: #1B1B1B;
background: var(--ink);
color: var(--cream);
font-family: 'DM Sans', sans-serif;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
.pm * { box-sizing: border-box; }
.pm h1, .pm h2, .pm h3, .pm .display {
font-family: 'Empera', serif;
font-weight: normal;
letter-spacing: 0.03em;
text-transform: uppercase;
line-height: 1.05;
}
.pm a { color: inherit; text-decoration: none; }
.pm img { display: block; max-width: 100%; }
.pm .wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
/* Hero */
.pm .hero { position: relative; min-height: 82vh; display: flex; align-items: center; overflow: hidden; }
.pm .hero-bg { position: absolute; inset: 0; background-image: url('{{ lotion.images[1] | image_url: width: 1800 }}'); background-size: cover; background-position: center 35%; }
.pm .hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27,25,22,0.55) 0%, rgba(27,25,22,0.55) 40%, rgba(27,25,22,0.96) 100%); }
.pm .hero-content { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: 0 32px; width: 100%; }
.pm .hero-kicker { color: var(--rust); font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; margin-bottom: 18px; }
.pm .hero h1 { font-size: clamp(48px, 8vw, 108px); color: var(--cream); margin-bottom: 22px; }
.pm .hero h1 .thin { color: var(--hide-tan); }
.pm .hero p.sub { font-size: clamp(17px, 2vw, 21px); max-width: 560px; opacity: 0.92; margin-bottom: 34px; }
.pm .btn { display: inline-block; background: var(--rust); color: var(--cream); padding: 16px 38px; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; border: 1px solid var(--rust); cursor: pointer; transition: background .2s, color .2s; }
.pm .btn:hover { background: transparent; color: var(--rust); }
.pm .btn.outline { background: transparent; border: 1px solid var(--cream); color: var(--cream); }
.pm .btn.outline:hover { background: var(--cream); color: var(--ink); }
/* Voice strip */
.pm .voice-strip { background: var(--black); border-top: 1px solid rgba(255,253,215,.1); border-bottom: 1px solid rgba(255,253,215,.1); padding: 46px 32px; text-align: center; }
.pm .voice-strip p { font-family: 'Empera', serif; font-size: clamp(20px,3vw,32px); text-transform: uppercase; color: var(--hide-tan); max-width: 820px; margin: 0 auto; }
.pm .voice-strip p span { color: var(--rust); }
/* Products */
.pm .section { padding: 90px 32px; }
.pm .section-head { text-align: center; margin-bottom: 56px; }
.pm .section-head .kicker { color: var(--rust); font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; margin-bottom: 14px; }
.pm .section-head h2 { font-size: clamp(32px,5vw,52px); color: var(--cream); }
.pm .product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1180px; margin: 0 auto; }
.pm .product-card { background: var(--black); border: 1px solid rgba(255,253,215,.08); display: flex; flex-direction: column; }
.pm .product-photo { aspect-ratio: 1/1; overflow: hidden; background: #000; }
.pm .product-photo img { width: 100%; height: 100%; object-fit: cover; }
.pm .product-body { padding: 26px 24px 28px; display: flex; flex-direction: column; flex-grow: 1; }
.pm .product-eyebrow { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hide-tan); margin-bottom: 8px; }
.pm .product-card h3 { font-size: 24px; color: var(--cream); margin-bottom: 12px; }
.pm .product-card p.desc { font-size: 14px; color: var(--hide-tan); margin-bottom: 18px; flex-grow: 1; }
.pm .product-meta { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255,253,215,.1); padding-top: 18px; }
.pm .price { font-family: 'Empera', serif; font-size: 22px; color: var(--cream); }
.pm .add-btn { background: var(--rust); color: var(--cream); border: none; padding: 11px 22px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; cursor: pointer; }
.pm .add-btn:hover { background: var(--cream); color: var(--ink); }
.pm .add-btn[disabled] { background: var(--hide-tan); color: var(--ink); cursor: not-allowed; opacity: .7; }
/* Story */
.pm .story { background: var(--hide-tan); color: var(--ink); }
.pm .story-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.pm .story-copy { padding: 90px 56px; display: flex; flex-direction: column; justify-content: center; }
.pm .story-copy .kicker { color: var(--rust); font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; margin-bottom: 18px; }
.pm .story-copy h2 { font-size: clamp(28px,4vw,44px); color: var(--ink); margin-bottom: 22px; }
.pm .story-copy p { font-size: 16px; margin-bottom: 16px; max-width: 480px; }
.pm .story-copy p.sign { font-family: 'Empera', serif; text-transform: uppercase; letter-spacing: .05em; font-size: 15px; margin-top: 8px; }
.pm .story-photo { position: relative; min-height: 460px; overflow: hidden; }
.pm .story-photo img { width: 100%; height: 100%; object-fit: cover; }
/* CTA */
.pm .cta { background: var(--ink); text-align: center; padding: 100px 32px; position: relative; }
.pm .cta img.watermark { position: absolute; top: 50%; left: 50%; width: 440px; transform: translate(-50%,-50%); opacity: .05; pointer-events: none; }
.pm .cta-inner { position: relative; z-index: 2; }
.pm .cta h2 { font-size: clamp(30px,5vw,50px); color: var(--cream); margin-bottom: 16px; }
.pm .cta p { color: var(--hide-tan); max-width: 460px; margin: 0 auto 30px; font-size: 16px; }
@media (max-width: 860px) {
.pm .product-grid { grid-template-columns: 1fr; }
.pm .story-grid { grid-template-columns: 1fr; }
.pm .story-photo { min-height: 300px; }
}
</style>
<div class="pm">
<section class="hero">
<div class="hero-bg"></div>
<div class="hero-overlay"></div>
<div class="hero-content">
<div class="hero-kicker">Caldwell County BBQ — Men's Tallow Line</div>
<h1>Built at the pit.<br><span class="thin">Made for your hands.</span></h1>
<p class="sub">Beard oil, beard balm, and repair lotion — rendered from real beef tallow, the same stuff that makes a brisket worth waking up at 5 a.m. for. No fluff, no twelve-dollar words. Just good fat, doing its job.</p>
<a href="#pm-shop" class="btn">Shop The Line</a>
</div>
</section>
<div class="voice-strip">
<p>We didn't set out to make skincare. <span>We had good tallow left over.</span></p>
</div>
<section class="section" id="pm-shop">
<div class="section-head">
<div class="kicker">The Line-Up</div>
<h2>Three products. No filler.</h2>
</div>
<div class="product-grid">
{% for product in oil, balm, lotion %}
<div class="product-card">
<div class="product-photo">
<a href="{{ product.url }}">
<img src="{{ product.featured_image | image_url: width: 900 }}" alt="{{ product.title | escape }}" loading="lazy">
</a>
</div>
<div class="product-body">
<div class="product-eyebrow">{{ product.type | default: "Men's Tallow Care" }}</div>
<h3><a href="{{ product.url }}">{{ product.title }}</a></h3>
<p class="desc">{{ product.description | strip_html | truncatewords: 32 }}</p>
<div class="product-meta">
<div class="price">{{ product.price | money }}</div>
<form method="post" action="/cart/add" accept-charset="UTF-8">
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
<input type="hidden" name="quantity" value="1">
{% if product.available %}
<button type="submit" class="add-btn">Add to Cart</button>
{% else %}
<button type="button" class="add-btn" disabled>Sold Out</button>
{% endif %}
</form>