initial build
This commit is contained in:
Jason Stedwell
Vendored
BIN
Binary file not shown.
@@ -0,0 +1,43 @@
|
||||
# Storm Cloud Jumpers — website
|
||||
|
||||
Static website for **jumpers.stormcloudhills.com**. Plain HTML/CSS/JS — no build step, no framework. Just upload the contents of this `scj/` folder to the web host.
|
||||
|
||||
## Files
|
||||
|
||||
| File | What it is |
|
||||
|------|-----------|
|
||||
| `index.html` | The main one-page site (hero, available, mamas, care, shipping, about, contact). |
|
||||
| `care-sheet.html` | Print-friendly care sheet. This is what the QR code points to. |
|
||||
| `styles.css` | All styling (dark storm palette, red accent). |
|
||||
| `script.js` | Nav, scroll animations, and the inquiry form. **Edit `FORM_ENDPOINT` here to enable Gmail delivery — see below.** |
|
||||
| `form-handler.gs` | Google Apps Script that emails form submissions from the shop's own Gmail. Setup steps are inside the file. |
|
||||
| `assets/brand/` | Logo, mascot (Nimbus) and hero graphics. |
|
||||
| `assets/spiders/` | Photos: `available/`, `males/`, `females/`, `mamas/`. |
|
||||
| `assets/care/` | Care-sheet QR code (`care-qr.png` / `.svg`). |
|
||||
|
||||
## Deploying
|
||||
|
||||
It's a static site — upload everything in `scj/` to the document root for the `jumpers.stormcloudhills.com` subdomain (via the host's file manager, FTP, Netlify, Cloudflare Pages, GitHub Pages, etc.). No server or database needed. Keep the `assets/` folder alongside the HTML files.
|
||||
|
||||
## The inquiry form (two modes)
|
||||
|
||||
1. **Now — `mailto:` (zero setup).** Submitting the form opens the visitor's email app with a pre-filled message to `stormcloudjumpers@gmail.com`. Works out of the box.
|
||||
2. **Upgrade — send via Gmail, no email app needed.** Deploy `form-handler.gs` as a Google Apps Script web app (5-minute steps are in that file), copy the resulting `/exec` URL, and paste it into `FORM_ENDPOINT` near the top of `script.js`. The form will then email submissions straight to the inbox and fall back to `mailto:` only if the request fails.
|
||||
|
||||
## Updating content (common edits)
|
||||
|
||||
All in `index.html`:
|
||||
|
||||
- **Prices / availability:** find the spider's `<article class="card">` block. Change the `<span class="price">` amount, or the `<span class="badge">Available</span>` text (e.g. to `Reserved` / `Sold`). Add `badge--soft` to the class for a muted badge.
|
||||
- **Add / swap a photo:** drop the new image in the right `assets/spiders/...` folder and update the `<img src="...">`. Keep images web-sized (~1000px wide, JPEG) so pages stay fast.
|
||||
- **Add a spider:** copy an existing `<article class="card">…</article>` block and edit the text, image, price, and the `data-inquire="..."` label (that label pre-fills the "Which spider?" field when someone clicks Reserve).
|
||||
- **Care sheet text:** edit `care-sheet.html` (and the matching cards in the Care section of `index.html`).
|
||||
|
||||
## To do (waiting on Mom)
|
||||
|
||||
- **Photos of the new boys:** Gully, Noble, Hexx & Magick. Right now the "Regal Jumper Males" card shows Ivan and names all five. Add their photos when available. (Nashville has passed away and is not listed.)
|
||||
- Optional: confirm the **Paraphidippus fartilis** waitlist note and update when they're available.
|
||||
|
||||
## Credits
|
||||
|
||||
Brand mascot: **Nimbus**. Palette: storm-black + red. Fonts: Oswald + Inter (loaded from Google Fonts).
|
||||
Vendored
BIN
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 217 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 245 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 222 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 182 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 226 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 468 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 516 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 284 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 292 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 847 B |
@@ -0,0 +1,2 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="360" height="360" class="segno"><g transform="scale(8)"><path fill="#fff" d="M0 0h45v45h-45z"/><path class="qrline" stroke="#0a0a0a" d="M2 2.5h7m1 0h3m3 0h1m1 0h4m2 0h3m1 0h2m1 0h1m1 0h1m2 0h7m-41 1h1m5 0h1m1 0h2m2 0h2m3 0h2m1 0h1m1 0h2m3 0h2m1 0h1m1 0h1m1 0h1m5 0h1m-41 1h1m1 0h3m1 0h1m2 0h2m1 0h2m6 0h5m1 0h1m1 0h1m1 0h1m3 0h1m1 0h3m1 0h1m-41 1h1m1 0h3m1 0h1m1 0h2m2 0h2m1 0h1m1 0h1m1 0h1m1 0h1m2 0h2m3 0h3m2 0h1m1 0h3m1 0h1m-41 1h1m1 0h3m1 0h1m1 0h1m2 0h1m1 0h2m3 0h2m2 0h2m1 0h1m1 0h4m3 0h1m1 0h3m1 0h1m-41 1h1m5 0h1m1 0h1m1 0h1m5 0h1m3 0h1m1 0h1m3 0h4m1 0h2m1 0h1m5 0h1m-41 1h7m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h7m-32 1h1m1 0h5m1 0h1m1 0h1m1 0h1m1 0h1m2 0h4m2 0h1m-30 1h1m2 0h1m2 0h1m3 0h2m1 0h2m1 0h2m2 0h3m1 0h1m3 0h1m3 0h3m1 0h2m-40 1h3m1 0h1m1 0h2m3 0h3m1 0h1m1 0h2m2 0h3m1 0h1m1 0h1m1 0h1m1 0h3m2 0h2m1 0h1m-37 1h3m1 0h1m3 0h4m1 0h3m3 0h2m3 0h2m1 0h1m1 0h1m1 0h1m1 0h3m-38 1h3m3 0h1m2 0h1m4 0h1m3 0h1m1 0h1m1 0h2m1 0h2m1 0h1m2 0h1m1 0h2m1 0h1m-39 1h1m2 0h1m1 0h2m1 0h2m1 0h1m1 0h1m3 0h1m1 0h4m1 0h3m1 0h2m1 0h5m1 0h1m1 0h2m-41 1h1m1 0h1m5 0h1m2 0h4m1 0h3m2 0h4m1 0h2m1 0h2m2 0h1m3 0h2m-35 1h5m1 0h2m1 0h1m5 0h1m1 0h2m1 0h5m1 0h1m3 0h1m3 0h3m-41 1h1m1 0h1m4 0h3m1 0h2m1 0h1m3 0h2m8 0h2m1 0h1m2 0h1m1 0h1m2 0h1m-40 1h1m1 0h5m3 0h1m1 0h2m2 0h1m2 0h1m1 0h1m1 0h1m2 0h2m1 0h1m1 0h2m2 0h1m3 0h2m-41 1h3m1 0h2m2 0h2m2 0h5m2 0h1m1 0h1m3 0h1m2 0h1m5 0h2m1 0h4m-41 1h2m2 0h1m1 0h4m2 0h3m1 0h1m1 0h1m1 0h5m5 0h1m3 0h1m1 0h2m2 0h1m-41 1h2m2 0h2m1 0h1m1 0h1m2 0h2m5 0h1m1 0h4m3 0h4m1 0h1m1 0h1m-36 1h4m2 0h3m2 0h1m1 0h4m1 0h1m2 0h1m1 0h1m2 0h1m1 0h3m2 0h2m3 0h1m1 0h1m-41 1h1m1 0h2m4 0h1m1 0h1m1 0h1m2 0h1m3 0h2m3 0h1m3 0h3m1 0h3m4 0h2m-40 1h1m4 0h1m4 0h1m2 0h1m1 0h4m1 0h1m1 0h1m1 0h2m4 0h1m1 0h2m1 0h4m-39 1h1m1 0h1m3 0h1m2 0h1m2 0h1m2 0h1m1 0h4m2 0h1m2 0h1m2 0h1m1 0h1m3 0h3m1 0h1m-35 1h1m1 0h2m1 0h1m4 0h2m4 0h1m2 0h1m1 0h3m2 0h1m1 0h1m5 0h1m-41 1h1m1 0h1m1 0h2m2 0h2m1 0h1m1 0h1m3 0h4m1 0h1m1 0h1m4 0h1m1 0h1m1 0h1m3 0h1m1 0h1m-37 1h2m1 0h1m1 0h1m4 0h4m2 0h1m1 0h4m1 0h1m1 0h2m2 0h2m5 0h2m-41 1h1m6 0h2m1 0h3m2 0h2m2 0h1m2 0h1m4 0h1m1 0h2m1 0h1m2 0h1m-36 1h1m1 0h3m1 0h1m1 0h2m3 0h4m1 0h3m2 0h1m2 0h1m1 0h2m2 0h2m5 0h1m-39 1h1m1 0h2m2 0h1m2 0h2m2 0h1m2 0h4m2 0h1m3 0h1m3 0h5m1 0h4m-41 1h1m1 0h1m2 0h3m1 0h1m1 0h2m3 0h4m1 0h4m7 0h1m3 0h2m1 0h2m-37 1h1m5 0h2m3 0h1m1 0h1m4 0h1m4 0h4m1 0h2m3 0h1m1 0h2m-41 1h1m1 0h7m3 0h4m2 0h2m1 0h4m1 0h1m3 0h10m-32 1h3m2 0h3m1 0h1m2 0h1m2 0h3m2 0h1m2 0h2m3 0h1m1 0h1m1 0h1m-41 1h7m2 0h1m1 0h3m1 0h1m2 0h1m1 0h3m2 0h2m1 0h2m2 0h1m1 0h1m1 0h2m1 0h1m-40 1h1m5 0h1m2 0h3m1 0h1m5 0h1m3 0h2m2 0h3m2 0h1m3 0h1m1 0h3m-41 1h1m1 0h3m1 0h1m4 0h1m2 0h1m1 0h2m2 0h3m3 0h3m3 0h5m3 0h1m-41 1h1m1 0h3m1 0h1m1 0h3m3 0h5m4 0h1m1 0h1m5 0h4m1 0h3m-39 1h1m1 0h3m1 0h1m7 0h1m2 0h1m1 0h2m3 0h1m1 0h1m1 0h2m1 0h2m3 0h1m1 0h1m1 0h1m-41 1h1m5 0h1m3 0h1m3 0h2m3 0h1m2 0h1m1 0h1m1 0h7m1 0h2m3 0h1m-40 1h7m2 0h2m2 0h2m1 0h6m1 0h1m4 0h2m2 0h2m1 0h3m1 0h1"/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 212 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 148 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 238 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 674 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 631 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 439 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 857 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 292 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 749 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 732 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 780 KiB |
@@ -0,0 +1,107 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Jumping Spider Care Sheet — Storm Cloud Jumpers</title>
|
||||
<meta name="description" content="Printable care sheet for captive-raised Phidippus jumping spiders from Storm Cloud Jumpers." />
|
||||
<link rel="icon" type="image/jpeg" 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&family=Oswald:wght@600;700&display=swap" rel="stylesheet" />
|
||||
<style>
|
||||
:root{ --red:#e02828; --ink:#141414; --soft:#444; --line:#e2e2e2; }
|
||||
*{ box-sizing:border-box; }
|
||||
body{ margin:0; font-family:'Inter',system-ui,sans-serif; color:var(--ink); background:#f4f4f5; line-height:1.6; }
|
||||
.sheet{ max-width:820px; margin:24px auto; background:#fff; box-shadow:0 10px 40px rgba(0,0,0,.12); }
|
||||
.top{ background:#0a0a0a; color:#fff; padding:26px 34px; display:flex; align-items:center; gap:18px; }
|
||||
.top img{ width:64px; height:64px; border-radius:10px; }
|
||||
.top h1{ font-family:'Oswald',sans-serif; font-size:1.7rem; letter-spacing:.03em; margin:0; text-transform:uppercase; }
|
||||
.top p{ margin:4px 0 0; color:#c9ccd3; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; }
|
||||
.body{ padding:30px 34px 12px; }
|
||||
.intro{ color:var(--soft); border-left:3px solid var(--red); padding-left:16px; margin:0 0 26px; }
|
||||
h2{ font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.03em; font-size:1.15rem; margin:26px 0 8px; color:#000; border-bottom:2px solid var(--line); padding-bottom:6px; }
|
||||
h2 .n{ color:var(--red); margin-right:8px; }
|
||||
p{ margin:0 0 12px; }
|
||||
ul{ margin:0 0 12px; padding-left:20px; }
|
||||
li{ margin-bottom:5px; }
|
||||
.quick{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px 26px; background:#faf6f6; border:1px solid #f0dede; border-radius:12px; padding:18px 22px; margin:0 0 24px; }
|
||||
.quick div{ font-size:.92rem; }
|
||||
.quick b{ color:var(--red); display:block; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; }
|
||||
.foot{ padding:18px 34px 30px; border-top:1px solid var(--line); color:var(--soft); font-size:.85rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }
|
||||
.foot a{ color:var(--red); }
|
||||
.actions{ max-width:820px; margin:0 auto 40px; text-align:center; }
|
||||
.btn{ display:inline-block; background:var(--red); color:#fff; border:0; font:600 .85rem/1 'Inter',sans-serif; letter-spacing:.08em; text-transform:uppercase; padding:13px 26px; border-radius:999px; cursor:pointer; text-decoration:none; }
|
||||
.back{ display:inline-block; margin-left:12px; color:#555; font-size:.85rem; }
|
||||
@media print{
|
||||
body{ background:#fff; }
|
||||
.sheet{ box-shadow:none; margin:0; max-width:none; }
|
||||
.actions{ display:none; }
|
||||
.top{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<article class="sheet">
|
||||
<header class="top">
|
||||
<img src="assets/brand/logo-white.jpg" alt="Storm Cloud Jumpers" />
|
||||
<div>
|
||||
<h1>Jumping Spider Care Sheet</h1>
|
||||
<p>Storm Cloud Jumpers · Small Size · Big Personality</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="body">
|
||||
<p class="intro">Congratulations on your new captive-raised jumper! <em>Phidippus</em> jumping spiders are curious, personable, and easy to care for. Here's everything you need to keep yours thriving.</p>
|
||||
|
||||
<div class="quick">
|
||||
<div><b>Temperature</b> 72–82°F (room temp)</div>
|
||||
<div><b>Humidity</b> Moderate; higher around molts</div>
|
||||
<div><b>Enclosure</b> Vertical & well-ventilated</div>
|
||||
<div><b>Slings (i3–6)</b> A 3×3" cube is perfect</div>
|
||||
<div><b>Feeders</b> Hydei fruit flies, PBL, crickets, BSFL</div>
|
||||
<div><b>Critical molts</b> i5 & i7 — extra humidity</div>
|
||||
</div>
|
||||
|
||||
<h2><span class="n">1.</span>Enclosure & Playground</h2>
|
||||
<p>Jumpers are climbers — go <b>vertical</b> and well-ventilated. Slings (instar 3–6) are happy in a small 3×3" cube; adults enjoy a roomy front-opening enclosure. Decorate it like a little playground: cork bark, fake or live foliage, and a cozy spot up high where they'll build a silk hammock.</p>
|
||||
|
||||
<h2><span class="n">2.</span>Substrate & Soft Landings</h2>
|
||||
<p>Line the floor with soft <b>sphagnum moss</b> or another reptile-safe moss. It holds a bit of humidity and cushions your jumper if it ever takes a fall.</p>
|
||||
|
||||
<h2><span class="n">3.</span>Temperature & Humidity</h2>
|
||||
<p>Normal room temperature (72–82°F) is ideal — no special heating for most homes. Keep humidity moderate: mist <b>one side</b> of the enclosure a few times a week so there's always a dry side too. Never soak it, and always keep good airflow. Nudge humidity up slightly when a molt is near.</p>
|
||||
|
||||
<h2><span class="n">4.</span>Feeding</h2>
|
||||
<ul>
|
||||
<li><b>Slings:</b> <em>hydei</em> fruit flies, offered every 2–3 days.</li>
|
||||
<li><b>Peanut beetle larvae (PBL):</b> a newer, excellent feeder — highly recommended.</li>
|
||||
<li><b>Larger jumpers:</b> appropriately sized crickets or black soldier fly larvae (BSFL) every few days.</li>
|
||||
<li>Remove any uneaten prey so it can't stress or nip your spider.</li>
|
||||
</ul>
|
||||
|
||||
<h2><span class="n">5.</span>Molting — the Important Part</h2>
|
||||
<p>Molts are how your jumper grows, and they're most delicate at <b>instar 5 and instar 7</b>. Around these times:</p>
|
||||
<ul>
|
||||
<li>Raise humidity a little.</li>
|
||||
<li>Your jumper will seal itself into its hammock and stop eating — <b>this is normal.</b></li>
|
||||
<li><b>Do not disturb or try to remove it.</b> Molting is fragile.</li>
|
||||
<li>After it emerges, <b>wait a few days before feeding</b> so its new fangs can harden. Then resume feeding.</li>
|
||||
</ul>
|
||||
|
||||
<h2><span class="n">6.</span>Handling</h2>
|
||||
<p>Jumpers are famously personable. Handle low and slow, over a soft surface, and always let them come to you. Never handle a spider that's in pre-molt or hiding in its hammock.</p>
|
||||
</div>
|
||||
|
||||
<footer class="foot">
|
||||
<span>Questions? <a href="mailto:stormcloudjumpers@gmail.com">stormcloudjumpers@gmail.com</a></span>
|
||||
<span><a href="https://jumpers.stormcloudhills.com">jumpers.stormcloudhills.com</a> · <a href="https://www.facebook.com/61591317309985/">Facebook</a></span>
|
||||
</footer>
|
||||
</article>
|
||||
|
||||
<div class="actions">
|
||||
<button class="btn" onclick="window.print()">Print / Save as PDF</button>
|
||||
<a class="back" href="index.html">← Back to site</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,61 @@
|
||||
/**
|
||||
* Storm Cloud Jumpers — inquiry form handler (Google Apps Script)
|
||||
* ------------------------------------------------------------------
|
||||
* This sends inquiry-form submissions to the shop's Gmail using the
|
||||
* shop's OWN Google account — no third-party form service, no cost.
|
||||
*
|
||||
* ONE-TIME SETUP (about 5 minutes):
|
||||
* 1. Sign in to the Gmail account that should RECEIVE inquiries
|
||||
* (stormcloudjumpers@gmail.com).
|
||||
* 2. Go to https://script.google.com → New project.
|
||||
* 3. Delete the sample code, paste THIS whole file in, and Save.
|
||||
* 4. Click "Deploy" → "New deployment".
|
||||
* - Type: Web app
|
||||
* - Description: SCJ inquiry form
|
||||
* - Execute as: Me
|
||||
* - Who has access: Anyone
|
||||
* Click Deploy and authorize when prompted.
|
||||
* 5. Copy the Web app URL (ends in /exec).
|
||||
* 6. Open scj/script.js and paste that URL into FORM_ENDPOINT.
|
||||
*
|
||||
* That's it — the website form will then email submissions straight
|
||||
* to the inbox. (Until FORM_ENDPOINT is set, the form falls back to
|
||||
* opening the visitor's own email app, which also works fine.)
|
||||
*/
|
||||
|
||||
// Where inquiries are delivered:
|
||||
var TO_ADDRESS = 'stormcloudjumpers@gmail.com';
|
||||
|
||||
function doPost(e) {
|
||||
try {
|
||||
var p = (e && e.parameter) ? e.parameter : {};
|
||||
var name = (p.name || 'Someone').toString().slice(0, 200);
|
||||
var email = (p.email || '(no email)').toString().slice(0, 200);
|
||||
var spider = (p.spider || '(not specified)').toString().slice(0, 200);
|
||||
var message = (p.message || '(no message)').toString().slice(0, 5000);
|
||||
|
||||
var subject = 'Spider Inquiry — ' + spider + ' (' + name + ')';
|
||||
var body =
|
||||
'New inquiry from the Storm Cloud Jumpers website:\n\n' +
|
||||
'Name: ' + name + '\n' +
|
||||
'Email: ' + email + '\n' +
|
||||
'Spider of interest: ' + spider + '\n\n' +
|
||||
'Message:\n' + message + '\n\n' +
|
||||
'— Reply directly to this email to reach the buyer.';
|
||||
|
||||
GmailApp.sendEmail(TO_ADDRESS, subject, body, { replyTo: email, name: 'SCJ Website' });
|
||||
|
||||
return ContentService
|
||||
.createTextOutput(JSON.stringify({ ok: true }))
|
||||
.setMimeType(ContentService.MimeType.JSON);
|
||||
} catch (err) {
|
||||
return ContentService
|
||||
.createTextOutput(JSON.stringify({ ok: false, error: String(err) }))
|
||||
.setMimeType(ContentService.MimeType.JSON);
|
||||
}
|
||||
}
|
||||
|
||||
// Simple health check when the URL is opened in a browser.
|
||||
function doGet() {
|
||||
return ContentService.createTextOutput('Storm Cloud Jumpers form handler is running.');
|
||||
}
|
||||
+379
@@ -0,0 +1,379 @@
|
||||
<!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 i5–6</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 & 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 & 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 & 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 (i3–6) do great in a 3×3" 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 & 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 & Humidity</h3>
|
||||
<p>Room temperature (72–82°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 & 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 Mon–Wed</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-arrival–covered 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 & 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 & 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">Sending opens your email app addressed to Storm Cloud Jumpers. 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">×</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>
|
||||
+209
@@ -0,0 +1,209 @@
|
||||
/* ============================================================
|
||||
Storm Cloud Jumpers — site interactions
|
||||
============================================================ */
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
/* ----------------------------------------------------------
|
||||
FORM DELIVERY CONFIG
|
||||
------------------------------------------------------------
|
||||
By default the inquiry form opens the visitor's email app
|
||||
addressed to Storm Cloud Jumpers (mailto:). No server needed.
|
||||
|
||||
To have submissions land straight in the Gmail inbox WITHOUT
|
||||
the visitor needing a mail app, deploy the included
|
||||
`form-handler.gs` as a Google Apps Script web app (it sends
|
||||
from the shop's own Gmail) and paste its /exec URL below.
|
||||
When FORM_ENDPOINT is set, the form POSTs to it and falls
|
||||
back to mailto only if the request fails.
|
||||
---------------------------------------------------------- */
|
||||
var CONTACT_EMAIL = 'stormcloudjumpers@gmail.com';
|
||||
var FORM_ENDPOINT = ''; // e.g. 'https://script.google.com/macros/s/XXXX/exec'
|
||||
|
||||
var $ = function (s, c) { return (c || document).querySelector(s); };
|
||||
var $$ = function (s, c) { return Array.prototype.slice.call((c || document).querySelectorAll(s)); };
|
||||
|
||||
/* ---------- Sticky nav shadow ---------- */
|
||||
var nav = $('#nav');
|
||||
var onScroll = function () {
|
||||
if (nav) nav.classList.toggle('scrolled', window.scrollY > 12);
|
||||
};
|
||||
onScroll();
|
||||
window.addEventListener('scroll', onScroll, { passive: true });
|
||||
|
||||
/* ---------- Mobile menu ---------- */
|
||||
var burger = $('#burger');
|
||||
var links = $('#navLinks');
|
||||
var closeMenu = function () {
|
||||
if (!links) return;
|
||||
links.classList.remove('open');
|
||||
nav.classList.remove('menu-open');
|
||||
burger.setAttribute('aria-expanded', 'false');
|
||||
};
|
||||
if (burger && links) {
|
||||
burger.addEventListener('click', function () {
|
||||
var open = links.classList.toggle('open');
|
||||
nav.classList.toggle('menu-open', open);
|
||||
burger.setAttribute('aria-expanded', String(open));
|
||||
});
|
||||
$$('a', links).forEach(function (a) { a.addEventListener('click', closeMenu); });
|
||||
document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closeMenu(); });
|
||||
}
|
||||
|
||||
/* ---------- Reveal on scroll ---------- */
|
||||
var reveals = $$('.reveal');
|
||||
if ('IntersectionObserver' in window && reveals.length) {
|
||||
var io = new IntersectionObserver(function (entries) {
|
||||
entries.forEach(function (en) {
|
||||
if (en.isIntersecting) { en.target.classList.add('in'); io.unobserve(en.target); }
|
||||
});
|
||||
}, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
|
||||
reveals.forEach(function (el) { io.observe(el); });
|
||||
} else {
|
||||
reveals.forEach(function (el) { el.classList.add('in'); });
|
||||
}
|
||||
|
||||
/* ---------- Hero parallax (subtle, respects reduced motion) ---------- */
|
||||
var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
var heroBg = $('.hero__bg');
|
||||
if (heroBg && !reduce) {
|
||||
window.addEventListener('scroll', function () {
|
||||
var y = window.scrollY;
|
||||
if (y < window.innerHeight) heroBg.style.transform = 'translateY(' + (y * 0.25) + 'px)';
|
||||
}, { passive: true });
|
||||
}
|
||||
|
||||
/* ---------- "Reserve" buttons prefill the spider field ---------- */
|
||||
$$('[data-inquire]').forEach(function (btn) {
|
||||
btn.addEventListener('click', function () {
|
||||
var field = $('#spiderField');
|
||||
if (field) field.value = btn.getAttribute('data-inquire') || '';
|
||||
});
|
||||
});
|
||||
|
||||
/* ---------- Inquiry form ---------- */
|
||||
var form = $('#inquiryForm');
|
||||
var ok = $('#formOk');
|
||||
|
||||
var buildMailto = function (data) {
|
||||
var subjSpider = data.spider ? ' — ' + data.spider : '';
|
||||
var subject = 'Spider Inquiry' + subjSpider + ' (' + data.name + ')';
|
||||
var body =
|
||||
'Name: ' + data.name + '\n' +
|
||||
'Email: ' + data.email + '\n' +
|
||||
'Spider of interest: ' + (data.spider || '(not specified)') + '\n\n' +
|
||||
'Message:\n' + (data.message || '(none)') + '\n';
|
||||
return 'mailto:' + CONTACT_EMAIL +
|
||||
'?subject=' + encodeURIComponent(subject) +
|
||||
'&body=' + encodeURIComponent(body);
|
||||
};
|
||||
|
||||
if (form) {
|
||||
form.addEventListener('submit', function (e) {
|
||||
e.preventDefault();
|
||||
if (!form.checkValidity()) { form.reportValidity(); return; }
|
||||
|
||||
var data = {
|
||||
name: form.name.value.trim(),
|
||||
email: form.email.value.trim(),
|
||||
spider: form.spider.value.trim(),
|
||||
message: form.message.value.trim()
|
||||
};
|
||||
|
||||
var finishMailto = function () {
|
||||
window.location.href = buildMailto(data);
|
||||
if (ok) ok.hidden = false;
|
||||
};
|
||||
|
||||
if (FORM_ENDPOINT) {
|
||||
// Progressive enhancement: POST to Google Apps Script (sends via Gmail).
|
||||
var body = new URLSearchParams(data).toString();
|
||||
fetch(FORM_ENDPOINT, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
||||
body: body
|
||||
}).then(function (r) {
|
||||
if (!r.ok) throw new Error('bad status');
|
||||
if (ok) { ok.textContent = 'Thanks! Your inquiry has been sent — we’ll reply within a day or two.'; ok.hidden = false; }
|
||||
form.reset();
|
||||
}).catch(finishMailto);
|
||||
} else {
|
||||
finishMailto();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/* ---------- Mamas lightbox ---------- */
|
||||
var lb = $('#lightbox');
|
||||
var lbImg = $('#lightboxImg');
|
||||
var lbCap = $('#lightboxCap');
|
||||
var lbClose = $('#lightboxClose');
|
||||
var lastFocused = null;
|
||||
|
||||
var openLightbox = function (trigger, img, capHTML) {
|
||||
if (!img || !lb) return;
|
||||
lastFocused = trigger;
|
||||
lbImg.src = img.getAttribute('src');
|
||||
lbImg.alt = img.getAttribute('alt') || '';
|
||||
lbCap.innerHTML = capHTML || '';
|
||||
lb.hidden = false;
|
||||
requestAnimationFrame(function () { lb.classList.add('open'); });
|
||||
document.body.style.overflow = 'hidden';
|
||||
lbClose.focus();
|
||||
};
|
||||
|
||||
var wireZoom = function (trigger, getImg, getCap, label) {
|
||||
trigger.setAttribute('role', 'button');
|
||||
trigger.setAttribute('tabindex', '0');
|
||||
trigger.setAttribute('aria-label', label);
|
||||
var open = function () { openLightbox(trigger, getImg(), getCap()); };
|
||||
trigger.addEventListener('click', open);
|
||||
trigger.addEventListener('keydown', function (e) {
|
||||
if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); open(); }
|
||||
});
|
||||
};
|
||||
|
||||
var closeLightbox = function () {
|
||||
if (!lb || lb.hidden) return;
|
||||
lb.classList.remove('open');
|
||||
document.body.style.overflow = '';
|
||||
var done = function () {
|
||||
lb.hidden = true;
|
||||
lbImg.src = '';
|
||||
lb.removeEventListener('transitionend', done);
|
||||
if (lastFocused && lastFocused.focus) lastFocused.focus();
|
||||
};
|
||||
if (reduce) { done(); } else { lb.addEventListener('transitionend', done); }
|
||||
};
|
||||
|
||||
if (lb) {
|
||||
// Meet the Mamas gallery
|
||||
$$('.mama').forEach(function (fig) {
|
||||
var name = $('.mama__cap b', fig);
|
||||
wireZoom(fig,
|
||||
function () { return $('img', fig); },
|
||||
function () { var c = $('.mama__cap', fig); return c ? c.innerHTML : ''; },
|
||||
'Enlarge photo' + (name ? ' of ' + name.textContent : ''));
|
||||
});
|
||||
|
||||
// Available spiders — click the photo to enlarge
|
||||
$$('#available .card__media').forEach(function (media) {
|
||||
var card = media.closest('.card');
|
||||
wireZoom(media,
|
||||
function () { return $('img', media); },
|
||||
function () {
|
||||
var h = $('h3', card), sci = $('.card__sci', card);
|
||||
return (h ? '<b>' + h.textContent + '</b>' : '') + (sci ? '<span>' + sci.textContent + '</span>' : '');
|
||||
},
|
||||
'Enlarge photo' + (card && $('h3', card) ? ' of ' + $('h3', card).textContent : ''));
|
||||
});
|
||||
|
||||
lbClose.addEventListener('click', closeLightbox);
|
||||
lb.addEventListener('click', function (e) { if (e.target === lb) closeLightbox(); });
|
||||
document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closeLightbox(); });
|
||||
}
|
||||
|
||||
/* ---------- Footer year ---------- */
|
||||
var y = $('#year');
|
||||
if (y) y.textContent = String(new Date().getFullYear());
|
||||
})();
|
||||
+313
@@ -0,0 +1,313 @@
|
||||
/* ============================================================
|
||||
STORM CLOUD JUMPERS — jumpers.stormcloudhills.com
|
||||
Dark storm palette · red accent · brushed-silver display type
|
||||
============================================================ */
|
||||
|
||||
:root {
|
||||
--red: #e02828;
|
||||
--red-deep: #b81d1d;
|
||||
--red-soft: #ff5a5a;
|
||||
|
||||
--bg: #0a0a0a;
|
||||
--bg-2: #101012;
|
||||
--bg-3: #16161a;
|
||||
--bg-4: #1e1e24;
|
||||
--ink: #050505;
|
||||
|
||||
--txt: #f2f2f2;
|
||||
--txt-soft: #b6b6bd;
|
||||
--txt-mute: #7d7d86;
|
||||
|
||||
--silver-1: #ffffff;
|
||||
--silver-2: #c9ccd3;
|
||||
--silver-3: #8b8f99;
|
||||
|
||||
--line: rgba(255,255,255,0.09);
|
||||
--line-2: rgba(255,255,255,0.16);
|
||||
|
||||
--shadow-sm: 0 2px 10px rgba(0,0,0,.45);
|
||||
--shadow-md: 0 16px 40px rgba(0,0,0,.55);
|
||||
--shadow-lg: 0 30px 70px rgba(0,0,0,.7);
|
||||
--glow-red: 0 0 30px rgba(224,40,40,.35);
|
||||
|
||||
--radius: 14px;
|
||||
--radius-lg: 22px;
|
||||
--container: 1200px;
|
||||
--ease: cubic-bezier(.22,.61,.36,1);
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
html { scroll-behavior: smooth; }
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
|
||||
color: var(--txt);
|
||||
background: var(--bg);
|
||||
line-height: 1.65;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
img { max-width: 100%; display: block; }
|
||||
a { color: inherit; text-decoration: none; }
|
||||
|
||||
h1,h2,h3,h4 {
|
||||
font-family: 'Oswald','Inter',sans-serif;
|
||||
font-weight: 700;
|
||||
letter-spacing: .02em;
|
||||
line-height: 1.08;
|
||||
margin: 0 0 .55em;
|
||||
color: #fff;
|
||||
}
|
||||
h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); }
|
||||
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
|
||||
h3 { font-size: 1.2rem; letter-spacing: .04em; text-transform: uppercase; }
|
||||
p { margin: 0 0 1em; }
|
||||
|
||||
/* silver metallic text used on key headlines */
|
||||
.metal {
|
||||
background: linear-gradient(180deg,#fff 0%,#d3d6dc 42%,#8c9099 60%,#eef0f3 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
|
||||
.accent { color: var(--red); }
|
||||
.section { padding: clamp(64px, 9vw, 120px) 0; position: relative; }
|
||||
.section--alt { background: var(--bg-2); }
|
||||
|
||||
/* ---------- Eyebrow / section heads ---------- */
|
||||
.eyebrow {
|
||||
display: inline-flex; align-items: center; gap: 12px;
|
||||
margin: 0 0 16px;
|
||||
font: 600 .78rem/1 'Inter',sans-serif;
|
||||
letter-spacing: .24em; text-transform: uppercase; color: var(--red);
|
||||
}
|
||||
.eyebrow .dash { width: 34px; height: 2px; background: var(--red); display: inline-block; }
|
||||
.eyebrow--light { color: var(--red-soft); }
|
||||
.section__head { max-width: 720px; margin: 0 auto clamp(36px,5vw,60px); text-align: center; }
|
||||
.section__head .eyebrow { justify-content: center; }
|
||||
.lede { color: var(--txt-soft); font-size: 1.08rem; }
|
||||
|
||||
/* ---------- Buttons ---------- */
|
||||
.btn {
|
||||
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
|
||||
padding: 14px 28px; border-radius: 999px;
|
||||
font: 600 .86rem/1 'Inter',sans-serif; letter-spacing: .09em; text-transform: uppercase;
|
||||
border: 2px solid transparent; cursor: pointer; transition: all .25s var(--ease);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.btn--primary { background: var(--red); color: #fff; border-color: var(--red); box-shadow: 0 8px 24px rgba(224,40,40,.35); }
|
||||
.btn--primary:hover { background: var(--red-deep); border-color: var(--red-deep); transform: translateY(-2px); }
|
||||
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
|
||||
.btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; transform: translateY(-2px); }
|
||||
.btn--small { padding: 11px 20px; font-size: .76rem; }
|
||||
.btn--block { width: 100%; }
|
||||
|
||||
/* ---------- Nav ---------- */
|
||||
.nav { position: fixed; inset: 0 0 auto 0; z-index: 60; transition: background .3s var(--ease), box-shadow .3s var(--ease); }
|
||||
.nav.scrolled { background: rgba(10,10,10,.86); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line); }
|
||||
.nav__inner { max-width: var(--container); margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
|
||||
.nav__brand { display: flex; align-items: center; gap: 12px; }
|
||||
.nav__logo { width: 42px; height: 42px; border-radius: 9px; object-fit: cover; box-shadow: var(--shadow-sm); }
|
||||
.nav__name { font: 700 1.05rem/1 'Oswald',sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
|
||||
.nav__name small { display: block; font-size: .62rem; letter-spacing: .34em; color: var(--txt-mute); margin-top: 3px; }
|
||||
.nav__links { display: flex; align-items: center; gap: 26px; }
|
||||
.nav__links a { font: 600 .82rem/1 'Inter',sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--txt-soft); transition: color .2s; }
|
||||
.nav__links a:hover { color: #fff; }
|
||||
.nav__cta { padding: 10px 20px; border: 2px solid var(--red); border-radius: 999px; color: #fff !important; background: var(--red); }
|
||||
.nav__cta:hover { background: var(--red-deep); border-color: var(--red-deep); }
|
||||
.nav__burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
|
||||
.nav__burger span { width: 24px; height: 2px; background: #fff; transition: .25s var(--ease); }
|
||||
|
||||
/* ---------- Hero ---------- */
|
||||
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; padding: 120px 0 80px; }
|
||||
.hero__bg { position: absolute; inset: 0; background: url('assets/brand/hero-storm-wide.jpg') center/cover no-repeat; opacity: .32; filter: saturate(1.1); }
|
||||
.hero::after { content: ""; position: absolute; inset: 0; background:
|
||||
radial-gradient(1000px 600px at 70% 30%, rgba(224,40,40,.16), transparent 60%),
|
||||
linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.82) 70%, var(--bg) 100%); }
|
||||
.hero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
|
||||
.hero__title { margin: 0 0 .35em; }
|
||||
.hero__title .t-sub { display: block; font-size: clamp(1rem,2vw,1.4rem); letter-spacing: .3em; color: var(--red-soft); text-transform: uppercase; margin-bottom: .5em; font-weight: 600; font-family: 'Inter',sans-serif; }
|
||||
.hero__tag { font: 600 clamp(1rem,1.8vw,1.35rem)/1.4 'Oswald',sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--silver-2); margin-bottom: 1.6em; }
|
||||
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
|
||||
.hero__logo-wrap { position: relative; text-align: center; }
|
||||
.hero__logo-wrap img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg), var(--glow-red); }
|
||||
.hero__logo-cap { margin-top: 16px; font: 600 .78rem/1 'Inter',sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--txt-mute); }
|
||||
.hero__logo-cap b { color: var(--red-soft); }
|
||||
.hero__scroll { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 2; text-align: center; color: var(--txt-mute); }
|
||||
.hero__scroll span { display: block; width: 22px; height: 34px; border: 2px solid var(--line-2); border-radius: 12px; margin: 0 auto 8px; position: relative; }
|
||||
.hero__scroll span::after { content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 3px; height: 7px; background: var(--red); border-radius: 2px; animation: scrolly 1.7s var(--ease) infinite; }
|
||||
.hero__scroll p { font-size: .62rem; letter-spacing: .3em; margin: 0; }
|
||||
@keyframes scrolly { 0%{opacity:0;transform:translate(-50%,0)} 40%{opacity:1} 100%{opacity:0;transform:translate(-50%,12px)} }
|
||||
|
||||
/* ---------- Trust strip ---------- */
|
||||
.trust { background: var(--bg-3); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
|
||||
.trust__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; padding: 30px 0; text-align: center; }
|
||||
.trust__item h4 { font-size: 1rem; margin: 0 0 4px; color: #fff; }
|
||||
.trust__item p { margin: 0; font-size: .82rem; color: var(--txt-mute); }
|
||||
.trust__item .ic { color: var(--red); font-size: 1.3rem; }
|
||||
|
||||
/* ---------- Cards grid (available) ---------- */
|
||||
.grid { display: grid; gap: 26px; }
|
||||
.spiders__grid { grid-template-columns: repeat(3,1fr); }
|
||||
.card {
|
||||
background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
|
||||
display: flex; flex-direction: column; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
|
||||
}
|
||||
.card:hover { transform: translateY(-6px); border-color: rgba(224,40,40,.5); box-shadow: var(--shadow-md); }
|
||||
.card__media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--bg-4); }
|
||||
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
|
||||
.card:hover .card__media img { transform: scale(1.05); }
|
||||
.badge { position: absolute; top: 12px; left: 12px; background: var(--red); color: #fff; font: 700 .66rem/1 'Inter',sans-serif; letter-spacing: .12em; text-transform: uppercase; padding: 7px 11px; border-radius: 999px; box-shadow: var(--shadow-sm); }
|
||||
.badge--soft { background: rgba(0,0,0,.7); border: 1px solid var(--line-2); }
|
||||
.card__body { padding: 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
|
||||
.card__body h3 { margin: 0; }
|
||||
.card__sci { font-style: italic; color: var(--red-soft); font-size: .9rem; margin: -6px 0 0; }
|
||||
.card__desc { color: var(--txt-soft); font-size: .92rem; margin: 0; }
|
||||
.card__meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
|
||||
.card__meta li { font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; color: var(--txt-soft); background: var(--bg-4); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; }
|
||||
.card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 6px; }
|
||||
.price { font: 700 1.5rem/1 'Oswald',sans-serif; color: #fff; }
|
||||
.price small { font-size: .72rem; color: var(--txt-mute); letter-spacing: .08em; display: block; text-transform: uppercase; font-family: 'Inter',sans-serif; font-weight: 500; }
|
||||
|
||||
/* Starter kit banner */
|
||||
.starter { margin-top: 34px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; justify-content: center; text-align: center; background: linear-gradient(120deg, rgba(224,40,40,.14), rgba(224,40,40,.04)); border: 1px solid rgba(224,40,40,.3); border-radius: var(--radius-lg); padding: 24px 30px; }
|
||||
.starter .tag { background: var(--red); color: #fff; font: 700 .7rem/1 'Inter',sans-serif; letter-spacing: .12em; text-transform: uppercase; padding: 8px 14px; border-radius: 999px; }
|
||||
.starter p { margin: 0; color: var(--txt-soft); }
|
||||
.starter b { color: #fff; }
|
||||
|
||||
.note-line { text-align: center; color: var(--txt-mute); font-size: .86rem; margin-top: 20px; }
|
||||
|
||||
/* ---------- Mamas gallery ---------- */
|
||||
.mamas__grid { grid-template-columns: repeat(5,1fr); gap: 18px; }
|
||||
.mama { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 1; border: 1px solid var(--line); background: var(--bg-4); }
|
||||
.mama img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
|
||||
.mama:hover img { transform: scale(1.07); }
|
||||
.mama__cap { position: absolute; inset: auto 0 0 0; padding: 26px 12px 10px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.85)); }
|
||||
.mama__cap b { display: block; font: 700 .95rem/1 'Oswald',sans-serif; letter-spacing: .04em; text-transform: uppercase; color: #fff; }
|
||||
.mama__cap span { font-size: .72rem; font-style: italic; color: var(--red-soft); }
|
||||
|
||||
/* ---------- Care ---------- */
|
||||
.care__grid { grid-template-columns: repeat(3,1fr); }
|
||||
.care__card { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; transition: border-color .3s, transform .3s; }
|
||||
.care__card:hover { border-color: rgba(224,40,40,.4); transform: translateY(-4px); }
|
||||
.care__num { font: 700 1rem/1 'Oswald',sans-serif; color: var(--red); letter-spacing: .1em; margin-bottom: 14px; }
|
||||
.care__card h3 { margin: 0 0 8px; }
|
||||
.care__card p { margin: 0; color: var(--txt-soft); font-size: .92rem; }
|
||||
.care__qr { margin-top: 40px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; justify-content: center; background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px 34px; }
|
||||
.care__qr img { width: 128px; height: 128px; border-radius: 12px; background: #fff; padding: 8px; }
|
||||
.care__qr .t h3 { margin: 0 0 6px; }
|
||||
.care__qr .t p { margin: 0; color: var(--txt-soft); max-width: 420px; }
|
||||
|
||||
/* ---------- Shipping (dark feature) ---------- */
|
||||
.shipping { position: relative; overflow: hidden; }
|
||||
.shipping__bg { position: absolute; inset: 0; background: url('assets/brand/hero-logo-left.jpg') center/cover no-repeat; opacity: .18; }
|
||||
.shipping::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(10,10,10,.85), rgba(10,10,10,.95)); }
|
||||
.shipping .container { position: relative; z-index: 2; }
|
||||
.ship__grid { grid-template-columns: repeat(2,1fr); gap: 22px; margin-top: 30px; }
|
||||
.ship__card { background: rgba(22,22,26,.7); border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: 26px; backdrop-filter: blur(4px); }
|
||||
.ship__card h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 1.05rem; color: #fff; }
|
||||
.ship__card p { margin: 0; color: var(--txt-soft); font-size: .92rem; }
|
||||
.ship__card .ic { color: var(--red); }
|
||||
.ship__flag { display: inline-block; margin-top: 8px; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--red-soft); }
|
||||
.callout { margin-top: 26px; text-align: center; font: 600 .9rem/1.5 'Inter',sans-serif; letter-spacing: .06em; color: var(--silver-2); background: rgba(224,40,40,.12); border: 1px solid rgba(224,40,40,.35); border-radius: 999px; padding: 14px 22px; display: inline-block; }
|
||||
|
||||
/* ---------- About ---------- */
|
||||
.about__grid { grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
|
||||
.about__visual img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
|
||||
.bullets { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; }
|
||||
.bullets li { position: relative; padding-left: 30px; color: var(--txt-soft); }
|
||||
.bullets li::before { content: "✦"; position: absolute; left: 0; color: var(--red); }
|
||||
.bullets b { color: #fff; }
|
||||
|
||||
/* ---------- Contact ---------- */
|
||||
.contact__grid { grid-template-columns: 1fr 1fr; gap: 48px; }
|
||||
.contact__list { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 14px; }
|
||||
.contact__list li { display: flex; align-items: center; gap: 12px; color: var(--txt-soft); }
|
||||
.contact__list .ic { color: var(--red); width: 22px; text-align: center; }
|
||||
.contact__list a:hover { color: #fff; }
|
||||
.form { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px; display: grid; gap: 16px; }
|
||||
.form label { display: grid; gap: 6px; font: 600 .78rem/1 'Inter',sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--txt-soft); }
|
||||
.form input, .form select, .form textarea {
|
||||
width: 100%; background: var(--bg); border: 1px solid var(--line-2); border-radius: 10px; padding: 12px 14px;
|
||||
color: #fff; font: 400 .95rem/1.4 'Inter',sans-serif; transition: border-color .2s;
|
||||
}
|
||||
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--red); }
|
||||
.form textarea { resize: vertical; }
|
||||
.form__note { font-size: .78rem; color: var(--txt-mute); text-transform: none; letter-spacing: 0; margin: 0; }
|
||||
.form__msg { margin: 0; padding: 12px 14px; border-radius: 10px; font-size: .88rem; }
|
||||
.form__msg--ok { background: rgba(40,180,90,.14); border: 1px solid rgba(40,180,90,.4); color: #9be8b6; }
|
||||
.form__msg--err { background: rgba(224,40,40,.14); border: 1px solid rgba(224,40,40,.4); color: var(--red-soft); }
|
||||
|
||||
/* ---------- Footer ---------- */
|
||||
.footer { background: var(--ink); border-top: 1px solid var(--line); padding: 50px 0 34px; }
|
||||
.footer__inner { display: flex; flex-wrap: wrap; gap: 26px; align-items: center; justify-content: space-between; }
|
||||
.footer__brand { display: flex; align-items: center; gap: 14px; }
|
||||
.footer__brand img { width: 50px; height: 50px; border-radius: 10px; }
|
||||
.footer__name { font: 700 1.1rem/1 'Oswald',sans-serif; letter-spacing: .06em; text-transform: uppercase; margin: 0; color:#fff; }
|
||||
.footer__name small { display:block; font-size:.6rem; letter-spacing:.32em; color: var(--txt-mute); margin-top:4px; }
|
||||
.footer__links { display: flex; flex-wrap: wrap; gap: 20px; }
|
||||
.footer__links a { font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--txt-soft); }
|
||||
.footer__links a:hover { color: #fff; }
|
||||
.footer__social { display: inline-flex; align-items: center; gap: 8px; color: var(--txt-soft); }
|
||||
.footer__social:hover { color: var(--red-soft); }
|
||||
.footer__copy { width: 100%; text-align: center; color: var(--txt-mute); font-size: .78rem; margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--line); }
|
||||
|
||||
/* ---------- Lightbox ---------- */
|
||||
.mama, .card__media { cursor: zoom-in; }
|
||||
.mama:focus-visible, .card__media:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
|
||||
.lightbox {
|
||||
position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
|
||||
padding: 5vh 20px; background: rgba(5,5,5,.9); backdrop-filter: blur(6px);
|
||||
opacity: 0; transition: opacity .25s var(--ease);
|
||||
}
|
||||
.lightbox[hidden] { display: none; }
|
||||
.lightbox.open { opacity: 1; }
|
||||
.lightbox__figure { margin: 0; max-width: min(92vw, 760px); text-align: center; transform: scale(.96); transition: transform .25s var(--ease); }
|
||||
.lightbox.open .lightbox__figure { transform: scale(1); }
|
||||
.lightbox__img { max-width: 100%; max-height: 82vh; width: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg), var(--glow-red); }
|
||||
.lightbox__cap { margin-top: 16px; color: var(--txt); font: 700 1.15rem/1.2 'Oswald',sans-serif; letter-spacing: .04em; text-transform: uppercase; }
|
||||
.lightbox__cap span { display: block; margin-top: 4px; font: italic 400 .85rem/1 'Inter',sans-serif; text-transform: none; color: var(--red-soft); letter-spacing: 0; }
|
||||
.lightbox__close {
|
||||
position: absolute; top: 18px; right: 22px; z-index: 2; width: 46px; height: 46px; border-radius: 50%;
|
||||
background: rgba(0,0,0,.5); border: 1px solid var(--line-2); color: #fff; font-size: 1.8rem; line-height: 1;
|
||||
cursor: pointer; transition: background .2s, transform .2s;
|
||||
}
|
||||
.lightbox__close:hover { background: var(--red); transform: rotate(90deg); }
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.lightbox, .lightbox__figure, .lightbox__close { transition: none; }
|
||||
}
|
||||
|
||||
/* ---------- Reveal animation ---------- */
|
||||
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
|
||||
.reveal.in { opacity: 1; transform: none; }
|
||||
|
||||
/* ---------- Responsive ---------- */
|
||||
@media (max-width: 980px) {
|
||||
.hero__grid { grid-template-columns: 1fr; text-align: center; gap: 36px; }
|
||||
.hero__cta { justify-content: center; }
|
||||
.hero__logo-wrap { order: -1; max-width: 380px; margin: 0 auto; }
|
||||
.spiders__grid, .care__grid { grid-template-columns: repeat(2,1fr); }
|
||||
.mamas__grid { grid-template-columns: repeat(4,1fr); }
|
||||
.about__grid, .contact__grid { grid-template-columns: 1fr; }
|
||||
.ship__grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.nav__links { position: fixed; inset: 0 0 0 auto; width: min(78vw,320px); flex-direction: column; align-items: flex-start; gap: 22px; background: var(--bg-2); padding: 96px 30px 30px; transform: translateX(100%); transition: transform .3s var(--ease); box-shadow: var(--shadow-lg); }
|
||||
.nav__links.open { transform: none; }
|
||||
.nav__burger { display: flex; z-index: 61; }
|
||||
.nav.menu-open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
|
||||
.nav.menu-open .nav__burger span:nth-child(2) { opacity: 0; }
|
||||
.nav.menu-open .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
|
||||
.trust__grid { grid-template-columns: repeat(2,1fr); gap: 20px; }
|
||||
.spiders__grid, .care__grid { grid-template-columns: 1fr; }
|
||||
.mamas__grid { grid-template-columns: repeat(2,1fr); }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* { scroll-behavior: auto !important; }
|
||||
.reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
|
||||
.hero__scroll span::after { animation: none; }
|
||||
}
|
||||
Reference in New Issue
Block a user