initial build
This commit is contained in:
Jason Stedwell
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; }
|
||||
}
|
||||
Reference in New Issue
Block a user