:root{
–bg:#070A0F;
–fg:#EAF2FF;
–muted:rgba(234,242,255,.72);
–muted2:rgba(234,242,255,.55);
–line:rgba(234,242,255,.10);
–glass:rgba(255,255,255,.06);
–shadow: 0 10px 30px rgba(0,0,0,.45);
–r: 20px;
–max: 1160px;
–grad: conic-gradient(from 180deg at 50% 50%, #8B5CF6, #22C55E, #06B6D4, #F59E0B, #EF4444, #8B5CF6);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(–bg);color:var(–fg);font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, “Apple Color Emoji”,”Segoe UI Emoji”; line-height:1.5; overflow-x:hidden}
a{color:inherit;text-decoration:none}
/* — ambient background — */
.ffp-wrap{position:relative;min-height:100vh;isolation:isolate}
.ffp-bg{position:absolute;inset:-20vh -20vw;z-index:-2;pointer-events:none;opacity:.9}
.ffp-noise{position:absolute;inset:0;z-index:-1;pointer-events:none;mix-blend-mode:overlay;opacity:.25}
.ffp-noise::before{content:””;position:absolute;inset:0;background-image:radial-gradient(circle at 20% 10%, rgba(255,255,255,.20) 0 1px, transparent 1px),radial-gradient(circle at 80% 40%, rgba(255,255,255,.12) 0 1px, transparent 1px),radial-gradient(circle at 40% 90%, rgba(255,255,255,.10) 0 1px, transparent 1px);background-size: 280px 280px, 340px 340px, 420px 420px;filter: blur(.2px);animation: ffp-drift 18s linear infinite}
@keyframes ffp-drift{to{transform:translate3d(120px,-80px,0)}}
/* — layout — */
.ffp{max-width:var(–max);margin:0 auto;padding:28px 18px 120px}
.ffp-topbar{position:sticky;top:0;z-index:50;backdrop-filter:saturate(120%) blur(12px);background:linear-gradient(to bottom, rgba(7,10,15,.78), rgba(7,10,15,.25));border-bottom:1px solid var(–line)}
.ffp-topbar .ffp{padding:14px 18px}
.ffp-nav{display:flex;align-items:center;justify-content:space-between;gap:18px}
.ffp-brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.2px}
.ffp-mark{width:34px;height:34px;border-radius:12px;background:var(–grad);filter:saturate(125%);box-shadow: 0 12px 35px rgba(139,92,246,.25)}
.ffp-links{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.ffp-links a{padding:10px 10px;border-radius:12px;color:var(–muted);border:1px solid transparent;transition:.2s ease}
.ffp-links a:hover{color:var(–fg);border-color:var(–line);background:rgba(255,255,255,.04)}
.ffp-cta{display:flex;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 14px;border-radius:14px;border:1px solid var(–line);background:rgba(255,255,255,.04);color:var(–fg);box-shadow:none;transition:.22s ease;white-space:nowrap}
.btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.07)}
.btn-primary{border-color:transparent;background:var(–grad);color:#081018;box-shadow: 0 18px 55px rgba(34,197,94,.18)}
.btn-primary:hover{filter:saturate(120%);transform:translateY(-1px) scale(1.01)}
.btn svg{width:16px;height:16px;opacity:.9}
/* — hero — */
.hero{padding:78px 0 44px;display:grid;grid-template-columns: 1.1fr .9fr;gap:34px;align-items:center}
@media (max-width: 980px){.hero{grid-template-columns:1fr;gap:22px;padding-top:52px}}
.kicker{display:inline-flex;gap:10px;align-items:center;padding:10px 12px;border-radius:999px;border:1px solid var(–line);background:rgba(255,255,255,.04);color:var(–muted);font-size:13px}
.kicker b{color:var(–fg)}
.h1{font-size:clamp(38px,4.6vw,64px);line-height:1.02;margin:14px 0 12px;letter-spacing:-.03em}
.h1 .shine{background:var(–grad);-webkit-background-clip:text;background-clip:text;color:transparent;filter:saturate(135%);animation: hue 9s linear infinite}
@keyframes hue{to{filter:hue-rotate(360deg) saturate(135%)}}
.sub{font-size:18px;color:var(–muted);max-width:56ch}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 0}
.mini{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;color:var(–muted2);font-size:13px}
.mini span{display:inline-flex;gap:8px;align-items:center;padding:8px 10px;border:1px dashed rgba(234,242,255,.18);border-radius:999px;background:rgba(255,255,255,.03)}
.mini svg{width:14px;height:14px;opacity:.9}
/* — right hero panel — */
.panel{position:relative;border-radius:var(–r);border:1px solid var(–line);background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));box-shadow:var(–shadow);overflow:hidden}
.panel::before{content:””;position:absolute;inset:-80px;background:radial-gradient(circle at 30% 20%, rgba(34,197,94,.20), transparent 55%),radial-gradient(circle at 70% 30%, rgba(139,92,246,.20), transparent 55%),radial-gradient(circle at 55% 80%, rgba(6,182,212,.16), transparent 60%);filter:blur(10px);animation: floaty 12s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(18px,-14px,0)}}
.panel-inner{position:relative;padding:18px}
.ticker{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px;border-radius:16px;border:1px solid rgba(234,242,255,.14);background:rgba(7,10,15,.35);backdrop-filter: blur(8px)}
.ticker .dot{width:10px;height:10px;border-radius:999px;background:#22C55E;box-shadow: 0 0 0 6px rgba(34,197,94,.14)}
.ticker .label{font-size:12px;color:var(–muted)}
.grid{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width: 520px){.grid{grid-template-columns:1fr}}
.card{padding:14px;border-radius:18px;border:1px solid rgba(234,242,255,.12);background:rgba(7,10,15,.34);backdrop-filter: blur(10px);transition:.22s ease}
.card:hover{transform:translateY(-2px);border-color:rgba(234,242,255,.22)}
.card h3{margin:0 0 8px;font-size:14px;letter-spacing:.2px}
.card p{margin:0;color:var(–muted);font-size:13px}
.metric{display:flex;align-items:baseline;gap:10px;margin-top:10px}
.metric b{font-size:28px;letter-spacing:-.02em}
.metric i{font-style:normal;color:var(–muted2);font-size:12px}
/* — sections — */
.section{margin-top:54px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap}
.section h2{font-size:clamp(24px,2.6vw,34px);margin:0;letter-spacing:-.02em}
.section .lead{color:var(–muted);max-width:70ch;margin:10px 0 0}
.features{margin-top:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width: 980px){.features{grid-template-columns:1fr 1fr}}
@media (max-width: 620px){.features{grid-template-columns:1fr}}
.feature{padding:18px;border-radius:var(–r);border:1px solid var(–line);background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));position:relative;overflow:hidden}
.feature::after{content:””;position:absolute;inset:-2px;background:radial-gradient(circle at var(–x, 30%) var(–y, 20%), rgba(255,255,255,.12), transparent 55%);opacity:.0;transition:.22s ease}
.feature:hover::after{opacity:.9}
.feature h3{margin:0 0 10px;font-size:16px}
.feature p{margin:0;color:var(–muted)}
.icon{width:40px;height:40px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(234,242,255,.14);display:grid;place-items:center;margin-bottom:12px}
.icon svg{width:20px;height:20px}
/* pricing */
.pricing{margin-top:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width: 980px){.pricing{grid-template-columns:1fr}}
.price{padding:20px;border-radius:var(–r);border:1px solid var(–line);background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));position:relative;overflow:hidden}
.price.pop{border-color:rgba(34,197,94,.35)}
.badge{position:absolute;top:14px;right:14px;font-size:12px;color:#081018;background:#22C55E;padding:8px 10px;border-radius:999px;box-shadow:0 16px 45px rgba(34,197,94,.22)}
.price h3{margin:0 0 6px;font-size:18px}
.price .p{color:var(–muted);margin:0 0 14px}
.price .amt{display:flex;align-items:baseline;gap:8px;margin:12px 0 14px}
.price .amt b{font-size:40px;letter-spacing:-.03em}
.price .amt span{color:var(–muted2)}
.ul{margin:0;padding:0;list-style:none;display:grid;gap:10px;color:var(–muted)}
.ul li{display:flex;gap:10px;align-items:flex-start}
.ul svg{width:18px;height:18px;margin-top:2px}
/* testimonials + FAQ */
.split{margin-top:18px;display:grid;grid-template-columns: 1fr 1fr;gap:12px}
@media (max-width: 980px){.split{grid-template-columns:1fr}}
.quote{padding:18px;border-radius:var(–r);border:1px solid var(–line);background:rgba(255,255,255,.04)}
.quote p{margin:0;color:var(–muted)}
.quote b{display:block;margin-top:12px}
.details{border:1px solid var(–line);border-radius:var(–r);background:rgba(255,255,255,.03);overflow:hidden}
.details summary{cursor:pointer;list-style:none;padding:16px 18px;display:flex;justify-content:space-between;gap:10px}
.details summary::-webkit-details-marker{display:none}
.details .ans{padding:0 18px 16px;color:var(–muted)}
.details summary span{color:var(–muted2)}
/* final cta */
.final{margin-top:54px;padding:24px;border-radius:calc(var(–r) + 6px);border:1px solid rgba(234,242,255,.14);background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));position:relative;overflow:hidden}
.final::before{content:””;position:absolute;inset:-60px;background:var(–grad);opacity:.22;filter:blur(18px);animation: floaty 10s ease-in-out infinite}
.final-inner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.final h2{margin:0;font-size:clamp(24px,3vw,38px)}
.final p{margin:8px 0 0;color:var(–muted);max-width:60ch}
/* accessibility */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
html{scroll-behavior:auto}
}
🌿
Local harvest → picked up the way you live
Pick up food where it’s grown .
A weekly box of peak-season produce from nearby farms. Customize in minutes, pick up on your schedule, and taste the difference—without subscriptions that trap you.
Pause anytime
Seasonal & local
Swap items
This week’s box
Freshly curated • customizable • pickup-ready
Updated weekly
Seasonal mix
Always in-season, always nearby.
7–10 items / week
Pickup windows
Short, simple, predictable.
2 days / week
Farm impact
More dollars to growers.
↑ fairer margins
Zero fluff
No stock photos. Just craft.
100% CSS + SVG
How it works
A frictionless loop—from field to pickup—designed for busy schedules.
1) Choose your rhythm
Weekly, biweekly, or whenever. Pause or skip with one tap—no guilt, no calls.
2) Customize the box
Swap items you don’t love. Add eggs, bread, or pantry staples when available.
3) Pick up, eat better
Grab your box at a nearby pickup spot. Fresh meals start feeling effortless.
Built for taste—and time
Awwwards-level polish, but the real flex is how easy it feels to keep going.
“I stopped guessing at grocery produce. Now I cook what’s in season, and it actually tastes like something.”
— A happy pickup regular
“The swap feature is the killer. We never end up with random extras we won’t use.”
— A family of four
Local by default
Shorter supply chains mean fresher food and stronger communities.
Flexible spending
Start small, scale up, or pause. It’s your life—your plan should follow.
Pickup-perfect
Skip delivery fees. Get a dependable window and a quick handoff.
Plans that don’t box you in
Use these as placeholders—swap pricing and plan names anytime.
Starter
For 1–2 people who cook a few nights a week.
$25 / week
7 seasonal items
Swap 2 items
Pause anytime
Most popular
Family
For families and meal-preppers who want reliable variety.
$39 / week
10 seasonal items
Swap 4 items
Priority pickup slot
Chef
For serious cooks chasing peak-season ingredients.
$55 / week
12–14 items
Unlimited swaps
Seasonal add-ons
FAQ
Keep it simple, keep it honest.
Can I skip a week? Yes Yep—skip or pause anytime. Your plan bends around your calendar.
What if I don’t like an item? Swap it Swap within your box window. We keep substitutions seasonally aligned.
Is this a CSA? CSA-inspired It’s the best parts of a CSA—fresh + local—without the rigid commitment.
Where do I pick up? Nearby spots Pickup locations and windows are set at checkout. We prioritize convenience and speed.
Do you deliver? Pickup-first This page is designed for pickup-first. If you add delivery later, we can adapt the layout.
Can you match my brand? Absolutely We can update color tokens, typography, and motion to match your brand system.
Make fresh the default.
Use this page as your high-converting landing. Next step: wire the buttons to your checkout / signup flow.
Tip: If your WordPress editor strips <style> or <svg>, enable unfiltered HTML for admins or move the CSS into Appearance → Customize → Additional CSS. I can do that too.
// subtle spotlight on feature cards (no libs)
(function(){
const cards = document.querySelectorAll(‘.feature’);
const set = (el, e)=>{
const r = el.getBoundingClientRect();
const x = ((e.clientX – r.left) / r.width) * 100;
const y = ((e.clientY – r.top) / r.height) * 100;
el.style.setProperty(‘–x’, x + ‘%’);
el.style.setProperty(‘–y’, y + ‘%’);
};
cards.forEach(el=>{
el.addEventListener(‘pointermove’, e=>set(el,e));
});
})();