1
0
forked from jason/scj
Files
Jason Stedwell cf9f9c5f1a form submission
2026-06-30 22:49:30 -05:00

380 lines
22 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Storm Cloud Jumpers — Captive-Raised Jumping Spiders</title>
<meta name="description" content="Storm Cloud Jumpers — captive-raised Phidippus jumping spiders (otiosus & regius). Healthy body shape, FedEx live-arrival shipping, free starter kit with every purchase. Small size. Big personality." />
<link rel="canonical" href="https://jumpers.stormcloudhills.com/" />
<!-- Open Graph / social -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Storm Cloud Jumpers — Captive-Raised Jumping Spiders" />
<meta property="og:description" content="Captive-raised Phidippus jumpers. Small size. Big personality." />
<meta property="og:image" content="https://jumpers.stormcloudhills.com/assets/brand/social-square.jpg" />
<meta property="og:url" content="https://jumpers.stormcloudhills.com/" />
<meta name="twitter:card" content="summary_large_image" />
<link rel="icon" type="image/jpeg" href="assets/brand/favicon-180.jpg" />
<link rel="apple-touch-icon" href="assets/brand/favicon-180.jpg" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Oswald:wght@500;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="styles.css" />
</head>
<body id="top">
<!-- NAV -->
<header class="nav" id="nav">
<div class="nav__inner">
<a href="#top" class="nav__brand" aria-label="Storm Cloud Jumpers — home">
<img class="nav__logo" src="assets/brand/logo-dark-square.jpg" alt="Storm Cloud Jumpers logo" width="42" height="42" />
<span class="nav__name">Storm Cloud Jumpers<small>Jumping Spiders</small></span>
</a>
<nav class="nav__links" id="navLinks" aria-label="Primary">
<a href="#available">Available</a>
<a href="#mamas">The Mamas</a>
<a href="#care">Care</a>
<a href="#shipping">Shipping</a>
<a href="#about">About</a>
<a href="#contact" class="nav__cta">Inquire</a>
</nav>
<button class="nav__burger" id="burger" aria-label="Toggle menu" aria-expanded="false" aria-controls="navLinks">
<span></span><span></span><span></span>
</button>
</div>
</header>
<!-- HERO -->
<section class="hero">
<div class="hero__bg" aria-hidden="true"></div>
<div class="container hero__grid">
<div class="hero__text">
<h1 class="hero__title">
<span class="t-sub">Captive-Raised Jumping Spiders</span>
<span class="metal">STORM CLOUD JUMPERS</span>
</h1>
<p class="hero__tag">Small Size. <span class="accent">Big Personality.</span></p>
<div class="hero__cta">
<a href="#available" class="btn btn--primary">View Available Spiders</a>
<a href="#care" class="btn btn--ghost">Care Guide</a>
</div>
</div>
<div class="hero__logo-wrap">
<img src="assets/brand/logo-dark-square.jpg" alt="Nimbus, the Storm Cloud Jumpers mascot — a jumping spider crest" width="440" height="440" />
<p class="hero__logo-cap">Meet <b>Nimbus</b> — our mascot</p>
</div>
</div>
<div class="hero__scroll" aria-hidden="true"><span></span><p>SCROLL</p></div>
</section>
<!-- TRUST STRIP -->
<section class="trust">
<div class="container trust__grid">
<div class="trust__item reveal"><div class="ic"></div><h4>Captive Raised</h4><p>From wild-caught mamas — never collected for sale.</p></div>
<div class="trust__item reveal"><div class="ic"></div><h4>Healthy Body Shape</h4><p>Plump, well-fed abdomens on every spider.</p></div>
<div class="trust__item reveal"><div class="ic"></div><h4>Live Arrival</h4><p>Guaranteed on overnight FedEx hub-to-hub.</p></div>
<div class="trust__item reveal"><div class="ic"></div><h4>Free Starter Kit</h4><p>Included free with every spider purchase.</p></div>
</div>
</section>
<!-- AVAILABLE -->
<section class="section" id="available">
<div class="container">
<div class="section__head reveal">
<p class="eyebrow"><span class="dash"></span>Available Now</p>
<h2>Meet the jumpers looking for a home.</h2>
<p class="lede">A small, rotating selection of healthy, captive-raised <em>Phidippus</em> jumpers. See one you like? Reserve it and we'll be in touch.</p>
</div>
<div class="grid spiders__grid">
<!-- Otiosus slings -->
<article class="card reveal">
<div class="card__media">
<img src="assets/spiders/available/otiosus-sling.jpg" alt="Northern canopy jumper sling (Phidippus otiosus)" loading="lazy" />
<span class="badge">Available</span>
</div>
<div class="card__body">
<h3>Northern Canopy Slings</h3>
<p class="card__sci">Phidippus otiosus</p>
<p class="card__desc">Fern's babies — Northern (NC) canopy jumpers, a distinct line from the Florida otiosus. Captive raised, unsexed, and eating <em>hydei</em> fruit flies. Active little characters that love a planted "playground."</p>
<ul class="card__meta">
<li>Instar i56</li><li>Unsexed</li><li>Active</li><li>Healthy body shape</li>
</ul>
<div class="card__foot">
<span class="price">$25<small>+ shipping</small></span>
<a href="#contact" class="btn btn--primary btn--small" data-inquire="Northern Canopy Sling (P. otiosus)">Reserve</a>
</div>
</div>
</article>
<!-- Regius males -->
<article class="card reveal">
<div class="card__media">
<img src="assets/spiders/males/ivan.jpg" alt="Adult male regal jumper (Phidippus regius)" loading="lazy" />
<span class="badge">Available</span>
</div>
<div class="card__body">
<h3>Regal Jumper Males</h3>
<p class="card__sci">Phidippus regius</p>
<p class="card__desc">Our showy boys — <b>Ivan, Gully, Noble, Hexx &amp; Magick</b>. Adult males are bold, dramatic, and love to show off. Captive raised. <span style="color:var(--txt-mute)">(More boys' photos coming soon.)</span></p>
<ul class="card__meta">
<li>Adult male</li><li>Bold &amp; active</li><li>Healthy body shape</li>
</ul>
<div class="card__foot">
<span class="price">$25<small>+ shipping</small></span>
<a href="#contact" class="btn btn--primary btn--small" data-inquire="Regal Jumper Male (P. regius)">Reserve</a>
</div>
</div>
</article>
<!-- Iris -->
<article class="card reveal">
<div class="card__media">
<img src="assets/spiders/females/iris.jpg" alt="Iris — subadult female regal jumper (Phidippus regius)" loading="lazy" />
<span class="badge">Available</span>
</div>
<div class="card__body">
<h3>Iris</h3>
<p class="card__sci">Phidippus regius · subadult female</p>
<p class="card__desc">A young subadult girl. Hasn't been handled much yet, but she's young enough to work with and warm up beautifully. Captive raised, never exposed to a male.</p>
<ul class="card__meta">
<li>Subadult female</li><li>Beginner-friendly</li><li>Healthy body shape</li>
</ul>
<div class="card__foot">
<span class="price">$50<small>+ shipping</small></span>
<a href="#contact" class="btn btn--primary btn--small" data-inquire="Iris — subadult female P. regius">Reserve</a>
</div>
</div>
</article>
<!-- Mango -->
<article class="card reveal">
<div class="card__media">
<img src="assets/spiders/females/mango.jpg" alt="Mango — subadult female regal jumper (Phidippus regius)" loading="lazy" />
<span class="badge">Available</span>
</div>
<div class="card__body">
<h3>Mango</h3>
<p class="card__sci">Phidippus regius · subadult female</p>
<p class="card__desc">Super friendly and a lovely handler. Mango is a confident subadult girl with gorgeous coloration. Captive raised, never exposed to a male.</p>
<ul class="card__meta">
<li>Subadult female</li><li>Handles well</li><li>Healthy body shape</li>
</ul>
<div class="card__foot">
<span class="price">$50<small>+ shipping</small></span>
<a href="#contact" class="btn btn--primary btn--small" data-inquire="Mango — subadult female P. regius">Reserve</a>
</div>
</div>
</article>
</div>
<!-- Starter kit -->
<div class="starter reveal">
<span class="tag">Free Gift</span>
<p><b>Every spider comes with a free Starter Kit</b> — a misting bottle, a soft paintbrush, and easy notes on molting &amp; instars to get you started right.</p>
</div>
<p class="note-line reveal">Coming soon: <em>Paraphidippus fartilis</em>. Ask us to join the waitlist.</p>
</div>
</section>
<!-- MEET THE MAMAS -->
<section class="section section--alt" id="mamas">
<div class="container">
<div class="section__head reveal">
<p class="eyebrow"><span class="dash"></span>Meet the Mamas</p>
<h2>The mothers behind every sling.</h2>
<p class="lede">Our mamas are wild-caught females who breed just once, then spend their short lives raising babies. That's why every baby we offer is <b>captive raised</b>. These girls aren't for sale — but we're proud to introduce them.</p>
</div>
<div class="grid mamas__grid">
<figure class="mama reveal"><img src="assets/spiders/mamas/fern.jpg" alt="Fern, a Phidippus otiosus female" loading="lazy"><figcaption class="mama__cap"><b>Fern</b><span>P. otiosus</span></figcaption></figure>
<figure class="mama reveal"><img src="assets/spiders/mamas/cleo.jpg" alt="Cleo, a Phidippus audax female" loading="lazy"><figcaption class="mama__cap"><b>Cleo</b><span>P. audax</span></figcaption></figure>
<figure class="mama reveal"><img src="assets/spiders/mamas/colette.jpg" alt="Colette, a Phidippus regius female" loading="lazy"><figcaption class="mama__cap"><b>Colette</b><span>P. regius</span></figcaption></figure>
<figure class="mama reveal"><img src="assets/spiders/mamas/demure.jpg" alt="Demure, a Phidippus regius female" loading="lazy"><figcaption class="mama__cap"><b>Demure</b><span>P. regius</span></figcaption></figure>
<figure class="mama reveal"><img src="assets/spiders/mamas/devine.jpg" alt="Devine, a Phidippus regius female" loading="lazy"><figcaption class="mama__cap"><b>Devine</b><span>P. regius</span></figcaption></figure>
<figure class="mama reveal"><img src="assets/spiders/mamas/delight.jpg" alt="Delight, a Phidippus regius female" loading="lazy"><figcaption class="mama__cap"><b>Delight</b><span>P. regius</span></figcaption></figure>
<figure class="mama reveal"><img src="assets/spiders/mamas/dove.jpg" alt="Dove, a Phidippus regius female" loading="lazy"><figcaption class="mama__cap"><b>Dove</b><span>P. regius</span></figcaption></figure>
<figure class="mama reveal"><img src="assets/spiders/mamas/inca.jpg" alt="Inca, a Phidippus regius female" loading="lazy"><figcaption class="mama__cap"><b>Inca</b><span>P. regius</span></figcaption></figure>
<figure class="mama reveal"><img src="assets/spiders/mamas/latte.jpg" alt="Latte, a Phidippus regius female" loading="lazy"><figcaption class="mama__cap"><b>Latte</b><span>P. regius</span></figcaption></figure>
<figure class="mama reveal"><img src="assets/spiders/mamas/lush.jpg" alt="Lush, a Phidippus regius female" loading="lazy"><figcaption class="mama__cap"><b>Lush</b><span>P. regius</span></figcaption></figure>
</div>
</div>
</section>
<!-- CARE -->
<section class="section" id="care">
<div class="container">
<div class="section__head reveal">
<p class="eyebrow"><span class="dash"></span>Care Guide</p>
<h2>Simple care for a happy jumper.</h2>
<p class="lede">Jumping spiders are some of the most rewarding inverts to keep. Here's the short version — a full printable care sheet is one scan away.</p>
</div>
<div class="grid care__grid">
<div class="care__card reveal">
<div class="care__num">01</div>
<h3>Enclosure</h3>
<p>Go vertical and well-ventilated. Slings (i36) do great in a 3×3&quot; cube; adults enjoy a roomy front-opening enclosure with cork bark, fake leaves and a hammock up top. Give them a "playground" — they love to climb and explore.</p>
</div>
<div class="care__card reveal">
<div class="care__num">02</div>
<h3>Substrate &amp; Falls</h3>
<p>Line the floor with soft <b>sphagnum moss</b> (or another reptile-safe moss). It holds a little humidity and gives a soft landing in case your jumper takes a tumble.</p>
</div>
<div class="care__card reveal">
<div class="care__num">03</div>
<h3>Temperature &amp; Humidity</h3>
<p>Room temperature (7282°F) suits most homes. Keep humidity moderate — mist one side a few times a week, never soak. Bump humidity a little higher around molts.</p>
</div>
<div class="care__card reveal">
<div class="care__num">04</div>
<h3>Feeding</h3>
<p>Slings love <em>hydei</em> fruit flies. <b>Peanut beetle larvae (PBL)</b> are a newer, excellent feeder. Larger jumpers take appropriately sized crickets or BSFL. Offer a fresh feeder every few days.</p>
</div>
<div class="care__card reveal">
<div class="care__num">05</div>
<h3>Molting</h3>
<p>Molts are critical at <b>i5 and i7</b> — raise humidity a touch and do not disturb. Your jumper will seal into its hammock and fast. This is normal. Never pull them out.</p>
</div>
<div class="care__card reveal">
<div class="care__num">06</div>
<h3>After a Molt</h3>
<p>Wait a few days after your jumper leaves its hammock before feeding — their fangs need to harden first. Then resume normal feeding and enjoy their fresh new colors.</p>
</div>
</div>
<div class="care__qr reveal">
<img src="assets/care/care-qr.png" alt="QR code linking to the printable Storm Cloud Jumpers care sheet" width="128" height="128" />
<div class="t">
<h3>Printable Care Sheet</h3>
<p>Scan the code or <a href="care-sheet.html" class="accent" style="text-decoration:underline">open the care sheet</a> to print or save the full guide for your new jumper.</p>
</div>
</div>
</div>
</section>
<!-- SHIPPING -->
<section class="section shipping" id="shipping">
<div class="shipping__bg" aria-hidden="true"></div>
<div class="container">
<div class="section__head reveal">
<p class="eyebrow eyebrow--light"><span class="dash"></span>Shipping &amp; Live Arrival</p>
<h2 class="metal">Packed warm. Tracked all the way.</h2>
<p class="lede">We ship carefully and only when the weather is safe for your spider.</p>
</div>
<div class="grid ship__grid">
<div class="ship__card reveal">
<h4><span class="ic"></span> FedEx Only</h4>
<p>FedEx is the only carrier we use — it's the only legal option for shipping spiders. We do <b>not</b> ship UPS or USPS.</p>
</div>
<div class="ship__card reveal">
<h4><span class="ic"></span> Ships MonWed</h4>
<p>Orders go out early in the week so your jumper is never sitting in a facility over a weekend.</p>
</div>
<div class="ship__card reveal">
<h4><span class="ic"></span> Overnight, Hub-to-Hub</h4>
<p>Overnight FedEx to your local hub ships in a live-arrivalcovered box. <span class="ship__flag">Guaranteed alive</span></p>
</div>
<div class="ship__card reveal">
<h4><span class="ic"></span> 2-Day to Your Door</h4>
<p>A lower-cost option offered in mild spring &amp; fall weather. <span class="ship__flag">Not covered by the live guarantee</span></p>
</div>
</div>
<div style="text-align:center"><span class="callout reveal">Weather-appropriate heat or cool packs are always included, free.</span></div>
</div>
</section>
<!-- ABOUT -->
<section class="section section--alt" id="about">
<div class="container about__grid">
<div class="about__text reveal">
<p class="eyebrow"><span class="dash"></span>About Us</p>
<h2>A small keeper who loves these little jumpers.</h2>
<p class="lede">Storm Cloud Jumpers is a tiny, hands-on operation. Our mamas are wild-caught <em>Phidippus</em> who breed a single time and then spend their short lives as devoted mothers — so every baby we place is truly <b>captive raised</b>.</p>
<p>We raise each sling by hand, feed them well, and only send jumpers with a healthy body shape out the door. Big breeders charge a premium — we'd rather keep these charming spiders affordable and get them into caring homes.</p>
<ul class="bullets">
<li><b>Captive raised</b>, never wild-collected for sale.</li>
<li><b>Honest descriptions</b> — real photos of the actual lines.</li>
<li><b>Hobbyist-first</b> — real answers to your questions.</li>
<li><b>Free starter kit</b> with every spider.</li>
</ul>
</div>
<div class="about__visual reveal">
<img src="assets/brand/nimbus-poster.jpg" alt="Meet Nimbus — the face of Storm Cloud Jumpers" width="560" height="700" loading="lazy" />
</div>
</div>
</section>
<!-- CONTACT -->
<section class="section" id="contact">
<div class="container contact__grid">
<div class="contact__text reveal">
<p class="eyebrow"><span class="dash"></span>Reserve or Ask</p>
<h2>Ready to bring home a jumper?</h2>
<p class="lede">Tell us what you're looking for and we'll match you with a healthy, captive-raised spider and sort out shipping to you.</p>
<ul class="contact__list">
<li><span class="ic" aria-hidden="true"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m2 7 10 6 10-6"/></svg></span> <a href="mailto:stormcloudjumpers@gmail.com">stormcloudjumpers@gmail.com</a></li>
<li><span class="ic" aria-hidden="true"><svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M22 12a10 10 0 1 0-11.56 9.88v-6.99H7.9V12h2.54V9.8c0-2.5 1.49-3.89 3.77-3.89 1.09 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56V12h2.78l-.44 2.89h-2.34v6.99A10 10 0 0 0 22 12Z"/></svg></span> <a href="https://www.facebook.com/61591317309985/" target="_blank" rel="noopener">Facebook — Storm Cloud Jumpers</a></li>
<li><span class="ic"></span> All sales &amp; inquiries handled right here.</li>
</ul>
</div>
<form class="form reveal" id="inquiryForm" novalidate>
<label>Your Name
<input type="text" name="name" required autocomplete="name" />
</label>
<label>Your Email
<input type="email" name="email" required autocomplete="email" />
</label>
<label>Which spider? (optional)
<input type="text" name="spider" id="spiderField" placeholder="e.g. Mango, or Northern Canopy sling" />
</label>
<label>Your Message
<textarea name="message" rows="4" placeholder="Species, age, color preference, shipping questions…"></textarea>
</label>
<button type="submit" class="btn btn--primary btn--block">Send Inquiry</button>
<p class="form__note">Your message goes straight to our inbox — we'll reply within a day or two. Prefer to email directly? Write to <a href="mailto:stormcloudjumpers@gmail.com" class="accent">stormcloudjumpers@gmail.com</a>.</p>
<p class="form__msg form__msg--ok" id="formOk" hidden>Thanks! Your message is ready to send — we'll reply within a day or two.</p>
</form>
</div>
</section>
<!-- FOOTER -->
<footer class="footer">
<div class="container footer__inner">
<div class="footer__brand">
<img src="assets/brand/logo-dark-square.jpg" alt="Storm Cloud Jumpers logo" width="50" height="50" />
<p class="footer__name">Storm Cloud Jumpers<small>Small Size · Big Personality</small></p>
</div>
<nav class="footer__links" aria-label="Footer">
<a href="#available">Available</a>
<a href="#mamas">The Mamas</a>
<a href="#care">Care</a>
<a href="#shipping">Shipping</a>
<a href="#about">About</a>
<a href="#contact">Inquire</a>
<a class="footer__social" href="https://www.facebook.com/61591317309985/" target="_blank" rel="noopener"><svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor" aria-hidden="true"><path d="M22 12a10 10 0 1 0-11.56 9.88v-6.99H7.9V12h2.54V9.8c0-2.5 1.49-3.89 3.77-3.89 1.09 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56V12h2.78l-.44 2.89h-2.34v6.99A10 10 0 0 0 22 12Z"/></svg> Facebook</a>
</nav>
<p class="footer__copy">© <span id="year"></span> Storm Cloud Jumpers · jumpers.stormcloudhills.com · Captive-raised jumping spiders.</p>
</div>
</footer>
<!-- LIGHTBOX -->
<div class="lightbox" id="lightbox" role="dialog" aria-modal="true" aria-label="Enlarged photo" hidden>
<button class="lightbox__close" id="lightboxClose" aria-label="Close">&times;</button>
<figure class="lightbox__figure">
<img class="lightbox__img" id="lightboxImg" src="" alt="" />
<figcaption class="lightbox__cap" id="lightboxCap"></figcaption>
</figure>
</div>
<script src="script.js"></script>
</body>
</html>