initial build
This commit is contained in:
Jason Stedwell
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"version": "0.0.1",
|
||||
"configurations": [
|
||||
{
|
||||
"name": "scj-site",
|
||||
"runtimeExecutable": "python3",
|
||||
"runtimeArgs": ["-m", "http.server", "8123", "--directory", "scj"],
|
||||
"port": 8123
|
||||
}
|
||||
]
|
||||
}
|
||||
Executable
BIN
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
@@ -0,0 +1,51 @@
|
||||
{\rtf1\ansi\ansicpg1252\cocoartf2870
|
||||
\cocoatextscaling0\cocoaplatform0{\fonttbl\f0\fnil\fcharset0 HelveticaNeue-Bold;\f1\fnil\fcharset0 HelveticaNeue;}
|
||||
{\colortbl;\red255\green255\blue255;}
|
||||
{\*\expandedcolortbl;;}
|
||||
\margl1440\margr1440\vieww11520\viewh8400\viewkind0
|
||||
\deftab560
|
||||
\pard\pardeftab560\pardirnatural\partightenfactor0
|
||||
|
||||
\f0\b\fs40 \cf0 Website for Spoods\
|
||||
\pard\pardeftab560\slleading20\partightenfactor0
|
||||
|
||||
\f1\b0\fs26 \cf0 Did a small EDIT \
|
||||
\
|
||||
Baby spiders are called slings in the hobby (even tarantulas) \
|
||||
\
|
||||
No health check- maybe \'91healthy body shape\'92 it\'92s all about the shape of the abdomen \
|
||||
\
|
||||
Use \'91captive raised\'92 b/c I\'92m not breeding them- my mamas are WC\
|
||||
They breed one time and have babies for the rest of their short lives \
|
||||
\
|
||||
Can you make a QR code for the care sheet part or website in general? I\'92m going to type one up when I get the cord that runs from my phone to the printer. Edit- I\'92ve got the cord and I think I can do a google search- that\'92s not copyrighted - right??\
|
||||
\pard\pardeftab560\slleading20\pardirnatural\partightenfactor0
|
||||
\cf0 \
|
||||
\pard\pardeftab560\slleading20\partightenfactor0
|
||||
\cf0 I\'92m also adding a starter kit- includes misting bottle, paintbrush, notes on molting/instar (can\'92t think of good way to word it). \
|
||||
\pard\pardeftab560\slleading20\pardirnatural\partightenfactor0
|
||||
\cf0 \
|
||||
\pard\pardeftab560\slleading20\partightenfactor0
|
||||
\cf0 Overnight to hub (morph market covers live arrival) or 2 day to your door which isn\'92t covered in LG\
|
||||
\pard\pardeftab560\slleading20\pardirnatural\partightenfactor0
|
||||
\cf0 \
|
||||
\pard\pardeftab560\slleading20\partightenfactor0
|
||||
\cf0 Mine are Northern canopy (otiosus) \
|
||||
b/c there is a difference from the fla Oti\'92s & $35+ on them. Most breeders are in the $60 range but I\'92ll undercut them all lol. Also change \'91calm\'92 maybe active cuz they a little crazy lol ** they do well with a playground** your dragon lair for instance. \
|
||||
\
|
||||
I\'92ll probably never have a mustached jumper (way too small for my bad hands) but hopefully I\'92ll have fartillis in the future probably the same price\
|
||||
\
|
||||
Guaranteed alive if overnight (hub to hub) is chosen. I\'92m going to offer 2 day shipping for a lower rate also for spring/fall delivery \
|
||||
\
|
||||
Fed Ex is the only legal option\
|
||||
\
|
||||
I like the Mon-Wed part just can\'92t be UPS or USPS. \
|
||||
\
|
||||
Slings (i3-6 ish) can be in 3 x 3 cubes also. Mention soft sphagnum moss or other reptile safe moss as floor incase they fall. \
|
||||
\
|
||||
You can add peanut beetle larvae- PBL as food- it\'92s a newer- great choice. \
|
||||
\
|
||||
Molting is pretty critical at i5 & i7 so a little more humidity is essential. Only feed after a few days- when they come out of hammock \
|
||||
\pard\pardeftab560\slleading20\pardirnatural\partightenfactor0
|
||||
\cf0 \
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
# Storm Cloud Jumpers — Website Build Plan
|
||||
|
||||
**Domain:** jumpers.stormcloudhills.com
|
||||
**Type:** Static, responsive storefront-style showcase + care hub. **All sales & inquiries run through the website directly** (email) — **NOT** MorphMarket.
|
||||
**Contact:** stormcloudjumpers@gmail.com
|
||||
**Facebook:** https://www.facebook.com/61591317309985/
|
||||
**Build location:** `scj/`
|
||||
|
||||
---
|
||||
|
||||
## 1. What this site is (and isn't)
|
||||
|
||||
A branded **showcase + inquiry hub** that IS her sales channel. No cart/payment processor and no accounts — buyers **reserve/inquire via the site** (form + email to stormcloudjumpers@gmail.com), and Mom arranges payment + shipping directly. She is **not** setting up a MorphMarket shop (she only reuses MorphMarket-branded shipping boxes, which carry the live-arrival program). So: **no MorphMarket links anywhere.**
|
||||
Every "Available" spider gets a **"Reserve / Inquire"** button that opens a pre-filled inquiry (form anchor or `mailto:` with the spider's name in the subject).
|
||||
|
||||
## 2. Brand & design direction
|
||||
|
||||
Reuse the locked look from the existing assets:
|
||||
- **Palette:** near-black storm background (`#0a0a0a`), **red `#e02828`** accent, brushed-silver text on headings.
|
||||
- **Type:** Oswald (display/headlines) + Inter (body) — already in the placeholder.
|
||||
- **Mascot:** **Nimbus** (the crest logo) featured in the hero and as the site logo/favicon.
|
||||
- **Vibe:** bold "esports crest" energy softened with clean, readable content — professional, not gimmicky. Keep subtle motion (reveal-on-scroll, light parallax) from the placeholder; trim anything that hurts readability or mobile.
|
||||
|
||||
## 3. Structure — single page + one print page
|
||||
|
||||
**`index.html`** (anchor nav: Available · Mamas · Care · Shipping · About · Contact)
|
||||
|
||||
1. **Hero** — Nimbus mascot on storm background, tagline "Small size. Big personality.", CTAs → *View Available* + *Care Guide*.
|
||||
2. **Available Now** — the real for-sale inventory as cards, each with photo, species, instar/age, sex status, "healthy body shape", temperament, price, and a **Reserve / Inquire** button:
|
||||
- *Otiosus slings* — Northern Canopy (Fern's line), i5–6, unsexed, **$25** ea. Note: Northern otiosus differ from FL; typically $35+.
|
||||
- *Regius males* — current boys **Gully, Noble, Hexx & Magick**, adults, **$25** ea. (⚠️ **Nashville has passed away** — remove. Ivan's status TBD — see §7. New boys need photos.)
|
||||
- *Regius females* — **Iris** (subadult, young enough to work with) & **Mango** (subadult, handles well), **$50** ea.
|
||||
- **Free Starter Kit** — comes **free with every spider purchase** (misting bottle, paintbrush, molting/instar notes). Present as a value-add banner/badge, NOT a purchasable product.
|
||||
3. **Meet the Mamas** — showcase gallery (NOT for sale) of her wild-caught breeding females: Fern (otiosus), Cleo (audax), and the regius girls (Colette, Demure, Devine, Delight, Dove, Inca, Latte, Lush). Builds trust + shows lineage.
|
||||
4. **Care Guide** — accurate husbandry (see §4). Includes a **QR code** linking to the printable care sheet.
|
||||
5. **Shipping & Live Arrival** — FedEx-only rules (see §4).
|
||||
6. **About** — small hands-on keeper; wild-caught mamas that breed once → **captive-raised** babies; Storm Cloud Hills.
|
||||
7. **Contact** — inquiry form (routes to Gmail) + stormcloudjumpers@gmail.com + **Facebook** link/share button.
|
||||
8. **Footer** — logo, nav, Facebook, © year.
|
||||
|
||||
**`care-sheet.html`** — print-friendly, single-column version of the care guide. This is the QR code target so buyers can print/save it. (Mom is also typing up her own; this gives her a branded template.)
|
||||
|
||||
## 4. Content accuracy — corrections from Mom's note (MUST honor)
|
||||
|
||||
- ✅ **"Captive raised"** everywhere — never "captive bred." Mamas are wild-caught (WC), breed once, produce babies through their short lives.
|
||||
- ✅ Babies = **"slings"** (hobby term).
|
||||
- ✅ No health-check claims → **"healthy body shape"** (abdomen shape).
|
||||
- ✅ **Live arrival guaranteed only on overnight hub-to-hub** (MorphMarket covers it). 2-day to-your-door = lower rate, **not** covered, offered spring/fall.
|
||||
- ✅ **FedEx only** (only legal option) — **no UPS, no USPS**. Ships **Mon–Wed**.
|
||||
- ✅ otiosus temperament = **Active** ("a little crazy"); enjoy a **playground / enrichment ("dragon lair")** setup.
|
||||
- ✅ Housing: slings (i3–6) fine in **3×3 cubes**; floor with **soft sphagnum / reptile-safe moss** in case of falls.
|
||||
- ✅ Feeding: hydei fruit flies for slings; **PBL (peanut beetle larvae)** as a newer great option; crickets/BSFL for larger.
|
||||
- ✅ Molting: critical at **i5 & i7** — raise humidity; **don't feed until a few days after** they leave the hammock.
|
||||
- ✅ Remove all fabricated stats/reviews and the placeholder phone/email.
|
||||
- Future species (not yet available): mustached jumper unlikely; hoped-for **_Paraphidippus fartilis_** (≈ same price).
|
||||
|
||||
## 5. Assets pipeline
|
||||
|
||||
- Create `scj/assets/` → `brand/` (Nimbus logo variants, hero cards), `spiders/available/`, `spiders/mamas/`, `care/` (QR + diagrams).
|
||||
- **Resize/optimize** the large iPhone JPEGs (many are 2–4 MB) to web sizes with `sips` (max ~1600px, ~80% quality) so the site loads fast on mobile.
|
||||
- **Map photos → individuals** using each folder's `names.txt` ordering (e.g., "first 6 = Iris"). Filenames aren't in order, so I'll view them during build to assign the best shot per spider and per gallery.
|
||||
- Generate a **QR code** PNG pointing to the care sheet URL.
|
||||
- Pull the 3 otiosus sling photos out of the "Available spoods" PDF for the slings card.
|
||||
|
||||
## 6. Tech
|
||||
|
||||
- Plain **HTML + CSS + vanilla JS**, no build step — trivial to host on the subdomain and easy to hand off.
|
||||
- Adapt the existing `SCJ.src/styles.css` as the base (it already nails the palette/type), fixing content and extending for the new sections.
|
||||
- Fully **responsive** (mobile-first), accessible (alt text, semantic landmarks, keyboard nav), SEO basics (title/description/OG tags using a Nimbus social card), favicon from the logo.
|
||||
- Lighthouse pass for performance/a11y before done.
|
||||
|
||||
## 7. Open items to confirm with Mom
|
||||
|
||||
1. **Male roster + photos.** Nashville passed; current boys are **Gully, Noble, Hexx & Magick** but we have **no photos** for them yet — only Nashville (deceased) and Ivan. Need: is **Ivan** still available? Send photos for the new boys. Until then I'll show the males as one "Regius Males — $25" group using available/placeholder imagery and a "more boys coming" note.
|
||||
2. ~~Inquiry form delivery~~ **RESOLVED:** ship with a **`mailto:` form** now, but build the form so it can POST to a **Google Apps Script web app** bound to her own Gmail (`GmailApp.sendEmail`) — sends from her account, no external service. Ship `form-handler.gs` (ready to deploy) + progressive-enhancement JS that POSTs to the endpoint when configured, else falls back to `mailto:`.
|
||||
|
||||
**Resolved:** No MorphMarket · Starter kit free w/ purchase · Species = _Paraphidippus fartilis_ · Facebook = facebook.com/61591317309985 · Contact = stormcloudjumpers@gmail.com
|
||||
|
||||
## 8. Build order
|
||||
|
||||
1. Scaffold `scj/` (index.html, care-sheet.html, styles.css, script.js, assets/).
|
||||
2. Assets pipeline: sort/resize photos, extract sling pics, generate QR + favicon/OG.
|
||||
3. Build hero + nav + Available section (core).
|
||||
4. Mamas gallery, Care guide, Shipping, About, Contact.
|
||||
5. care-sheet.html print page.
|
||||
6. Responsive/a11y/perf polish + final review against Mom's note.
|
||||
Executable
+310
@@ -0,0 +1,310 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="Storm Cloud Jumpers — premium captive-bred jumping spiders. Small size. Big personality." />
|
||||
<title>Storm Cloud Jumpers — Jumping Spiders</title>
|
||||
<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@300;400;500;600;700;800&family=Oswald:wght@500;600;700&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- NAV -->
|
||||
<header class="nav" id="nav">
|
||||
<div class="nav__inner">
|
||||
<a href="#top" class="nav__brand" aria-label="Storm Cloud Jumpers home">
|
||||
<span class="nav__logo" aria-hidden="true"></span>
|
||||
<span class="nav__name">STORM<span class="accent">/</span>CLOUD</span>
|
||||
</a>
|
||||
<nav class="nav__links" aria-label="Primary">
|
||||
<a href="#about">About</a>
|
||||
<a href="#spiders">Spiders</a>
|
||||
<a href="#care">Care</a>
|
||||
<a href="#shipping">Shipping</a>
|
||||
<a href="#contact" class="nav__cta">Contact</a>
|
||||
</nav>
|
||||
<button class="nav__burger" id="burger" aria-label="Menu" aria-expanded="false">
|
||||
<span></span><span></span><span></span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- HERO -->
|
||||
<section class="hero" id="top">
|
||||
<div class="hero__clouds" data-parallax="0.4"></div>
|
||||
<div class="hero__content">
|
||||
<div class="hero__logo" aria-hidden="true">
|
||||
<svg viewBox="0 0 200 180" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="cloudGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stop-color="#ffffff"/>
|
||||
<stop offset="100%" stop-color="#9a9a9a"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M40 110 Q15 110 15 85 Q15 60 40 60 Q45 35 75 35 Q100 35 105 60 Q130 35 155 50 Q185 55 185 85 Q185 110 160 110 Z"
|
||||
fill="url(#cloudGrad)" stroke="#0d0d0d" stroke-width="6" stroke-linejoin="round"/>
|
||||
<path d="M105 30 L80 95 L100 95 L75 165 L130 80 L108 80 L130 30 Z"
|
||||
fill="#e02828" stroke="#0d0d0d" stroke-width="4" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h1 class="hero__title">
|
||||
<span class="t1">STORM<span class="accent">/</span>CLOUD</span>
|
||||
<span class="t2">— JUMPERS —</span>
|
||||
</h1>
|
||||
<p class="hero__tag">SMALL SIZE. BIG PERSONALITY.</p>
|
||||
<div class="hero__cta">
|
||||
<a href="#spiders" class="btn btn--primary">View Spiders</a>
|
||||
<a href="#about" class="btn btn--ghost">Learn More</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero__scroll" aria-hidden="true">
|
||||
<span></span>
|
||||
<p>SCROLL</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ABOUT -->
|
||||
<section class="section about" id="about">
|
||||
<div class="container about__grid">
|
||||
<div class="about__text reveal">
|
||||
<p class="eyebrow"><span class="dash"></span>About Us</p>
|
||||
<h2>Captive-bred jumpers, raised with obsessive care.</h2>
|
||||
<p class="lede">
|
||||
Storm Cloud Jumpers is a small, hands-on breeder specializing in healthy,
|
||||
well-socialized jumping spiders. Every spiderling we ship is hand-fed,
|
||||
health-checked, and packed for a stress-free journey to its new home.
|
||||
</p>
|
||||
<ul class="bullets">
|
||||
<li><strong>100% captive-bred</strong> — never wild-caught.</li>
|
||||
<li><strong>Health guarantee</strong> on every live arrival.</li>
|
||||
<li><strong>Care sheet included</strong> — tailored to species & age.</li>
|
||||
<li><strong>Hobbyist-first</strong> — real answers, real photos.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="about__visual reveal">
|
||||
<div class="card-stack">
|
||||
<div class="card-stack__bg" data-parallax="0.1"></div>
|
||||
<div class="card-stack__fg">
|
||||
<div class="stat"><span>100%</span><p>Captive Bred</p></div>
|
||||
<div class="stat"><span>50+</span><p>Slings Hatched / mo</p></div>
|
||||
<div class="stat"><span>24h</span><p>Live Arrival Window</p></div>
|
||||
<div class="stat"><span>★ 4.9</span><p>Hobbyist Rated</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PARALLAX BREAK -->
|
||||
<section class="parallax-break" aria-hidden="true">
|
||||
<div class="parallax-break__bg" data-parallax="0.3"></div>
|
||||
<div class="parallax-break__quote">
|
||||
<p>“Curious. Charismatic. Fearless.”</p>
|
||||
<span>— the jumping spider, in three words</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SPIDERS -->
|
||||
<section class="section spiders" id="spiders">
|
||||
<div class="container">
|
||||
<div class="section__head reveal">
|
||||
<p class="eyebrow"><span class="dash"></span>Available Now</p>
|
||||
<h2>Meet the jumpers.</h2>
|
||||
<p class="lede">A rotating selection of our healthiest slings, juveniles, and adults.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid spiders__grid">
|
||||
<article class="spider reveal">
|
||||
<div class="spider__img spider__img--regius"></div>
|
||||
<div class="spider__body">
|
||||
<h3>Phidippus regius</h3>
|
||||
<p class="spider__tag">Regal Jumper · Florida lineage</p>
|
||||
<ul class="spider__meta">
|
||||
<li>Size: 10–22mm</li>
|
||||
<li>Lifespan: ~1.5 yrs</li>
|
||||
<li>Temperament: Bold, curious</li>
|
||||
</ul>
|
||||
<div class="spider__foot">
|
||||
<span class="price">$35+</span>
|
||||
<a href="#contact" class="btn btn--small">Inquire</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="spider reveal">
|
||||
<div class="spider__img spider__img--audax"></div>
|
||||
<div class="spider__body">
|
||||
<h3>Phidippus audax</h3>
|
||||
<p class="spider__tag">Bold Jumper · classic North American</p>
|
||||
<ul class="spider__meta">
|
||||
<li>Size: 8–18mm</li>
|
||||
<li>Lifespan: ~1 yr</li>
|
||||
<li>Temperament: Active, alert</li>
|
||||
</ul>
|
||||
<div class="spider__foot">
|
||||
<span class="price">$20+</span>
|
||||
<a href="#contact" class="btn btn--small">Inquire</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="spider reveal">
|
||||
<div class="spider__img spider__img--otiosus"></div>
|
||||
<div class="spider__body">
|
||||
<h3>Phidippus otiosus</h3>
|
||||
<p class="spider__tag">Canopy Jumper · arboreal beauty</p>
|
||||
<ul class="spider__meta">
|
||||
<li>Size: 10–20mm</li>
|
||||
<li>Lifespan: ~1 yr</li>
|
||||
<li>Temperament: Calm, climby</li>
|
||||
</ul>
|
||||
<div class="spider__foot">
|
||||
<span class="price">$30+</span>
|
||||
<a href="#contact" class="btn btn--small">Inquire</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="spider reveal">
|
||||
<div class="spider__img spider__img--mystaceus"></div>
|
||||
<div class="spider__body">
|
||||
<h3>Phidippus mystaceus</h3>
|
||||
<p class="spider__tag">Mustached Jumper · fluffy & rare</p>
|
||||
<ul class="spider__meta">
|
||||
<li>Size: 9–17mm</li>
|
||||
<li>Lifespan: ~1 yr</li>
|
||||
<li>Temperament: Gentle, shy</li>
|
||||
</ul>
|
||||
<div class="spider__foot">
|
||||
<span class="price">$45+</span>
|
||||
<a href="#contact" class="btn btn--small">Inquire</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CARE -->
|
||||
<section class="section care" id="care">
|
||||
<div class="container">
|
||||
<div class="section__head reveal">
|
||||
<p class="eyebrow"><span class="dash"></span>Husbandry</p>
|
||||
<h2>Care made simple.</h2>
|
||||
<p class="lede">Jumpers are some of the easiest invertebrates to keep — here's the short version.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid care__grid">
|
||||
<div class="care__card reveal">
|
||||
<div class="care__num">01</div>
|
||||
<h3>Enclosure</h3>
|
||||
<p>Vertical, well-ventilated. ~4×4×6" for slings, ~6×6×10" for adults. Cork bark, fake leaves, a cozy hammock at the top.</p>
|
||||
</div>
|
||||
<div class="care__card reveal">
|
||||
<div class="care__num">02</div>
|
||||
<h3>Temperature</h3>
|
||||
<p>72–82°F is the sweet spot. Avoid direct sun and drafts. Room temp works for most homes year-round.</p>
|
||||
</div>
|
||||
<div class="care__card reveal">
|
||||
<div class="care__num">03</div>
|
||||
<h3>Humidity</h3>
|
||||
<p>40–60%. Mist one side of the enclosure a few times per week — never soak. Cross-ventilation is essential.</p>
|
||||
</div>
|
||||
<div class="care__card reveal">
|
||||
<div class="care__num">04</div>
|
||||
<h3>Feeding</h3>
|
||||
<p>Slings: flightless fruit flies, 2–3×/week. Adults: small crickets, mealworms, BSFL — every 4–6 days.</p>
|
||||
</div>
|
||||
<div class="care__card reveal">
|
||||
<div class="care__num">05</div>
|
||||
<h3>Handling</h3>
|
||||
<p>Optional, but jumpers are famously personable. Low, slow, over a soft surface. Always let them come to you.</p>
|
||||
</div>
|
||||
<div class="care__card reveal">
|
||||
<div class="care__num">06</div>
|
||||
<h3>Molting</h3>
|
||||
<p>Expect a few day fast before each molt — they hide in their hammock. Don't disturb. Feed 24h after they emerge.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SHIPPING / GUARANTEE BREAK -->
|
||||
<section class="parallax-break parallax-break--alt" id="shipping" aria-hidden="false">
|
||||
<div class="parallax-break__bg parallax-break__bg--alt" data-parallax="0.25"></div>
|
||||
<div class="container parallax-break__content">
|
||||
<div class="reveal">
|
||||
<p class="eyebrow eyebrow--light"><span class="dash"></span>Shipping & Guarantee</p>
|
||||
<h2 class="light">Packed warm. Tracked the whole way. Guaranteed alive.</h2>
|
||||
<div class="guarantee">
|
||||
<div><h4>Live Arrival</h4><p>Every order ships with weather-appropriate packing and a 24-hour live arrival guarantee.</p></div>
|
||||
<div><h4>USPS Priority & Express</h4><p>Ships Mon–Wed only. Heat or cool packs included free when temps demand.</p></div>
|
||||
<div><h4>Hold For Pickup</h4><p>We default to HFP at your local post office for the safest delivery.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CONTACT -->
|
||||
<section class="section contact" id="contact">
|
||||
<div class="container contact__grid">
|
||||
<div class="contact__text reveal">
|
||||
<p class="eyebrow"><span class="dash"></span>Get In Touch</p>
|
||||
<h2>Ready to bring home a jumper?</h2>
|
||||
<p class="lede">Tell us a bit about what you're looking for and we'll match you with a healthy, well-socialized spider.</p>
|
||||
<ul class="contact__list">
|
||||
<li><span class="ico ico--user"></span>Storm Cloud Jumpers</li>
|
||||
<li><span class="ico ico--phone"></span>(555) 010-0420</li>
|
||||
<li><span class="ico ico--mail"></span>hello@stormcloudjumpers.com</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<form class="contact__form reveal" onsubmit="event.preventDefault(); this.querySelector('.form__success').hidden=false; this.reset();">
|
||||
<label>
|
||||
<span>Your Name</span>
|
||||
<input type="text" name="name" required autocomplete="name" />
|
||||
</label>
|
||||
<label>
|
||||
<span>Your Email</span>
|
||||
<input type="email" name="email" required autocomplete="email" />
|
||||
</label>
|
||||
<label>
|
||||
<span>Your Number</span>
|
||||
<input type="tel" name="phone" autocomplete="tel" />
|
||||
</label>
|
||||
<label>
|
||||
<span>What are you looking for?</span>
|
||||
<textarea name="message" rows="4" placeholder="Species, age, color preference, questions…"></textarea>
|
||||
</label>
|
||||
<button type="submit" class="btn btn--primary btn--block">Send Inquiry</button>
|
||||
<p class="form__success" hidden>Thanks — we'll get back to you within 24 hours.</p>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="footer">
|
||||
<div class="container footer__inner">
|
||||
<div class="footer__brand">
|
||||
<span class="nav__logo" aria-hidden="true"></span>
|
||||
<div>
|
||||
<p class="footer__name">STORM<span class="accent">/</span>CLOUD <span class="footer__sub">JUMPERS</span></p>
|
||||
<p class="footer__tag">SMALL SIZE. BIG PERSONALITY.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer__links">
|
||||
<a href="#about">About</a>
|
||||
<a href="#spiders">Spiders</a>
|
||||
<a href="#care">Care</a>
|
||||
<a href="#contact">Contact</a>
|
||||
</div>
|
||||
<p class="footer__copy">© <span id="year"></span> Storm Cloud Jumpers. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Executable
+100
@@ -0,0 +1,100 @@
|
||||
(() => {
|
||||
'use strict';
|
||||
|
||||
const nav = document.getElementById('nav');
|
||||
const burger = document.getElementById('burger');
|
||||
const navLinks = document.querySelector('.nav__links');
|
||||
const yearEl = document.getElementById('year');
|
||||
const parallaxEls = Array.from(document.querySelectorAll('[data-parallax]'));
|
||||
const revealEls = Array.from(document.querySelectorAll('.reveal'));
|
||||
|
||||
if (yearEl) yearEl.textContent = new Date().getFullYear();
|
||||
|
||||
/* ---- Sticky / scrolled nav ---- */
|
||||
const onScroll = () => {
|
||||
if (window.scrollY > 30) nav.classList.add('is-scrolled');
|
||||
else nav.classList.remove('is-scrolled');
|
||||
updateParallax();
|
||||
};
|
||||
|
||||
/* ---- Mobile menu toggle ---- */
|
||||
if (burger && navLinks) {
|
||||
burger.addEventListener('click', () => {
|
||||
const open = navLinks.classList.toggle('is-open');
|
||||
burger.classList.toggle('is-open', open);
|
||||
burger.setAttribute('aria-expanded', String(open));
|
||||
});
|
||||
navLinks.querySelectorAll('a').forEach((a) =>
|
||||
a.addEventListener('click', () => {
|
||||
navLinks.classList.remove('is-open');
|
||||
burger.classList.remove('is-open');
|
||||
burger.setAttribute('aria-expanded', 'false');
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
/* ---- Parallax (rAF-throttled) ---- */
|
||||
let ticking = false;
|
||||
const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
|
||||
function updateParallax() {
|
||||
if (reduced) return;
|
||||
if (ticking) return;
|
||||
ticking = true;
|
||||
requestAnimationFrame(() => {
|
||||
const vh = window.innerHeight;
|
||||
const vw = window.innerWidth;
|
||||
parallaxEls.forEach((el) => {
|
||||
const rect = el.getBoundingClientRect();
|
||||
// Only process elements roughly in / near the viewport
|
||||
if (rect.bottom < -vh || rect.top > vh * 2) return;
|
||||
const speed = parseFloat(el.dataset.parallax) || 0.2;
|
||||
// Distance of element center from viewport center
|
||||
const center = rect.top + rect.height / 2 - vh / 2;
|
||||
const offset = -center * speed;
|
||||
// Use translate3d for GPU acceleration
|
||||
el.style.transform = `translate3d(0, ${offset.toFixed(1)}px, 0)`;
|
||||
});
|
||||
ticking = false;
|
||||
});
|
||||
}
|
||||
|
||||
/* ---- Scroll reveal via IntersectionObserver ---- */
|
||||
if ('IntersectionObserver' in window) {
|
||||
const io = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('is-visible');
|
||||
io.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
},
|
||||
{ threshold: 0.15, rootMargin: '0px 0px -60px 0px' }
|
||||
);
|
||||
revealEls.forEach((el) => io.observe(el));
|
||||
} else {
|
||||
revealEls.forEach((el) => el.classList.add('is-visible'));
|
||||
}
|
||||
|
||||
/* ---- Smooth-scroll offset for fixed nav ---- */
|
||||
document.querySelectorAll('a[href^="#"]').forEach((a) => {
|
||||
a.addEventListener('click', (e) => {
|
||||
const id = a.getAttribute('href');
|
||||
if (id.length < 2) return;
|
||||
const target = document.querySelector(id);
|
||||
if (!target) return;
|
||||
e.preventDefault();
|
||||
const navH = nav.offsetHeight;
|
||||
const top = target.getBoundingClientRect().top + window.scrollY - navH + 4;
|
||||
window.scrollTo({ top, behavior: 'smooth' });
|
||||
});
|
||||
});
|
||||
|
||||
/* ---- Listeners ---- */
|
||||
window.addEventListener('scroll', onScroll, { passive: true });
|
||||
window.addEventListener('resize', updateParallax);
|
||||
// initial paint
|
||||
onScroll();
|
||||
updateParallax();
|
||||
})();
|
||||
Executable
+834
@@ -0,0 +1,834 @@
|
||||
/* ============================================================
|
||||
Storm Cloud Jumpers — single-page parallax site
|
||||
============================================================ */
|
||||
|
||||
:root {
|
||||
--red: #e02828;
|
||||
--red-deep: #b81d1d;
|
||||
--red-soft: #ff5a5a;
|
||||
|
||||
/* Dark palette */
|
||||
--bg: #0a0a0a; /* page background */
|
||||
--bg-2: #111111; /* alt section */
|
||||
--bg-3: #161616; /* card surface */
|
||||
--bg-4: #1e1e1e; /* raised surface */
|
||||
--ink: #050505; /* deepest */
|
||||
|
||||
--txt: #f2f2f2;
|
||||
--txt-soft: #b3b3b3;
|
||||
--txt-mute: #7a7a7a;
|
||||
|
||||
--line: rgba(255, 255, 255, 0.08);
|
||||
--line-2: rgba(255, 255, 255, 0.14);
|
||||
|
||||
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
|
||||
--shadow-md: 0 14px 36px rgba(0, 0, 0, 0.55);
|
||||
--shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.7);
|
||||
--glow-red: 0 0 28px rgba(224, 40, 40, 0.35);
|
||||
|
||||
--radius: 14px;
|
||||
--radius-lg: 22px;
|
||||
|
||||
--container: 1200px;
|
||||
|
||||
--ease: cubic-bezier(0.22, 0.61, 0.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.6;
|
||||
-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: 0.02em;
|
||||
line-height: 1.1;
|
||||
margin: 0 0 0.6em;
|
||||
color: #fff;
|
||||
}
|
||||
h2 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); }
|
||||
h3 { font-size: 1.25rem; letter-spacing: 0.04em; text-transform: uppercase; }
|
||||
|
||||
p { margin: 0 0 1em; }
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: var(--container);
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.accent { color: var(--red); }
|
||||
|
||||
/* ----- Buttons ----- */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
padding: 14px 28px;
|
||||
border-radius: 999px;
|
||||
font-weight: 600;
|
||||
font-size: 0.92rem;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
border: 2px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: all 0.25s var(--ease);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.btn--primary {
|
||||
background: var(--red);
|
||||
color: #fff;
|
||||
border-color: var(--red);
|
||||
box-shadow: 0 8px 22px rgba(224, 40, 40, 0.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, 0.6);
|
||||
}
|
||||
.btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; transform: translateY(-2px); }
|
||||
.btn--small { padding: 10px 18px; font-size: 0.78rem; }
|
||||
.btn--block { width: 100%; }
|
||||
|
||||
/* ----- Eyebrow / shared heads ----- */
|
||||
.eyebrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin: 0 0 14px;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.22em;
|
||||
text-transform: uppercase;
|
||||
color: var(--red);
|
||||
}
|
||||
.eyebrow--light { color: var(--red-soft); }
|
||||
.eyebrow .dash {
|
||||
width: 28px; height: 2px; background: var(--red); display: inline-block;
|
||||
}
|
||||
.lede { font-size: 1.05rem; color: var(--txt-soft); max-width: 60ch; }
|
||||
|
||||
.section { padding: 110px 0; position: relative; }
|
||||
.section__head { text-align: center; margin-bottom: 60px; }
|
||||
.section__head .lede { margin: 0 auto; }
|
||||
.section__head .eyebrow { justify-content: center; }
|
||||
|
||||
/* ============================================================
|
||||
NAV
|
||||
============================================================ */
|
||||
.nav {
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0;
|
||||
z-index: 50;
|
||||
padding: 18px 0;
|
||||
transition: background 0.3s var(--ease), padding 0.3s var(--ease), box-shadow 0.3s var(--ease);
|
||||
}
|
||||
.nav.is-scrolled {
|
||||
background: rgba(10, 10, 10, 0.85);
|
||||
backdrop-filter: blur(14px);
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
border-bottom: 1px solid var(--line);
|
||||
padding: 10px 0;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
.nav__inner {
|
||||
max-width: var(--container);
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 24px;
|
||||
}
|
||||
.nav__brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
color: #fff;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.06em;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.nav__logo {
|
||||
width: 36px; height: 36px;
|
||||
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 180'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%23ffffff'/><stop offset='100%25' stop-color='%239a9a9a'/></linearGradient></defs><path d='M40 110 Q15 110 15 85 Q15 60 40 60 Q45 35 75 35 Q100 35 105 60 Q130 35 155 50 Q185 55 185 85 Q185 110 160 110 Z' fill='url(%23g)' stroke='%230d0d0d' stroke-width='8' stroke-linejoin='round'/><path d='M105 30 L80 95 L100 95 L75 165 L130 80 L108 80 L130 30 Z' fill='%23e02828' stroke='%230d0d0d' stroke-width='5' stroke-linejoin='round'/></svg>") center/contain no-repeat;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.nav__name .accent { color: var(--red); margin: 0 1px; }
|
||||
.nav__links {
|
||||
display: flex; gap: 28px; align-items: center;
|
||||
}
|
||||
.nav__links a {
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
position: relative;
|
||||
padding: 6px 0;
|
||||
transition: color 0.2s var(--ease);
|
||||
}
|
||||
.nav__links a:hover { color: #fff; }
|
||||
.nav__links a:not(.nav__cta)::after {
|
||||
content: ""; position: absolute; left: 0; bottom: 0;
|
||||
width: 0; height: 2px; background: var(--red);
|
||||
transition: width 0.25s var(--ease);
|
||||
}
|
||||
.nav__links a:not(.nav__cta):hover::after { width: 100%; }
|
||||
.nav__cta {
|
||||
background: var(--red);
|
||||
color: #fff !important;
|
||||
padding: 10px 22px !important;
|
||||
border-radius: 999px;
|
||||
transition: background 0.2s var(--ease), transform 0.2s var(--ease);
|
||||
}
|
||||
.nav__cta:hover { background: var(--red-deep); transform: translateY(-1px); }
|
||||
.nav__burger {
|
||||
display: none;
|
||||
background: none; border: 0; cursor: pointer;
|
||||
width: 40px; height: 40px;
|
||||
flex-direction: column; justify-content: center; gap: 5px;
|
||||
padding: 0;
|
||||
}
|
||||
.nav__burger span {
|
||||
display: block; height: 2px; width: 24px; background: #fff; margin: 0 auto;
|
||||
transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
|
||||
}
|
||||
.nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
|
||||
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
|
||||
.nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
|
||||
|
||||
/* ============================================================
|
||||
HERO
|
||||
============================================================ */
|
||||
.hero {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
background: #1a1a1a;
|
||||
color: #fff;
|
||||
isolation: isolate;
|
||||
}
|
||||
.hero__clouds {
|
||||
position: absolute;
|
||||
inset: -10% -5% -10% -5%;
|
||||
background:
|
||||
radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.15), transparent 55%),
|
||||
radial-gradient(ellipse at 75% 70%, rgba(255,255,255,0.1), transparent 60%),
|
||||
linear-gradient(180deg, #2a2a2a 0%, #0d0d0d 100%);
|
||||
z-index: -2;
|
||||
will-change: transform;
|
||||
}
|
||||
.hero__clouds::before,
|
||||
.hero__clouds::after {
|
||||
content: ""; position: absolute; border-radius: 50%;
|
||||
filter: blur(60px);
|
||||
opacity: 0.5;
|
||||
}
|
||||
.hero__clouds::before {
|
||||
width: 60%; height: 60%; top: -10%; left: -10%;
|
||||
background: radial-gradient(circle, rgba(255,255,255,0.55), transparent 70%);
|
||||
}
|
||||
.hero__clouds::after {
|
||||
width: 70%; height: 70%; bottom: -20%; right: -15%;
|
||||
background: radial-gradient(circle, rgba(180,180,180,0.4), transparent 70%);
|
||||
}
|
||||
.hero__content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
text-align: center;
|
||||
padding: 140px 24px 80px;
|
||||
max-width: 900px;
|
||||
width: 100%;
|
||||
}
|
||||
.hero__logo {
|
||||
width: clamp(110px, 16vw, 170px);
|
||||
margin: 0 auto 24px;
|
||||
filter: drop-shadow(0 12px 32px rgba(224, 40, 40, 0.35));
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
@keyframes float {
|
||||
0%,100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
.hero__title {
|
||||
margin: 0 0 18px;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.hero__title .t1 {
|
||||
display: block;
|
||||
font-size: clamp(2.4rem, 7vw, 5.2rem);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
color: #fff;
|
||||
text-shadow: 0 4px 30px rgba(0,0,0,0.4);
|
||||
}
|
||||
.hero__title .t2 {
|
||||
display: block;
|
||||
font-size: clamp(1rem, 2.4vw, 1.5rem);
|
||||
letter-spacing: 0.6em;
|
||||
color: var(--red);
|
||||
font-weight: 500;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.hero__title .accent { color: var(--red); margin: 0 4px; }
|
||||
.hero__tag {
|
||||
font-size: clamp(0.85rem, 1.5vw, 1.05rem);
|
||||
letter-spacing: 0.4em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(255,255,255,0.75);
|
||||
margin: 0 0 36px;
|
||||
}
|
||||
.hero__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
|
||||
.hero__cta .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.6); }
|
||||
.hero__cta .btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
|
||||
|
||||
.hero__scroll {
|
||||
position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
|
||||
display: flex; flex-direction: column; align-items: center; gap: 8px;
|
||||
color: rgba(255,255,255,0.55);
|
||||
font-size: 0.7rem; letter-spacing: 0.4em;
|
||||
}
|
||||
.hero__scroll span {
|
||||
width: 1px; height: 40px;
|
||||
background: linear-gradient(180deg, transparent, rgba(255,255,255,0.6));
|
||||
position: relative; overflow: hidden;
|
||||
}
|
||||
.hero__scroll span::after {
|
||||
content: ""; position: absolute; top: -40px; left: 0; right: 0; height: 12px;
|
||||
background: var(--red);
|
||||
animation: scrollDot 2.2s ease-in-out infinite;
|
||||
}
|
||||
@keyframes scrollDot {
|
||||
0% { top: -12px; } 100% { top: 100%; }
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
ABOUT
|
||||
============================================================ */
|
||||
.about { background: var(--bg); }
|
||||
.about::before {
|
||||
content: ""; position: absolute; inset: 0;
|
||||
background:
|
||||
radial-gradient(ellipse at 20% 0%, rgba(224, 40, 40, 0.08), transparent 50%),
|
||||
radial-gradient(ellipse at 80% 100%, rgba(255, 255, 255, 0.03), transparent 60%);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
.about > .container { position: relative; z-index: 1; }
|
||||
.about__grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1.1fr 0.9fr;
|
||||
gap: 64px;
|
||||
align-items: center;
|
||||
}
|
||||
.bullets {
|
||||
list-style: none; padding: 0; margin: 24px 0 0;
|
||||
}
|
||||
.bullets li {
|
||||
position: relative;
|
||||
padding: 12px 0 12px 28px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
color: var(--txt-soft);
|
||||
font-size: 0.98rem;
|
||||
}
|
||||
.bullets li::before {
|
||||
content: "";
|
||||
position: absolute; left: 0; top: 18px;
|
||||
width: 14px; height: 2px; background: var(--red);
|
||||
}
|
||||
.bullets li strong { color: #fff; font-weight: 600; }
|
||||
|
||||
.card-stack {
|
||||
position: relative;
|
||||
aspect-ratio: 1;
|
||||
max-width: 460px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.card-stack__bg {
|
||||
position: absolute; inset: 12% -6% -6% 12%;
|
||||
background: linear-gradient(135deg, rgba(224, 40, 40, 0.18), rgba(224, 40, 40, 0.04));
|
||||
border: 1px solid rgba(224, 40, 40, 0.25);
|
||||
border-radius: var(--radius-lg);
|
||||
z-index: 1;
|
||||
}
|
||||
.card-stack__bg::after {
|
||||
content: ""; position: absolute; left: 0; right: 0; top: 50%;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, var(--red), transparent);
|
||||
}
|
||||
.card-stack__fg {
|
||||
position: absolute; inset: -4% 12% 12% -6%;
|
||||
background: var(--bg-3);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-lg);
|
||||
z-index: 2;
|
||||
padding: 28px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 18px;
|
||||
box-shadow: var(--shadow-lg);
|
||||
border-top: 4px solid var(--red);
|
||||
}
|
||||
.stat { text-align: left; }
|
||||
.stat span {
|
||||
display: block;
|
||||
font-family: 'Oswald', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: clamp(1.6rem, 3vw, 2rem);
|
||||
color: #fff;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
.stat p { margin: 4px 0 0; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--txt-mute); }
|
||||
|
||||
/* ============================================================
|
||||
PARALLAX BREAK
|
||||
============================================================ */
|
||||
.parallax-break {
|
||||
position: relative;
|
||||
min-height: 70vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
isolation: isolate;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 80px 24px;
|
||||
}
|
||||
.parallax-break {
|
||||
border-top: 1px solid var(--line);
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.parallax-break__bg {
|
||||
position: absolute;
|
||||
inset: -20% 0;
|
||||
z-index: -1;
|
||||
will-change: transform;
|
||||
background:
|
||||
radial-gradient(ellipse at center, rgba(224,40,40,0.22), transparent 60%),
|
||||
linear-gradient(180deg, #050505 0%, #000 50%, #050505 100%);
|
||||
}
|
||||
.parallax-break__bg::before {
|
||||
content: ""; position: absolute; inset: 0;
|
||||
background:
|
||||
radial-gradient(circle at 20% 30%, rgba(255,255,255,0.08), transparent 40%),
|
||||
radial-gradient(circle at 80% 70%, rgba(255,255,255,0.06), transparent 40%);
|
||||
}
|
||||
.parallax-break__quote p {
|
||||
font-family: 'Oswald', sans-serif;
|
||||
font-size: clamp(1.6rem, 4vw, 2.6rem);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.08em;
|
||||
margin: 0 0 12px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.parallax-break__quote span { letter-spacing: 0.4em; font-size: 0.75rem; color: rgba(255,255,255,0.6); text-transform: uppercase; }
|
||||
|
||||
.parallax-break--alt { min-height: auto; padding: 100px 0; text-align: left; }
|
||||
.parallax-break__bg--alt {
|
||||
background:
|
||||
linear-gradient(135deg, rgba(224,40,40,0.2) 0%, transparent 55%),
|
||||
linear-gradient(180deg, #050505 0%, #141414 100%);
|
||||
}
|
||||
.parallax-break__content { position: relative; z-index: 1; }
|
||||
.parallax-break__content h2.light { color: #fff; max-width: 22ch; }
|
||||
.guarantee {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 36px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
.guarantee h4 {
|
||||
margin: 0 0 8px;
|
||||
color: var(--red);
|
||||
font-size: 0.92rem;
|
||||
letter-spacing: 0.16em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.guarantee p { color: rgba(255,255,255,0.78); font-size: 0.95rem; margin: 0; }
|
||||
|
||||
/* ============================================================
|
||||
SPIDERS
|
||||
============================================================ */
|
||||
.spiders { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); }
|
||||
.grid { display: grid; gap: 28px; }
|
||||
.spiders__grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
}
|
||||
.spider {
|
||||
background: var(--bg-3);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
|
||||
display: flex; flex-direction: column;
|
||||
}
|
||||
.spider:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: var(--shadow-lg), var(--glow-red);
|
||||
border-color: rgba(224, 40, 40, 0.4);
|
||||
}
|
||||
.spider__img {
|
||||
aspect-ratio: 4 / 3;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.spider__img::after {
|
||||
content: ""; position: absolute; inset: 0;
|
||||
background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.4) 100%);
|
||||
}
|
||||
/* Generated illustrative gradient backgrounds (no external images) */
|
||||
.spider__img--regius {
|
||||
background:
|
||||
radial-gradient(circle at 50% 60%, #2a1a1a 0%, #0d0d0d 70%),
|
||||
linear-gradient(135deg, #3a2222 0%, #0d0d0d 100%);
|
||||
background-blend-mode: screen;
|
||||
}
|
||||
.spider__img--regius::before {
|
||||
content: ""; position: absolute; inset: 0;
|
||||
background:
|
||||
radial-gradient(circle at 50% 55%, #b85040 0%, transparent 25%),
|
||||
radial-gradient(circle at 42% 50%, #1a1a1a 0%, transparent 6%),
|
||||
radial-gradient(circle at 58% 50%, #1a1a1a 0%, transparent 6%);
|
||||
}
|
||||
.spider__img--audax {
|
||||
background:
|
||||
radial-gradient(circle at 50% 60%, #1a1a1a 0%, #000 70%);
|
||||
}
|
||||
.spider__img--audax::before {
|
||||
content: ""; position: absolute; inset: 0;
|
||||
background:
|
||||
radial-gradient(circle at 50% 70%, #ffffff 0%, transparent 8%),
|
||||
radial-gradient(circle at 50% 75%, #ffffff 0%, transparent 5%),
|
||||
radial-gradient(circle at 50% 80%, #ffffff 0%, transparent 4%),
|
||||
radial-gradient(circle at 42% 52%, #ffffff 0%, transparent 4%),
|
||||
radial-gradient(circle at 58% 52%, #ffffff 0%, transparent 4%);
|
||||
}
|
||||
.spider__img--otiosus {
|
||||
background:
|
||||
radial-gradient(circle at 50% 55%, #4a3a2a 0%, #1a1410 70%);
|
||||
}
|
||||
.spider__img--otiosus::before {
|
||||
content: ""; position: absolute; inset: 0;
|
||||
background:
|
||||
radial-gradient(circle at 45% 48%, #1a1a1a 0%, transparent 5%),
|
||||
radial-gradient(circle at 55% 48%, #1a1a1a 0%, transparent 5%),
|
||||
radial-gradient(circle at 50% 65%, #d8a878 0%, transparent 18%);
|
||||
}
|
||||
.spider__img--mystaceus {
|
||||
background:
|
||||
radial-gradient(circle at 50% 55%, #5a4a3a 0%, #2a201a 70%);
|
||||
}
|
||||
.spider__img--mystaceus::before {
|
||||
content: ""; position: absolute; inset: 0;
|
||||
background:
|
||||
radial-gradient(circle at 50% 60%, #e0d0b0 0%, transparent 25%),
|
||||
radial-gradient(circle at 44% 50%, #1a1a1a 0%, transparent 5%),
|
||||
radial-gradient(circle at 56% 50%, #1a1a1a 0%, transparent 5%);
|
||||
}
|
||||
.spider__body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
|
||||
.spider__body h3 {
|
||||
font-family: 'Oswald', sans-serif;
|
||||
font-size: 1.2rem;
|
||||
font-style: italic;
|
||||
text-transform: none;
|
||||
letter-spacing: 0.01em;
|
||||
margin: 0 0 4px;
|
||||
}
|
||||
.spider__tag { color: var(--red); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 16px; }
|
||||
.spider__meta { list-style: none; padding: 0; margin: 0 0 18px; font-size: 0.88rem; color: var(--txt-soft); }
|
||||
.spider__meta li { padding: 4px 0; border-bottom: 1px dashed var(--line); }
|
||||
.spider__meta li:last-child { border-bottom: 0; }
|
||||
.spider__foot {
|
||||
margin-top: auto;
|
||||
display: flex; align-items: center; justify-content: space-between; gap: 12px;
|
||||
padding-top: 14px;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
.price { font-family: 'Oswald', sans-serif; font-size: 1.4rem; font-weight: 700; color: #fff; }
|
||||
.price::before { content: ""; display: inline-block; width: 10px; height: 2px; background: var(--red); vertical-align: middle; margin-right: 8px; }
|
||||
|
||||
/* ============================================================
|
||||
CARE
|
||||
============================================================ */
|
||||
.care { background: var(--bg); }
|
||||
.care__grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
|
||||
.care__card {
|
||||
background: var(--bg-3);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
padding: 32px 28px 30px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
|
||||
border-left: 3px solid transparent;
|
||||
}
|
||||
.care__card:hover {
|
||||
transform: translateY(-6px);
|
||||
box-shadow: var(--shadow-md);
|
||||
border-left-color: var(--red);
|
||||
border-top-color: var(--line-2);
|
||||
border-right-color: var(--line-2);
|
||||
border-bottom-color: var(--line-2);
|
||||
background: var(--bg-4);
|
||||
}
|
||||
.care__num {
|
||||
font-family: 'Oswald', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 3rem;
|
||||
color: rgba(224, 40, 40, 0.22);
|
||||
position: absolute;
|
||||
top: 8px; right: 18px;
|
||||
line-height: 1;
|
||||
}
|
||||
.care__card h3 { margin: 0 0 10px; font-size: 1rem; }
|
||||
.care__card p { color: var(--txt-soft); font-size: 0.95rem; margin: 0; }
|
||||
|
||||
/* ============================================================
|
||||
CONTACT
|
||||
============================================================ */
|
||||
.contact { background: var(--bg-2); position: relative; overflow: hidden; }
|
||||
.contact::before {
|
||||
content: ""; position: absolute; inset: 0;
|
||||
background: radial-gradient(ellipse at 80% 50%, rgba(224, 40, 40, 0.08), transparent 50%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.contact > .container { position: relative; z-index: 1; }
|
||||
.contact__grid {
|
||||
display: grid;
|
||||
grid-template-columns: 0.9fr 1.1fr;
|
||||
gap: 56px;
|
||||
align-items: start;
|
||||
}
|
||||
.contact__list {
|
||||
list-style: none; padding: 0; margin: 28px 0 0;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.contact__list li {
|
||||
display: flex; align-items: center; gap: 14px;
|
||||
padding: 14px 0;
|
||||
border-bottom: 1px solid var(--line);
|
||||
color: var(--txt-soft);
|
||||
}
|
||||
.contact__list li:last-child { border-bottom: 0; }
|
||||
.ico {
|
||||
width: 32px; height: 32px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--red);
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
}
|
||||
.ico--user::after {
|
||||
content: ""; width: 14px; height: 14px;
|
||||
background:
|
||||
radial-gradient(circle at 50% 35%, var(--red) 0 4px, transparent 5px),
|
||||
radial-gradient(ellipse at 50% 100%, var(--red) 0 5px, transparent 6px);
|
||||
}
|
||||
.ico--phone::after {
|
||||
content: ""; width: 14px; height: 14px;
|
||||
background: var(--red);
|
||||
-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M6.6 10.8c1.4 2.8 3.7 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1-9.4 0-17-7.6-17-17 0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.6.1.4 0 .7-.2 1L6.6 10.8z'/></svg>") center/contain no-repeat;
|
||||
mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M6.6 10.8c1.4 2.8 3.7 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1-9.4 0-17-7.6-17-17 0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.2.2 2.4.6 3.6.1.4 0 .7-.2 1L6.6 10.8z'/></svg>") center/contain no-repeat;
|
||||
}
|
||||
.ico--mail::after {
|
||||
content: ""; width: 14px; height: 10px;
|
||||
border: 2px solid var(--red);
|
||||
border-radius: 1px;
|
||||
position: relative;
|
||||
}
|
||||
.ico--mail::before {
|
||||
content: ""; position: absolute; width: 10px; height: 1px;
|
||||
background: var(--red);
|
||||
transform: rotate(0);
|
||||
top: 50%; left: 50%;
|
||||
transform: translate(-50%, -3px) rotate(0);
|
||||
}
|
||||
|
||||
.contact__form {
|
||||
background: var(--bg-3);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 36px;
|
||||
box-shadow: var(--shadow-md);
|
||||
border-top: 4px solid var(--red);
|
||||
}
|
||||
.contact__form label {
|
||||
display: block;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.contact__form span {
|
||||
display: block;
|
||||
font-size: 0.78rem;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: var(--txt-mute);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.contact__form input,
|
||||
.contact__form textarea {
|
||||
width: 100%;
|
||||
padding: 14px 16px;
|
||||
border: 1.5px solid var(--line-2);
|
||||
border-radius: 10px;
|
||||
background: var(--bg);
|
||||
font: inherit;
|
||||
color: #fff;
|
||||
transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
|
||||
}
|
||||
.contact__form input::placeholder,
|
||||
.contact__form textarea::placeholder { color: var(--txt-mute); }
|
||||
.contact__form input:focus,
|
||||
.contact__form textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--red);
|
||||
background: var(--ink);
|
||||
box-shadow: 0 0 0 3px rgba(224, 40, 40, 0.18);
|
||||
}
|
||||
.contact__form textarea { resize: vertical; }
|
||||
.form__success {
|
||||
margin-top: 14px;
|
||||
padding: 12px 14px;
|
||||
background: rgba(40, 180, 100, 0.12);
|
||||
border-left: 3px solid #34d77a;
|
||||
color: #6fe5a3;
|
||||
font-size: 0.9rem;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
FOOTER
|
||||
============================================================ */
|
||||
.footer {
|
||||
background: var(--ink);
|
||||
color: rgba(255,255,255,0.7);
|
||||
padding: 60px 0 30px;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
.footer__inner {
|
||||
display: grid;
|
||||
grid-template-columns: 1.4fr 1fr;
|
||||
gap: 40px;
|
||||
align-items: center;
|
||||
}
|
||||
.footer__brand { display: flex; align-items: center; gap: 16px; }
|
||||
.footer__brand .nav__logo { width: 48px; height: 48px; }
|
||||
.footer__name {
|
||||
font-family: 'Oswald', sans-serif;
|
||||
font-size: 1.3rem;
|
||||
letter-spacing: 0.06em;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
}
|
||||
.footer__name .accent { color: var(--red); }
|
||||
.footer__sub { color: var(--red); font-size: 0.85rem; margin-left: 4px; }
|
||||
.footer__tag { font-size: 0.72rem; letter-spacing: 0.36em; color: rgba(255,255,255,0.5); margin: 4px 0 0; text-transform: uppercase; }
|
||||
.footer__links { display: flex; gap: 24px; justify-content: flex-end; flex-wrap: wrap; }
|
||||
.footer__links a {
|
||||
color: rgba(255,255,255,0.7);
|
||||
font-size: 0.85rem;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
transition: color 0.2s var(--ease);
|
||||
}
|
||||
.footer__links a:hover { color: var(--red); }
|
||||
.footer__copy {
|
||||
grid-column: 1 / -1;
|
||||
margin: 30px 0 0;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid rgba(255,255,255,0.08);
|
||||
font-size: 0.8rem;
|
||||
text-align: center;
|
||||
color: rgba(255,255,255,0.4);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
REVEAL
|
||||
============================================================ */
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
|
||||
}
|
||||
.reveal.is-visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
RESPONSIVE
|
||||
============================================================ */
|
||||
@media (max-width: 960px) {
|
||||
.section { padding: 80px 0; }
|
||||
.about__grid,
|
||||
.contact__grid { grid-template-columns: 1fr; gap: 40px; }
|
||||
.guarantee { grid-template-columns: 1fr; gap: 24px; }
|
||||
.footer__inner { grid-template-columns: 1fr; text-align: center; }
|
||||
.footer__brand { justify-content: center; }
|
||||
.footer__links { justify-content: center; }
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.nav__links {
|
||||
position: fixed;
|
||||
top: 0; right: 0;
|
||||
height: 100vh;
|
||||
width: min(80%, 320px);
|
||||
background: rgba(13, 13, 13, 0.98);
|
||||
backdrop-filter: blur(10px);
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
padding: 80px 36px;
|
||||
gap: 28px;
|
||||
transform: translateX(100%);
|
||||
transition: transform 0.35s var(--ease);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
.nav__links.is-open { transform: translateX(0); }
|
||||
.nav__links a { font-size: 1.1rem; }
|
||||
.nav__burger { display: flex; z-index: 60; }
|
||||
.hero__content { padding-top: 110px; }
|
||||
.card-stack__fg { padding: 22px; gap: 14px; }
|
||||
.contact__form { padding: 26px 22px; }
|
||||
.parallax-break__quote p { letter-spacing: 0.04em; }
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.section { padding: 64px 0; }
|
||||
.hero__cta { flex-direction: column; align-items: stretch; }
|
||||
.hero__cta .btn { width: 100%; }
|
||||
.stat span { font-size: 1.5rem; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
[data-parallax] { transform: none !important; }
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 245 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 226 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: 217 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 468 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 182 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 516 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: 732 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 154 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 150 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 887 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 847 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 631 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 683 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 724 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 879 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 857 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 310 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 292 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 439 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 403 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 704 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 705 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 749 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 739 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 887 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 849 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 780 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 971 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
@@ -0,0 +1,10 @@
|
||||
Fern (otiosus) pic 1-3
|
||||
Cleo (audax) pic 4-6
|
||||
Colette (regius) 7-9
|
||||
Demure (regius) 10-12
|
||||
Devine (regius) 13-15
|
||||
Delight (regius) 16-18
|
||||
Dove (regius) 19-21
|
||||
Inca (regius) 22-24
|
||||
Latte (regius) 25-28
|
||||
Lush (regius) 29-31
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 192 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 180 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 547 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 344 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 579 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 441 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 570 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 674 KiB |
@@ -0,0 +1,3 @@
|
||||
Adult males don’t live long so these would be $25 also
|
||||
First (6) is Nashville and he loves to dance for the camera 🕺
|
||||
Next 6 are Ivan and he loves to show off and look intimidating 😂
|
||||
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; }
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 238 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user