Subscriptions 2 (test)
:root{ --cream:#F3ECDC; --cream-2:#FAF6EC; --sage:#E2E9DB; --ink:#21201A; --muted:#6E6857; --muted-2:#928B79; --green:#1E3A2A; --green-deep:#163020; --gold:#BB8C2C; --gold-btn:#E1A 73C; --gold-soft:#F2E2BC; --line:rgba(33,32,26,.13); --line-soft:rgba(33,32,26,.08); --shadow:0 24px 60px -28px rgba(28,40,28,.32); --shadow-sm:0 14px 34px -20px rgba(28,40,28,.30); --serif:"Noto Serif","Iowan Old Style",Georgia,serif; --book:"Inter",-apple-system,Helvetica,Arial,sans-serif; --sans:"Montserrat",-apple-system,Helvetica,Arial,sans-serif; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:var(--book); background:var(--cream); color:var(--ink); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.5; } img{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} .wrap{max-width:1180px;margin:0 auto;padding:0 32px} .section{padding:clamp(74px,9vw,128px) 0} /* ---------- shared type ---------- */ .overline{ font-family:var(--sans); font-size:13px;font-weight:600; letter-spacing:.2em;text-transform:uppercase; color:var(--gold); } .h-display{font-family:var(--serif);font-weight:700;line-height:1.02;letter-spacing:-.012em;color:var(--ink)} .h2{font-family:var(--serif);font-weight:700;font-size:clamp(33px,4.3vw,52px);line-height:1.05;letter-spacing:-.01em} .lede{font-family:var(--book);font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--muted)} .italic-gold{font-style:italic;color:var(--gold);font-weight:600} .center{text-align:center} /* ---------- buttons / pills ---------- */ .btn{ font-family:var(--sans);font-weight:600;font-size:16px; display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:17px 30px;border-radius:999px;line-height:1; transition:transform .18s ease, background .18s ease, box-shadow .18s ease; } .btn:active{transform:translateY(1px)} .btn-green{background:var(--green);color:#F4EFE2;box-shadow:0 16px 30px -16px rgba(30,58,42,.6)} .btn-green:hover{background:#173021} .btn-gold{background:var(--gold-btn);color:#3A2A09} .btn-gold:hover{background:#d39c30} .btn-ghost{background:transparent;color:var(--green);box-shadow:inset 0 0 0 1.5px rgba(30,58,42,.35)} .btn-ghost:hover{box-shadow:inset 0 0 0 1.5px rgba(30,58,42,.7)} .btn-block{width:100%} .pill{ font-family:var(--sans);font-weight:500;font-size:14.5px; padding:10px 18px;border-radius:999px; background:rgba(255,255,255,.55);color:var(--muted); box-shadow:inset 0 0 0 1px var(--line); transition:all .16s ease;white-space:nowrap; } .pill:hover{color:var(--ink)} .pill.active{background:var(--green);color:#F2EEE1;box-shadow:none} /* ---------- header ---------- */ header{ position:sticky;top:0;z-index:60; background:rgba(243,236,220,.86); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom:1px solid transparent;transition:border-color .2s ease; } header.scrolled{border-bottom-color:var(--line)} .nav{display:flex;align-items:center;justify-content:space-between;height:74px} .brand{display:flex;align-items:center;gap:11px} .brand img{width:34px;height:34px;border-radius:8px} .brand b{font-family:var(--serif);font-weight:700;font-size:21px;letter-spacing:-.01em;white-space:nowrap} .brand{flex:none} .nav-links{display:flex;gap:34px;font-family:var(--sans);font-size:15px;font-weight:500;color:var(--muted)} .nav-links a:hover{color:var(--ink)} .nav-right{display:flex;align-items:center;gap:18px} .cart{ width:44px;height:44px;border-radius:999px;display:grid;place-items:center; background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px var(--line); } .cart svg{width:19px;height:19px;stroke:var(--ink);fill:none;stroke-width:1.6} /* ---------- hero ---------- */ .hero{padding-top:clamp(48px,6vw,84px);text-align:center} .hero .overline{display:block;margin-bottom:24px} .hero h1{font-size:clamp(46px,7.2vw,86px);max-width:14ch;margin:0 auto} .hero h1 .line2{display:block} .hero .lede{max-width:30em;margin:28px auto 0} .hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:38px} .trust{ display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-top:30px; font-family:var(--sans);font-size:14.5px;color:var(--muted);font-weight:500; } .trust span{display:inline-flex;align-items:center;gap:8px} .trust svg{width:16px;height:16px;stroke:var(--green);fill:none;stroke-width:2} .hero-photo{ margin-top:clamp(52px,7vw,86px);border-radius:30px;overflow:hidden; box-shadow:var(--shadow);position:relative;aspect-ratio:16/8; } .hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 35%} .hero-photo .badge{ position:absolute;left:28px;bottom:28px; background:rgba(243,236,220,.92);backdrop-filter:blur(6px); border-radius:16px;padding:16px 22px;font-family:var(--sans); box-shadow:var(--shadow-sm); } .hero-photo .badge b{display:block;font-size:24px;font-weight:700;color:var(--green);font-family:var(--serif)} .hero-photo .badge small{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} /* ---------- band ---------- */ .band-sage{background:var(--sage)} .band-cream2{background:var(--cream-2)} /* ---------- steps ---------- */ .sec-head{max-width:42ch} .sec-head.center{margin:0 auto} .sec-head .overline{display:block;margin-bottom:18px} .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px} .step{ background:var(--cream-2);border-radius:22px;padding:40px 34px; box-shadow:var(--shadow-sm);border:1px solid var(--line-soft); } .step .num{font-family:var(--serif);font-weight:600;font-size:46px;color:var(--gold);line-height:1} .step h3{font-family:var(--serif);font-weight:600;font-size:26px;margin:18px 0 12px;letter-spacing:-.01em} .step p{font-size:18px;color:var(--muted);line-height:1.55} /* ---------- product selector ---------- */ .toggle{ display:inline-flex;gap:6px;padding:6px;border-radius:999px; background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px var(--line); margin:34px auto 0; } .toggle button{ font-family:var(--sans);font-weight:600;font-size:15px; padding:11px 26px;border-radius:999px;color:var(--muted);transition:all .18s ease; } .toggle button.active{background:var(--green);color:#F2EEE1} .products{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:52px} .products.single{grid-template-columns:minmax(0,470px);justify-content:center} .card{ background:var(--cream-2);border-radius:26px;overflow:hidden; box-shadow:var(--shadow);border:1px solid var(--line-soft); display:flex;flex-direction:column; } .card-media{ position:relative;overflow:hidden;background:linear-gradient(170deg,#fbf7ee,#eef0e6); height:300px; } .card-media img{position:absolute;inset:26px;width:calc(100% - 52px);height:calc(100% - 52px);object-fit:contain;z-index:1;filter:drop-shadow(0 16px 24px rgba(40,50,40,.20));transition:opacity .25s ease} .save-badge{ position:absolute;top:20px;right:20px;z-index:2; font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:.02em; background:var(--gold-btn);color:#3A2A09;padding:9px 15px;border-radius:999px; } .card-body{padding:32px 32px 34px;display:flex;flex-direction:column;flex:1} .card-body h3{font-family:var(--serif);font-weight:700;font-size:29px;letter-spacing:-.01em} .card-sub{font-family:var(--book);color:var(--muted);font-size:18px;margin-top:4px} .field-label{ font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--muted-2);margin:26px 0 12px; } .pill-row{display:flex;flex-wrap:wrap;gap:9px} .price-row{display:flex;align-items:baseline;gap:14px;margin-top:26px} .price{font-family:var(--serif);font-weight:700;font-size:42px;color:var(--green);letter-spacing:-.01em} .price-old{font-family:var(--book);font-size:21px;color:var(--muted-2);text-decoration:line-through} .card .btn{margin-top:26px} .card-foot{ font-family:var(--sans);font-size:13px;color:var(--muted-2);text-align:center; margin-top:16px; } .card-spacer{flex:1} /* ---------- why subscribe ---------- */ .why{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(40px,6vw,84px);align-items:center} .why-photo{border-radius:26px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:5/6} .why-photo img{width:100%;height:100%;object-fit:cover} .why .h2{margin-top:18px} .benefits{margin-top:34px;display:flex;flex-direction:column} .benefit{display:flex;gap:18px;padding:22px 0;border-top:1px solid var(--line)} .benefit:first-child{border-top:none;padding-top:8px} .bchk{ flex:none;width:30px;height:30px;border-radius:9px;background:var(--gold-soft); display:grid;place-items:center;margin-top:3px; } .bchk svg{width:16px;height:16px;stroke:var(--gold);fill:none;stroke-width:2.4} .benefit h4{font-family:var(--serif);font-weight:600;font-size:21px;letter-spacing:-.005em} .benefit p{font-size:17.5px;color:var(--muted);margin-top:5px;line-height:1.5} /* ---------- testimonials ---------- */ .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:54px} .quote{ background:var(--cream-2);border-radius:22px;padding:36px 34px; box-shadow:var(--shadow-sm);border:1px solid var(--line-soft); display:flex;flex-direction:column; } .stars{color:var(--gold-btn);font-size:18px;letter-spacing:3px;margin-bottom:20px} .quote p{font-family:var(--book);font-size:20px;line-height:1.5;color:var(--ink)} .quote .who{margin-top:auto;padding-top:26px} .quote .who b{font-family:var(--sans);font-weight:600;font-size:15px} .quote .who span{display:block;font-family:var(--sans);font-size:13.5px;color:var(--muted-2);margin-top:3px} /* ---------- faq ---------- */ .faq-list{max-width:780px;margin:48px auto 0;display:flex;flex-direction:column;gap:14px} .faq{ background:var(--cream-2);border-radius:18px;border:1px solid var(--line-soft); box-shadow:var(--shadow-sm);overflow:hidden; } .faq button{ width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px; padding:24px 28px;text-align:left; font-family:var(--serif);font-weight:600;font-size:21px;color:var(--ink); } .faq .chev{flex:none;width:20px;height:20px;stroke:var(--gold);fill:none;stroke-width:2;transition:transform .25s ease} .faq.open .chev{transform:rotate(180deg)} .faq .ans{max-height:0;overflow:hidden;transition:max-height .3s ease} .faq .ans p{padding:0 28px 26px;font-size:18px;color:var(--muted);line-height:1.6} /* ---------- final cta ---------- */ .final{padding:0 0 clamp(80px,9vw,120px)} .final-inner{ background:var(--green);border-radius:34px;text-align:center; padding:clamp(60px,8vw,104px) 32px;color:#EFEAD9;position:relative;overflow:hidden; } .final-inner .overline{color:var(--gold-btn)} .final-inner h2{font-family:var(--serif);font-weight:700;font-size:clamp(34px,5vw,60px);color:#F4EFE2;margin:18px 0 0;letter-spacing:-.01em;line-height:1.05} .final-inner p{max-width:40ch;margin:22px auto 0;font-size:20px;color:rgba(239,234,217,.82);line-height:1.5} .final-inner .btn{margin-top:38px} /* ---------- footer ---------- */ footer{border-top:1px solid var(--line);padding:72px 0 40px} .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px} .foot-brand .se{display:flex;align-items:center;gap:11px} .se-badge{width:38px;height:38px;border-radius:999px;background:var(--gold-btn);color:#3A2A09;font-family:var(--sans);font-weight:700;font-size:14px;display:grid;place-items:center} .foot-brand b{font-family:var(--serif);font-size:21px} .foot-brand p{margin-top:18px;color:var(--muted);font-size:16px;max-width:30ch;line-height:1.55} .foot-col h5{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin-bottom:18px} .foot-col a{display:block;font-family:var(--sans);font-size:15px;color:var(--muted);padding:7px 0} .foot-col a:hover{color:var(--ink)} .foot-bottom{margin-top:56px;padding-top:28px;border-top:1px solid var(--line-soft);text-align:center;font-family:var(--sans);font-size:13.5px;color:var(--muted-2)} /* ---------- sticky offer ---------- */ .offer{ position:fixed;right:24px;bottom:24px;z-index:70; background:var(--cream-2);border-radius:16px;box-shadow:var(--shadow); padding:16px 20px 16px 18px;display:flex;align-items:center;gap:14px; border:1px solid var(--line);max-width:300px; transform:translateY(0);transition:transform .35s ease, opacity .35s ease; } .offer.hide{transform:translateY(150%);opacity:0;pointer-events:none} .offer .dot{width:38px;height:38px;border-radius:11px;background:var(--gold-soft);display:grid;place-items:center;flex:none} .offer .dot b{font-family:var(--serif);font-weight:700;color:var(--gold);font-size:16px} .offer .txt b{font-family:var(--sans);font-size:14px;color:var(--green);display:block} .offer .txt span{font-family:var(--sans);font-size:13px;color:var(--muted)} .offer .x{margin-left:4px;color:var(--muted-2);font-size:20px;line-height:1;align-self:flex-start;padding:0 2px} /* ---------- responsive ---------- */ @media(max-width:900px){ .nav-links{display:none} .steps{grid-template-columns:1fr;gap:18px} .products{grid-template-columns:1fr} .why{grid-template-columns:1fr;gap:40px} .why-photo{aspect-ratio:16/11;max-height:420px} .quotes{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr 1fr;gap:36px 24px} .foot-brand{grid-column:1/-1} .hero-photo{aspect-ratio:4/3} } @media(max-width:560px){ .wrap{padding:0 22px} .hero-cta{flex-direction:column} .hero-cta .btn{width:100%} .foot-grid{grid-template-columns:1fr 1fr} .offer{left:16px;right:16px;bottom:16px;max-width:none} .card-media{height:240px} .price{font-size:36px} } Subscribe & Save 5% Health is a daily habit.We make it automatic. Consistency is the secret to lasting health results. Our subscription delivers premium cold-pressed camelina oil on your schedule — so your pet never misses a dose. Start My Subscription — Save 5% How It Works Cancel anytime Free shipping Pause or skip 10,000+Happy Animals Simple & Flexible How subscriptions work 01 Choose your product Select the right camelina oil for your pet — canine or equine, in the size that fits. 02 Set your frequency Every 4, 6, 8, 10, or 12 weeks. Adjust anytime based on your pet's needs. 03 We deliver, you save Enjoy 5% off every order, delivered to your door. Pause, skip, or cancel anytime. Choose Your Plan Select your product Canine Equine Why Subscribe Consistency is the secret to lasting results. Better joint mobility Omega-3 fatty acids support joint health for more comfortable movement every day. Healthier skin & coat Vitamin E and balanced omegas promote a fuller, softer coat and reduce shedding. Cardiovascular support A unique omega balance that supports heart health and overall vitality. Cognitive function Essential fatty acids that support brain health and cognitive function as your pet ages. Trusted by Thousands What subscribers say ★★★★★ The subscription is so convenient. My dog's coat has never looked better, and I never have to worry about running out. Sarah M.Golden Retriever Owner ★★★★★ Having it delivered automatically every 6 weeks is a game-changer. My horses' joint mobility has noticeably improved. James R.Equine Trainer ★★★★★ I love that I can adjust the frequency. When my dog had surgery, I paused it for a month — no questions asked. Lisa T.Multi-pet Household Common Questions Frequently asked questions Start Today Your pet deserves consistency Join thousands of pet owners who trust Smart Earth for their daily health routine. Save 5% on every delivery. Start My Subscription 5% Here's 5% OffYour first order × /* ----- product catalog — real Smart Earth pricing & imagery · Subscribe & Save 5% ----- */ const SH="https://cdn.shopify.com/s/files/1/0280/0566/2768/files/"; const IMG={ jug: SH+"Copy_of_Jug.png?v=1758677035", plus1: SH+"Front_2a767fee-7b68-439a-b74e-932fa06247e3.png?v=1758677456", can16: SH+"Copy_of_Single-1_1b3f7934-6bd6-45cc-a3bf-2fc685d699c0.png?v=1758677747", can2pk: SH+"Double.png?v=1758677747", can64: SH+"Copy_of_Canine_Jug_Front.png?v=1758677480" }; // {variant_id, plans} carries everything cart-add needs for a given size. const EQUINE_OIL={name:"Camelina Oil for Equine",sub:"Premium cold-pressed camelina oil",variants:[ {size:"1 Gallon Jug (3.78L)",reg:"74.99",price:"71.24",save:"3.75",img:IMG.jug, variant:41452203376813, plans:{4:1959362733,6:1960214701,8:1959952557,10:1959657645,12:1959788717}} ]}; const PLUS={name:"Camelina Plus",sub:"Gastric Wellness Support",variants:[ {size:"1 Pack",reg:"89.99",price:"85.49",save:"4.50",img:IMG.plus1, variant:45360967581869, plans:{4:2687697069,6:2687729837,8:2687664301,10:2687762605,12:2687795373}} ]}; const CANINE_OIL={name:"Camelina Oil for Canine",sub:"Premium cold-pressed camelina oil",variants:[ {size:"16 oz",reg:"24.99",price:"23.74",save:"1.25",img:IMG.can16, variant:39476763164845, plans:{4:1959395501,6:1959559341,8:1960018093,10:1959854253,12:1959526573}}, {size:"16 oz · 2-Pack",reg:"44.99",price:"42.74",save:"2.25",img:IMG.can2pk, variant:39476763197613, plans:{4:1959395501,6:1959559341,8:1960018093,10:1959854253,12:1959526573}}, {size:"64 oz",reg:"64.99",price:"61.74",save:"3.25",img:IMG.can64, variant:41391907012781, plans:{4:1959985325,6:1959919789,8:1959887021,10:1960050861,12:1960313005}} ]}; const PRODUCTS={equine:[EQUINE_OIL,PLUS],canine:[CANINE_OIL]}; const FREQ=[ {label:"4 weeks", key:4}, {label:"6 weeks", key:6}, {label:"8 weeks", key:8}, {label:"10 weeks", key:10}, {label:"12 weeks", key:12} ]; function cardHTML(p){ const v=p.variants[0]; const sizes=p.variants.map((x,i)=>''+x.size+'').join(""); const freq=FREQ.map((f,i)=>''+f.label+'').join(""); return '' + 'Save $'+v.save+'' + '' + ''+p.name+'' + ''+p.sub+'' + 'Size'+sizes+'' + '$'+v.price+'$'+v.reg+'' + 'Delivery Frequency'+freq+'' + '' + 'Subscribe & Save — $'+v.price+'' + 'Cancel anytime · Free shipping' + '' + ''; } function renderProducts(pet){ const wrap=document.getElementById("products"); wrap.classList.toggle("single",PRODUCTS[pet].length===1); wrap.innerHTML=PRODUCTS[pet].map(cardHTML).join(""); } renderProducts("equine"); /* pill selection + dynamic variant swap (image · price · button) */ document.getElementById("products").addEventListener("click",e=>{ const b=e.target.closest(".pill");if(!b)return; b.parentElement.querySelectorAll(".pill").forEach(p=>p.classList.remove("active")); b.classList.add("active"); if(b.dataset.group==="size"){ const card=b.closest(".card"); const img=card.querySelector(".card-media img"); img.style.opacity="0"; setTimeout(()=>{img.src=b.dataset.img;img.style.opacity="1";},120); card.querySelector(".save-badge").textContent="Save $"+b.dataset.save; card.querySelector(".price").textContent="$"+b.dataset.price; card.querySelector(".price-old").textContent="$"+b.dataset.reg; card.querySelector(".btn-green").textContent="Subscribe & Save — $"+b.dataset.price; } }); /* Subscribe button — hit /cart/add.js with the real variant + selling plan id */ document.getElementById("products").addEventListener("click", async (e)=>{ const btn=e.target.closest(".btn-green"); if(!btn) return; const card=btn.closest(".card"); const sizeBtn=card.querySelector('.pill[data-group="size"].active'); const freqBtn=card.querySelector('.pill[data-group="freq"].active'); if(!sizeBtn||!freqBtn) return; const plans=JSON.parse(sizeBtn.getAttribute("data-plans")); const planId=plans[freqBtn.dataset.freq]; const variantId=parseInt(sizeBtn.dataset.variant,10); const orig=btn.textContent; btn.disabled=true; btn.textContent="Adding…"; try{ const r=await fetch('/cart/add.js',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({items:[{id:variantId,quantity:1,selling_plan:planId}]})}); if(!r.ok){ const t=await r.text(); throw new Error('cart_add_failed: '+t.substring(0,80)); } btn.textContent="✓ Added"; window.dispatchEvent(new CustomEvent("se:cart-updated")); if (typeof window.openCartDrawer === 'function') { try { window.openCartDrawer(); } catch(_){} } setTimeout(()=>{ btn.textContent=orig; btn.disabled=false; }, 1800); }catch(err){ console.error('subscriptions-2 add error', err); btn.textContent="Try again"; setTimeout(()=>{ btn.textContent=orig; btn.disabled=false; }, 2200); } }); /* Pet toggle */ document.getElementById("toggle").addEventListener("click",e=>{ const b=e.target.closest("[data-pet]");if(!b)return; e.currentTarget.querySelectorAll("[data-pet]").forEach(p=>p.classList.remove("active")); b.classList.add("active"); renderProducts(b.dataset.pet); }); const FAQS=[ ["How much do I save with a subscription?","Every subscription order is 5% off the regular price, automatically — for the life of your subscription. You'll also get free shipping on every delivery."], ["Can I cancel my subscription?","Absolutely. There are no contracts or commitments. Pause, skip, or cancel anytime from your account in just a couple of clicks — no questions asked."], ["How do I change my delivery frequency?","Choose any cadence from every 4 to every 12 weeks, and adjust it whenever your pet's needs change. Updates apply to your next scheduled delivery."], ["Is there free shipping on subscriptions?","Yes. Every subscription order ships free across the U.S., with no minimum order required."], ["What if my pet doesn't like it?","We stand behind every bottle with our 60-day money-back guarantee. If your pet isn't thrilled, we'll refund your first order in full."] ]; document.getElementById("faq-list").innerHTML=FAQS.map(([q,a])=>` ${q} ${a} `).join(""); document.getElementById("faq-list").addEventListener("click",e=>{ const btn=e.target.closest(".faq>button");if(!btn)return; const item=btn.parentElement;const ans=item.querySelector(".ans"); const open=item.classList.toggle("open"); ans.style.maxHeight=open?ans.scrollHeight+"px":"0"; }); /* sticky offer */ document.getElementById("offer-x").addEventListener("click",()=>document.getElementById("offer").classList.add("hide"));
