From 1a5bb4e6c9cb12b499d3bc4d417e200e6a398dcd Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 3 Jun 2026 08:54:45 +0000 Subject: [PATCH] Add high-end AutoGas Pro LPG conversion website Full static website for an LPG vehicle conversion company, featuring: - Hero section with animated orbs, counter stats, and dual CTAs - Trust bar with certifications (SANS 347, SABS, 5-yr warranty) - Benefits grid with animated progress bars (6 key LPG advantages) - Services section (passenger, light/heavy commercial, maintenance) - 4-step conversion process timeline - Interactive savings calculator (live cost comparison, payback period) - Fleet solutions section with floating stats cards - Testimonials grid with star ratings - FAQ accordion - Contact form with validation feedback - Sticky nav with mobile hamburger menu - Scroll-triggered reveal animations throughout - Dark premium design: DM Serif Display + Inter, green accent (#22c55e) - Fully responsive (desktop, tablet, mobile) https://claude.ai/code/session_01AVuMbRnokq1zpDrV1DsvGZ --- index.html | 648 +++++++++++++++++++++++++++++++++++ script.js | 158 +++++++++ styles.css | 989 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 1795 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 styles.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..7dfde5a --- /dev/null +++ b/index.html @@ -0,0 +1,648 @@ + + + + + + AutoGas Pro — LPG Vehicle Conversions + + + + + + + + + + + + +
+
+
+
+
+
+
+
+
Certified LPG Specialists
+

+ Drive Further.
+ Spend Less.
+ Breathe Easier. +

+

+ South Africa's most trusted LPG vehicle conversion specialists.
+ Cut fuel costs by up to 50%, reduce your carbon footprint, and keep every bit of your vehicle's performance. +

+
+ Get a Free Quote + See How It Works +
+
+
+ 0 + Vehicles Converted +
+
+
+ 0% + Avg. Fuel Savings +
+
+
+ 0 + Years Experience +
+
+
+
+ Scroll +
+
+
+ + +
+
+
+
+ + SANS 347 Certified +
+
+ + SABS Approved Kits +
+
+ + 5-Year Warranty +
+
+ + Roadworthy Certificate Included +
+
+ + Nationwide Service Network +
+
+
+
+ + +
+
+
+
Why LPG
+

The smarter fuel.
Every single drive.

+

Liquid Petroleum Gas isn't a compromise — it's an upgrade. Your engine runs cleaner, your wallet stays fuller, and the planet thanks you for it.

+
+ +
+
+
+ +
+

Up to 50% Cost Savings

+

LPG consistently costs 40–50% less per litre than petrol. The conversion pays for itself in months, not years.

+
+ 50% cheaper per km +
+ +
+
+ +
+

Reduced CO₂ Emissions

+

LPG produces up to 15% less CO₂ than petrol and virtually no particulate matter — cleaner air for everyone.

+
+ 15% fewer emissions +
+ +
+
+ +
+

Full Performance Retained

+

Our sequential injection systems match petrol performance. No loss of power, acceleration, or drivability.

+
+ 98% performance parity +
+ +
+
+ +
+

Dual-Fuel Flexibility

+

Seamlessly switch between LPG and petrol with a single button press. No compromise. Complete freedom.

+
+ Full dual-fuel capability +
+ +
+
+ +
+

Longer Engine Life

+

LPG burns cleaner, reducing carbon build-up. Engines last longer with less wear between service intervals.

+
+ 30% less engine wear +
+ +
+
+ +
+

Quieter Operation

+

LPG combustion is inherently smoother and quieter, giving your cabin a noticeably more refined driving experience.

+
+ Measurably quieter cabin +
+
+
+
+ + +
+
+
+
Services
+

Conversions for every vehicle.

+

From compact sedans to heavy-duty commercial fleets — we have a certified solution for every application.

+
+ +
+
+
01
+
+

Passenger Vehicles

+

Sedans, hatchbacks, SUVs, and MPVs. Sequential injection systems perfectly tuned to your engine's management.

+
    +
  • Carbureted & fuel-injected engines
    • +
  • 4-cylinder to V8 configurations
    • +
  • OEM-quality toroidal tanks
    • +
  • Full electrical integration
    • +
+ Request Conversion → +
+
+ +
+
02
+
+

Light Commercial

+

Bakkies, vans, and minibuses running high mileage routes — precisely where LPG delivers the greatest return.

+
    +
  • High-cycle taxi & shuttle fleets
    • +
  • Delivery & courier vehicles
    • +
  • Pickup trucks & panel vans
    • +
  • Fleet bulk-pricing available
    • +
+ Request Conversion → +
+
+ +
+
03
+
+

Heavy Commercial

+

Trucks and heavy-duty vehicles consuming large fuel volumes — our dual-fuel systems deliver serious savings at scale.

+
    +
  • Large displacement diesels & petrol
    • +
  • Bi-fuel diesel/LPG mixing systems
    • +
  • High-pressure extended-range tanks
    • +
  • Fleet telematics integration
    • +
+ Request Conversion → +
+
+ +
+
04
+
+

Service & Maintenance

+

Annual inspections, safety certification renewals, and system tune-ups to keep your conversion running optimally.

+
    +
  • Annual LPG system inspection
    • +
  • Injector cleaning & calibration
    • +
  • Tank pressure testing
    • +
  • Roadworthy renewals
    • +
+ Book Service → +
+
+
+
+
+ + +
+
+
+
The Process
+

From assessment
to open road in 4 steps.

+
+ +
+
+
01
+
+

Free Vehicle Assessment

+

Our technicians inspect your vehicle and confirm LPG suitability. We check the engine, electrics, and undercarriage — at no cost to you.

+
+
+
+
+
02
+
+

Custom Quote & Kit Selection

+

We recommend the right kit for your vehicle, driving patterns, and budget. Transparent pricing — no hidden costs, no surprises.

+
+
+
+
+
03
+
+

Professional Installation

+

Our SANS 347-certified technicians fit your system in a single day. Every installation is dyno-tested and mapped before handover.

+
+
+
+
+
04
+
+

Certification & Handover

+

We issue your NRCS/DoT compliance certificate, roadworthy documentation, and full warranty — then walk you through every control.

+
+
+
+
+
+ + +
+
+
+
+
Savings Calculator
+

See what you'll
actually save.

+

Enter your current driving habits and we'll calculate your real-world savings after converting to LPG.

+
+
+
+
+ +
+ + 3,000 km +
+
+
+ +
+ + 10 L/100km +
+
+
+ +
+ + R24.00/L +
+
+
+
+ Current monthly fuel cost + R720 +
+
+ Monthly cost on LPG + R360 +
+
+ Monthly saving + R360 +
+
+ Estimated payback period + ~10 months +
+
+ Lock In These Savings +
+
+
+
+
+ + +
+
+
+
+
+
12
+
vehicles in fleet
+
+
+
R186k
+
saved annually
+
+
+
14 mo
+
full payback
+
+
FLEET
+
+
+
Fleet Solutions
+

Enterprise-grade
conversion at scale.

+

Running 5 or more vehicles? Our fleet programme delivers dedicated account management, volume pricing, staggered scheduling, and performance reporting — purpose-built for serious operators.

+
    +
  • + + Volume-discounted conversion pricing +
    • +
  • + + Dedicated fleet account manager +
    • +
  • + + Priority workshop scheduling — zero downtime +
    • +
  • + + Quarterly savings & emissions reporting +
    • +
  • + + On-site conversions available nationally +
    • +
+ Talk to Fleet Sales +
+
+
+
+ + +
+
+
+
Testimonials
+

Trusted by thousands
of South African drivers.

+
+
+
+
★★★★★
+

"I was sceptical about LPG but AutoGas Pro's assessment convinced me. My VW Tiguan now costs half what it used to fill up. The installation was spotless and done in one day."

+
+
TM
+
+ Thabo Molefe + Johannesburg — VW Tiguan 2.0 TSI +
+
+
+
+
★★★★★
+

"We run 18 delivery bakkies. Since the fleet conversion our monthly fuel bill dropped by R220,000. The ROI was faster than any investment we've made in the business."

+
+
KD
+
+ Karen de Bruyn + Cape Town — Fleet Manager, 18 vehicles +
+
+
+
+
★★★★★
+

"The car runs smoother on LPG than it ever did on petrol. No power loss, quieter engine. I paid the conversion off in 8 months — now it's pure profit every time I fill up."

+
+
SR
+
+ Sipho Radebe + Durban — Toyota Fortuner 4.0 V6 +
+
+
+
+
+
+ + +
+
+
+
+
FAQ
+

Common questions,
straight answers.

+

Still have a question? Our technical team is on standby.

+ Ask Our Team +
+
+
+ +
Yes. LPG conversions are fully legal when performed by a SANS 347-certified installer using SABS-approved equipment. We handle all compliance documentation and NRCS registration as part of every installation.
+
+
+ +
Our systems are installed non-destructively and can be removed without trace. Under the Consumer Protection Act, a manufacturer can only void the warranty on items directly affected by the modification — not your entire warranty. We provide full documentation to support any manufacturer engagement.
+
+
+ +
Most passenger vehicle conversions are completed within one business day. Commercial vehicle installations may take 1–2 days depending on complexity. We provide a courtesy vehicle or drop/collect service for customer convenience.
+
+
+ +
LPG tanks are built to withstand impacts far exceeding petrol tank standards. They're fitted with automatic shut-off valves, pressure relief systems, and excess-flow protection. Statistically, LPG vehicles have an excellent safety record — often safer than conventional petrol vehicles.
+
+
+ +
South Africa has a rapidly growing LPG refuelling network. We provide a complete refuelling station map at handover. Your vehicle also retains its petrol capability as a backup — meaning you're never stranded, even in remote areas.
+
+
+ +
Every conversion carries a 5-year/unlimited-kilometre warranty on the LPG system hardware, and a 2-year workmanship warranty. Warranty service is available through our nationwide partner network.
+
+
+
+
+
+ + +
+
+
+
+
Get in Touch
+

Start saving
from day one.

+

Book your free vehicle assessment and get a no-obligation quote within 24 hours.

+
+
+ + 12 Combustion Park, Boksburg, 1459 +
+
+ + info@autogaspro.co.za +
+
+ + +27 11 826 4400 +
+
+
+
+
+
+
+ + +
+
+ + +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +

We'll respond within one business day. No spam, ever.

+
+
+
+
+
+ + + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..5994330 --- /dev/null +++ b/script.js @@ -0,0 +1,158 @@ +/* ─── Nav scroll state ─── */ +const nav = document.getElementById('nav'); +window.addEventListener('scroll', () => { + nav.classList.toggle('scrolled', window.scrollY > 20); +}, { passive: true }); + +/* ─── Mobile menu ─── */ +const hamburger = document.getElementById('hamburger'); +const mobileMenu = document.getElementById('mobileMenu'); + +hamburger.addEventListener('click', () => { + const open = mobileMenu.classList.toggle('open'); + hamburger.setAttribute('aria-expanded', open); +}); + +mobileMenu.querySelectorAll('a').forEach(link => { + link.addEventListener('click', () => mobileMenu.classList.remove('open')); +}); + +/* ─── Reveal on scroll ─── */ +const revealObserver = new IntersectionObserver((entries) => { + entries.forEach(e => { + if (e.isIntersecting) { + e.target.classList.add('visible'); + revealObserver.unobserve(e.target); + } + }); +}, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' }); + +document.querySelectorAll('.reveal').forEach(el => revealObserver.observe(el)); + +/* ─── Counter animation ─── */ +function animateCounter(el, target, duration = 1800) { + const suffix = el.nextElementSibling?.classList.contains('hero__stat-suffix') + ? el.nextElementSibling + : null; + let start = null; + const step = (ts) => { + if (!start) start = ts; + const progress = Math.min((ts - start) / duration, 1); + const eased = 1 - Math.pow(1 - progress, 3); + const value = Math.floor(eased * target); + el.textContent = target >= 1000 ? value.toLocaleString() : value; + if (progress < 1) requestAnimationFrame(step); + else el.textContent = target >= 1000 ? target.toLocaleString() : target; + }; + requestAnimationFrame(step); +} + +const statObserver = new IntersectionObserver((entries) => { + entries.forEach(e => { + if (e.isIntersecting) { + const target = parseInt(e.target.dataset.count, 10); + animateCounter(e.target, target); + statObserver.unobserve(e.target); + } + }); +}, { threshold: 0.5 }); + +document.querySelectorAll('[data-count]').forEach(el => statObserver.observe(el)); + +/* ─── Savings calculator ─── */ +const kmInput = document.getElementById('kmInput'); +const consInput = document.getElementById('consInput'); +const priceInput = document.getElementById('priceInput'); +const kmVal = document.getElementById('kmVal'); +const consVal = document.getElementById('consVal'); +const priceVal = document.getElementById('priceVal'); + +const LPG_PRICE_RATIO = 0.5; // LPG costs ~50% of petrol price +const LPG_CONS_RATIO = 1.15; // LPG uses ~15% more volume per km +const CONVERSION_COST = 14000; // avg conversion cost in ZAR + +function fmt(num) { return 'R' + Math.round(num).toLocaleString('en-ZA'); } + +function calcSavings() { + const km = parseInt(kmInput.value, 10); + const cons = parseFloat(consInput.value); + const price = parseFloat(priceInput.value); + + const petrolMonthly = (km / 100) * cons * price; + const lpgPricePerL = price * LPG_PRICE_RATIO; + const lpgConsPerKm = cons * LPG_CONS_RATIO; + const lpgMonthly = (km / 100) * lpgConsPerKm * lpgPricePerL; + const saving = petrolMonthly - lpgMonthly; + const paybackMonths = saving > 0 ? Math.ceil(CONVERSION_COST / saving) : 0; + + document.getElementById('currentCost').textContent = fmt(petrolMonthly); + document.getElementById('lpgCost').textContent = fmt(lpgMonthly); + document.getElementById('monthlySaving').textContent= fmt(saving); + document.getElementById('paybackPeriod').textContent = + paybackMonths > 0 ? `~${paybackMonths} months` : 'N/A'; + + updateSliderFill(kmInput); + updateSliderFill(consInput); + updateSliderFill(priceInput); +} + +function updateSliderFill(input) { + const min = parseFloat(input.min); + const max = parseFloat(input.max); + const val = parseFloat(input.value); + const pct = ((val - min) / (max - min)) * 100; + input.style.background = `linear-gradient(90deg, var(--c-green) ${pct}%, var(--c-bg-3) ${pct}%)`; +} + +kmInput.addEventListener('input', () => { + kmVal.textContent = parseInt(kmInput.value).toLocaleString() + ' km'; + calcSavings(); +}); +consInput.addEventListener('input', () => { + consVal.textContent = parseFloat(consInput.value).toFixed(1) + ' L/100km'; + calcSavings(); +}); +priceInput.addEventListener('input', () => { + priceVal.textContent = 'R' + parseFloat(priceInput.value).toFixed(2) + '/L'; + calcSavings(); +}); + +calcSavings(); // initial render + +/* ─── FAQ accordion ─── */ +document.querySelectorAll('.faq-item__q').forEach(btn => { + btn.addEventListener('click', () => { + const item = btn.closest('.faq-item'); + const isOpen = item.dataset.open === 'true'; + document.querySelectorAll('.faq-item').forEach(i => i.dataset.open = 'false'); + item.dataset.open = isOpen ? 'false' : 'true'; + }); +}); + +/* ─── Contact form ─── */ +const contactForm = document.getElementById('contactForm'); +contactForm.addEventListener('submit', (e) => { + e.preventDefault(); + const btn = contactForm.querySelector('.form__submit'); + btn.textContent = 'Request Sent!'; + btn.style.background = '#16a34a'; + btn.disabled = true; + setTimeout(() => { + btn.textContent = 'Send My Request'; + btn.style.background = ''; + btn.disabled = false; + contactForm.reset(); + }, 4000); +}); + +/* ─── Smooth scroll for nav links ─── */ +document.querySelectorAll('a[href^="#"]').forEach(a => { + a.addEventListener('click', e => { + const target = document.querySelector(a.getAttribute('href')); + if (!target) return; + e.preventDefault(); + const navH = nav.offsetHeight; + const top = target.getBoundingClientRect().top + window.scrollY - navH - 16; + window.scrollTo({ top, behavior: 'smooth' }); + }); +}); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..67aa0df --- /dev/null +++ b/styles.css @@ -0,0 +1,989 @@ +/* ─── Reset & Base ─── */ +*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } + +:root { + --c-bg: #080c10; + --c-bg-2: #0d1117; + --c-bg-3: #131920; + --c-surface: #161d26; + --c-border: rgba(255,255,255,0.08); + --c-green: #22c55e; + --c-green-dim: rgba(34,197,94,0.12); + --c-green-glow:rgba(34,197,94,0.25); + --c-text: #f0f4f8; + --c-text-2: #8b98a8; + --c-text-3: #4a5568; + --r-card: 16px; + --r-btn: 10px; + --max-w: 1200px; + --trans: 0.35s cubic-bezier(0.4,0,0.2,1); +} + +html { scroll-behavior: smooth; font-size: 16px; } + +body { + background: var(--c-bg); + color: var(--c-text); + font-family: 'Inter', system-ui, sans-serif; + line-height: 1.6; + -webkit-font-smoothing: antialiased; + overflow-x: hidden; +} + +img { max-width: 100%; display: block; } +a { text-decoration: none; color: inherit; } +button { cursor: pointer; background: none; border: none; } +ul { list-style: none; } + +/* ─── Scrollbar ─── */ +::-webkit-scrollbar { width: 6px; } +::-webkit-scrollbar-track { background: var(--c-bg); } +::-webkit-scrollbar-thumb { background: var(--c-surface); border-radius: 3px; } + +/* ─── Utilities ─── */ +.container { max-width: var(--max-w); margin: 0 auto; padding: 0 2rem; } +.section { padding: 7rem 0; } +.section--alt { background: var(--c-bg-2); } +.desktop-br { display: block; } + +/* ─── Reveal animations ─── */ +.reveal { + opacity: 0; + transform: translateY(28px); + transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); +} +.reveal.visible { + opacity: 1; + transform: translateY(0); +} +.reveal--delay-1 { transition-delay: 0.1s; } +.reveal--delay-2 { transition-delay: 0.2s; } +.reveal--delay-3 { transition-delay: 0.3s; } +.reveal--delay-4 { transition-delay: 0.4s; } + +/* ─── Buttons ─── */ +.btn { + display: inline-flex; + align-items: center; + gap: 0.5rem; + padding: 0.8rem 1.6rem; + border-radius: var(--r-btn); + font-size: 0.9rem; + font-weight: 600; + letter-spacing: 0.01em; + transition: var(--trans); + white-space: nowrap; +} +.btn--primary { + background: var(--c-green); + color: #000; +} +.btn--primary:hover { + background: #16a34a; + transform: translateY(-1px); + box-shadow: 0 8px 24px var(--c-green-glow); +} +.btn--ghost { + color: var(--c-text); + border: 1px solid var(--c-border); + background: transparent; +} +.btn--ghost:hover { + border-color: var(--c-green); + color: var(--c-green); + background: var(--c-green-dim); +} +.btn--nav { + background: var(--c-green); + color: #000; + padding: 0.55rem 1.25rem; + font-size: 0.85rem; +} +.btn--nav:hover { background: #16a34a; } + +/* ─── Section shared ─── */ +.section__header { + text-align: center; + margin-bottom: 4rem; +} +.section__tag { + display: inline-block; + background: var(--c-green-dim); + color: var(--c-green); + border: 1px solid rgba(34,197,94,0.2); + padding: 0.3rem 0.9rem; + border-radius: 100px; + font-size: 0.78rem; + font-weight: 600; + letter-spacing: 0.08em; + text-transform: uppercase; + margin-bottom: 1.25rem; +} +.section__title { + font-family: 'DM Serif Display', Georgia, serif; + font-size: clamp(2rem, 4vw, 3rem); + line-height: 1.15; + color: var(--c-text); + margin-bottom: 1rem; +} +.section__sub { + font-size: 1.05rem; + color: var(--c-text-2); + max-width: 600px; + margin: 0 auto; +} + +/* ─── NAV ─── */ +.nav { + position: fixed; + top: 0; left: 0; right: 0; + z-index: 100; + transition: background 0.4s, backdrop-filter 0.4s, border-color 0.4s; + border-bottom: 1px solid transparent; +} +.nav.scrolled { + background: rgba(8,12,16,0.85); + backdrop-filter: blur(16px); + border-bottom-color: var(--c-border); +} +.nav__inner { + max-width: var(--max-w); + margin: 0 auto; + padding: 1.25rem 2rem; + display: flex; + align-items: center; + gap: 3rem; +} +.nav__logo { + display: flex; + align-items: center; + gap: 0.6rem; + font-weight: 700; + font-size: 1.05rem; + letter-spacing: -0.01em; + flex-shrink: 0; +} +.nav__links { + display: flex; + gap: 2rem; + flex: 1; +} +.nav__links a { + font-size: 0.88rem; + color: var(--c-text-2); + font-weight: 500; + transition: color var(--trans); +} +.nav__links a:hover { color: var(--c-text); } +.nav__hamburger { + display: none; + flex-direction: column; + gap: 5px; + margin-left: auto; + padding: 4px; +} +.nav__hamburger span { + display: block; + width: 22px; + height: 2px; + background: var(--c-text); + border-radius: 2px; + transition: var(--trans); +} +.nav__mobile { + display: none; + flex-direction: column; + padding: 1rem 2rem 1.5rem; + gap: 0.25rem; + background: rgba(8,12,16,0.95); + backdrop-filter: blur(16px); +} +.nav__mobile.open { display: flex; } +.nav__mobile-link { + display: block; + padding: 0.6rem 0; + color: var(--c-text-2); + font-size: 1rem; + font-weight: 500; + border-bottom: 1px solid var(--c-border); +} +.nav__mobile-link:hover { color: var(--c-green); } + +/* ─── HERO ─── */ +.hero { + min-height: 100svh; + display: flex; + align-items: center; + position: relative; + overflow: hidden; + padding: 8rem 2rem 5rem; +} +.hero__bg { + position: absolute; + inset: 0; + pointer-events: none; +} +.hero__gradient { + position: absolute; + inset: 0; + background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(34,197,94,0.1) 0%, transparent 60%), + radial-gradient(ellipse 60% 80% at 80% 50%, rgba(34,197,94,0.05) 0%, transparent 50%); +} +.hero__grid { + position: absolute; + inset: 0; + background-image: + linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), + linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px); + background-size: 60px 60px; + mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 70%); +} +.hero__orb { + position: absolute; + border-radius: 50%; + filter: blur(80px); + animation: orb-float 8s ease-in-out infinite; +} +.hero__orb--1 { + width: 500px; height: 500px; + background: radial-gradient(circle, rgba(34,197,94,0.15), transparent 70%); + top: -150px; right: -100px; + animation-delay: -3s; +} +.hero__orb--2 { + width: 400px; height: 400px; + background: radial-gradient(circle, rgba(34,197,94,0.08), transparent 70%); + bottom: 0; left: -100px; +} +@keyframes orb-float { + 0%,100% { transform: translate(0,0) scale(1); } + 50% { transform: translate(20px,-30px) scale(1.05); } +} +.hero__content { + max-width: var(--max-w); + margin: 0 auto; + width: 100%; + position: relative; + z-index: 1; +} +.hero__badge { + display: inline-flex; + align-items: center; + gap: 0.5rem; + background: var(--c-green-dim); + border: 1px solid rgba(34,197,94,0.25); + color: var(--c-green); + padding: 0.4rem 1rem; + border-radius: 100px; + font-size: 0.8rem; + font-weight: 600; + letter-spacing: 0.06em; + text-transform: uppercase; + margin-bottom: 2rem; +} +.hero__headline { + font-family: 'DM Serif Display', Georgia, serif; + font-size: clamp(3rem, 7vw, 5.5rem); + line-height: 1.05; + letter-spacing: -0.02em; + margin-bottom: 1.75rem; +} +.hero__headline em { + font-style: italic; + color: var(--c-green); +} +.hero__sub { + font-size: 1.15rem; + color: var(--c-text-2); + max-width: 560px; + margin-bottom: 2.5rem; + line-height: 1.7; +} +.hero__sub strong { color: var(--c-text); } +.hero__actions { + display: flex; + gap: 1rem; + flex-wrap: wrap; + margin-bottom: 4rem; +} +.hero__actions .btn { padding: 0.9rem 2rem; font-size: 0.95rem; } +.hero__stats { + display: flex; + align-items: center; + gap: 2.5rem; + flex-wrap: wrap; +} +.hero__stat { + display: flex; + flex-direction: column; +} +.hero__stat-num { + font-family: 'DM Serif Display', Georgia, serif; + font-size: 2.5rem; + line-height: 1; + color: var(--c-text); + display: inline; +} +.hero__stat-suffix { font-family: 'DM Serif Display', Georgia, serif; font-size: 2.5rem; line-height: 1; color: var(--c-green); } +.hero__stat-label { + font-size: 0.8rem; + color: var(--c-text-3); + font-weight: 500; + margin-top: 0.3rem; + text-transform: uppercase; + letter-spacing: 0.06em; +} +.hero__stat-divider { + width: 1px; + height: 40px; + background: var(--c-border); + flex-shrink: 0; +} +.hero__scroll-cue { + position: absolute; + bottom: 3rem; + left: 50%; + transform: translateX(-50%); + display: flex; + flex-direction: column; + align-items: center; + gap: 0.5rem; + font-size: 0.72rem; + letter-spacing: 0.12em; + text-transform: uppercase; + color: var(--c-text-3); + animation: scroll-cue 2s ease-in-out infinite; + z-index: 1; +} +.hero__scroll-line { + width: 1px; + height: 40px; + background: linear-gradient(to bottom, var(--c-text-3), transparent); +} +@keyframes scroll-cue { + 0%,100% { opacity: 0.4; transform: translateX(-50%) translateY(0); } + 50% { opacity: 1; transform: translateX(-50%) translateY(6px); } +} + +/* ─── TRUST BAR ─── */ +.trust { + background: var(--c-surface); + border-top: 1px solid var(--c-border); + border-bottom: 1px solid var(--c-border); + padding: 1.25rem 0; +} +.trust__inner { + display: flex; + align-items: center; + justify-content: center; + gap: 2.5rem; + flex-wrap: wrap; +} +.trust__item { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.82rem; + color: var(--c-text-2); + font-weight: 500; + white-space: nowrap; +} + +/* ─── BENEFITS GRID ─── */ +.benefits-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.5rem; +} +.benefit-card { + background: var(--c-surface); + border: 1px solid var(--c-border); + border-radius: var(--r-card); + padding: 2rem; + transition: border-color var(--trans), transform var(--trans), box-shadow var(--trans); +} +.benefit-card:hover { + border-color: rgba(34,197,94,0.3); + transform: translateY(-4px); + box-shadow: 0 16px 40px rgba(0,0,0,0.3); +} +.benefit-card__icon { + width: 52px; height: 52px; + background: var(--c-green-dim); + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 1.25rem; + border: 1px solid rgba(34,197,94,0.15); +} +.benefit-card h3 { + font-size: 1.05rem; + font-weight: 700; + margin-bottom: 0.6rem; +} +.benefit-card p { + font-size: 0.9rem; + color: var(--c-text-2); + line-height: 1.65; + margin-bottom: 1.25rem; +} +.benefit-card__bar { + height: 4px; + background: var(--c-border); + border-radius: 2px; + overflow: hidden; + margin-bottom: 0.5rem; +} +.benefit-card__fill { + height: 100%; + width: 0; + background: linear-gradient(90deg, var(--c-green), #4ade80); + border-radius: 2px; + transition: width 1.2s cubic-bezier(0.16,1,0.3,1) 0.3s; +} +.benefit-card.visible .benefit-card__fill { width: var(--fill); } +.benefit-card__stat { + font-size: 0.75rem; + color: var(--c-green); + font-weight: 600; + letter-spacing: 0.04em; +} + +/* ─── SERVICES ─── */ +.services { background: var(--c-bg-2); } +.services-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 1.5rem; +} +.service-card { + background: var(--c-surface); + border: 1px solid var(--c-border); + border-radius: var(--r-card); + padding: 2.5rem; + display: flex; + gap: 2rem; + transition: border-color var(--trans), transform var(--trans), box-shadow var(--trans); +} +.service-card:hover { + border-color: rgba(34,197,94,0.3); + transform: translateY(-3px); + box-shadow: 0 12px 36px rgba(0,0,0,0.25); +} +.service-card__num { + font-family: 'DM Serif Display', Georgia, serif; + font-size: 3rem; + line-height: 1; + color: var(--c-green); + opacity: 0.4; + flex-shrink: 0; +} +.service-card h3 { + font-size: 1.15rem; + font-weight: 700; + margin-bottom: 0.65rem; +} +.service-card p { + font-size: 0.9rem; + color: var(--c-text-2); + margin-bottom: 1.25rem; + line-height: 1.65; +} +.service-card__features { + display: flex; + flex-direction: column; + gap: 0.4rem; + margin-bottom: 1.5rem; +} +.service-card__features li { + font-size: 0.82rem; + color: var(--c-text-2); + padding-left: 1.1rem; + position: relative; +} +.service-card__features li::before { + content: ''; + position: absolute; + left: 0; top: 8px; + width: 5px; height: 5px; + border-radius: 50%; + background: var(--c-green); +} +.service-card__cta { + font-size: 0.88rem; + font-weight: 600; + color: var(--c-green); + display: inline-flex; + align-items: center; + gap: 0.3rem; + transition: gap var(--trans); +} +.service-card__cta:hover { gap: 0.6rem; } + +/* ─── PROCESS ─── */ +.process-steps { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 0; + position: relative; +} +.process-step { + position: relative; + padding: 2rem 2.5rem 2rem 0; +} +.process-step__num { + font-family: 'DM Serif Display', Georgia, serif; + font-size: 3.5rem; + color: var(--c-green); + opacity: 0.2; + line-height: 1; + margin-bottom: 1rem; +} +.process-step h3 { + font-size: 1rem; + font-weight: 700; + margin-bottom: 0.65rem; +} +.process-step p { + font-size: 0.88rem; + color: var(--c-text-2); + line-height: 1.65; +} +.process-step__connector { + position: absolute; + top: 2.5rem; + right: 0; + width: 2.5rem; + height: 1px; + background: linear-gradient(90deg, var(--c-border), var(--c-green)); +} + +/* ─── SAVINGS CALCULATOR ─── */ +.savings { background: var(--c-bg-2); } +.savings__inner { + display: grid; + grid-template-columns: 1fr 1.2fr; + gap: 6rem; + align-items: center; +} +.savings__left .section__title { text-align: left; } +.savings__left .section__sub { text-align: left; margin: 0; } +.calc { + background: var(--c-surface); + border: 1px solid var(--c-border); + border-radius: 20px; + padding: 2.5rem; +} +.calc__field { margin-bottom: 1.75rem; } +.calc__field label { + display: block; + font-size: 0.83rem; + font-weight: 600; + color: var(--c-text-2); + margin-bottom: 0.75rem; + letter-spacing: 0.01em; +} +.calc__range-wrap { + display: flex; + align-items: center; + gap: 1rem; +} +.calc__range { + flex: 1; + -webkit-appearance: none; + appearance: none; + height: 4px; + border-radius: 2px; + background: var(--c-bg-3); + outline: none; + cursor: pointer; +} +.calc__range::-webkit-slider-thumb { + -webkit-appearance: none; + width: 18px; height: 18px; + border-radius: 50%; + background: var(--c-green); + cursor: pointer; + box-shadow: 0 0 0 3px var(--c-green-dim); + transition: box-shadow var(--trans); +} +.calc__range::-webkit-slider-thumb:hover { + box-shadow: 0 0 0 6px var(--c-green-dim); +} +.calc__range-val { + font-size: 0.85rem; + font-weight: 700; + color: var(--c-green); + min-width: 90px; + text-align: right; +} +.calc__results { + background: var(--c-bg-3); + border-radius: 12px; + overflow: hidden; + border: 1px solid var(--c-border); +} +.calc__result { + display: flex; + align-items: center; + justify-content: space-between; + padding: 1rem 1.25rem; + border-bottom: 1px solid var(--c-border); +} +.calc__result:last-child { border-bottom: none; } +.calc__result-label { font-size: 0.85rem; color: var(--c-text-2); } +.calc__result-val { font-size: 1rem; font-weight: 700; color: var(--c-text); } +.calc__result--lpg .calc__result-val { color: #60a5fa; } +.calc__result--saving .calc__result-val { color: var(--c-green); font-size: 1.15rem; } +.calc__result--payback { background: var(--c-green-dim); } +.calc__result--payback .calc__result-val { color: var(--c-green); } + +/* ─── FLEET ─── */ +.fleet { background: var(--c-bg); } +.fleet__inner { + display: grid; + grid-template-columns: 1fr 1.1fr; + gap: 6rem; + align-items: center; +} +.fleet__visual { + position: relative; + height: 420px; +} +.fleet__bg-text { + position: absolute; + font-family: 'DM Serif Display', Georgia, serif; + font-size: 8rem; + color: var(--c-border); + font-weight: 900; + bottom: -1rem; + left: -1rem; + user-select: none; + pointer-events: none; + letter-spacing: -0.04em; +} +.fleet__card { + position: absolute; + background: var(--c-surface); + border: 1px solid var(--c-border); + border-radius: var(--r-card); + padding: 1.75rem 2rem; + min-width: 180px; + backdrop-filter: blur(8px); +} +.fleet__card--1 { top: 20px; left: 20px; } +.fleet__card--2 { + top: 50%; + left: 50%; + transform: translate(-50%,-50%); + background: var(--c-green-dim); + border-color: rgba(34,197,94,0.3); + z-index: 2; +} +.fleet__card--3 { bottom: 20px; right: 0; } +.fleet__card-num { + font-family: 'DM Serif Display', Georgia, serif; + font-size: 2.4rem; + line-height: 1; + color: var(--c-text); + margin-bottom: 0.35rem; +} +.fleet__card--2 .fleet__card-num { color: var(--c-green); } +.fleet__card-label { + font-size: 0.78rem; + color: var(--c-text-3); + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.06em; +} +.fleet__content .section__title { text-align: left; } +.fleet__content .section__sub { text-align: left; margin: 0 0 2rem; } +.fleet__list { + display: flex; + flex-direction: column; + gap: 0.75rem; + margin-bottom: 2.5rem; +} +.fleet__list li { + display: flex; + align-items: flex-start; + gap: 0.65rem; + font-size: 0.95rem; + color: var(--c-text-2); +} +.fleet__list svg { flex-shrink: 0; margin-top: 2px; } + +/* ─── TESTIMONIALS ─── */ +.testimonials { background: var(--c-bg-2); } +.testimonials-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.5rem; +} +.testimonial { + background: var(--c-surface); + border: 1px solid var(--c-border); + border-radius: var(--r-card); + padding: 2rem; + transition: border-color var(--trans), transform var(--trans); +} +.testimonial:hover { + border-color: rgba(34,197,94,0.25); + transform: translateY(-3px); +} +.testimonial__stars { color: #f59e0b; font-size: 0.9rem; margin-bottom: 1rem; letter-spacing: 0.1em; } +.testimonial__text { + font-size: 0.95rem; + color: var(--c-text-2); + line-height: 1.7; + margin-bottom: 1.5rem; + font-style: italic; +} +.testimonial__author { + display: flex; + align-items: center; + gap: 0.85rem; +} +.testimonial__avatar { + width: 42px; height: 42px; + border-radius: 50%; + background: var(--c-green-dim); + border: 1px solid rgba(34,197,94,0.3); + display: flex; + align-items: center; + justify-content: center; + font-size: 0.75rem; + font-weight: 700; + color: var(--c-green); + flex-shrink: 0; +} +.testimonial__author strong { + display: block; + font-size: 0.9rem; + font-weight: 700; +} +.testimonial__author span { + font-size: 0.78rem; + color: var(--c-text-3); +} + +/* ─── FAQ ─── */ +.faq__inner { + display: grid; + grid-template-columns: 0.85fr 1.15fr; + gap: 6rem; + align-items: start; +} +.faq__left .section__title { text-align: left; } +.faq__left .section__sub { text-align: left; margin: 0 0 2rem; } +.faq-item { + border-bottom: 1px solid var(--c-border); +} +.faq-item__q { + width: 100%; + text-align: left; + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + padding: 1.25rem 0; + font-size: 0.95rem; + font-weight: 600; + color: var(--c-text); + transition: color var(--trans); + cursor: pointer; +} +.faq-item__q:hover { color: var(--c-green); } +.faq-item__arrow { + flex-shrink: 0; + transition: transform var(--trans); +} +.faq-item[data-open="true"] .faq-item__arrow { transform: rotate(180deg); } +.faq-item__a { + display: none; + font-size: 0.9rem; + color: var(--c-text-2); + line-height: 1.7; + padding-bottom: 1.25rem; +} +.faq-item[data-open="true"] .faq-item__a { display: block; } + +/* ─── CONTACT ─── */ +.contact { background: var(--c-bg-3); } +.contact__inner { + display: grid; + grid-template-columns: 1fr 1.2fr; + gap: 6rem; + align-items: start; +} +.contact__left .section__title { text-align: left; } +.contact__left .section__sub { text-align: left; margin: 0 0 2.5rem; } +.contact__info { + display: flex; + flex-direction: column; + gap: 1rem; +} +.contact__info-item { + display: flex; + align-items: flex-start; + gap: 0.75rem; + font-size: 0.9rem; + color: var(--c-text-2); +} +.contact__info-item svg { flex-shrink: 0; margin-top: 1px; } +.form__row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1rem; +} +.form__group { margin-bottom: 1.25rem; } +.form__group label { + display: block; + font-size: 0.82rem; + font-weight: 600; + color: var(--c-text-2); + margin-bottom: 0.5rem; +} +.form__group input, +.form__group textarea { + width: 100%; + background: var(--c-surface); + border: 1px solid var(--c-border); + border-radius: 10px; + padding: 0.8rem 1rem; + color: var(--c-text); + font-family: inherit; + font-size: 0.9rem; + outline: none; + transition: border-color var(--trans), box-shadow var(--trans); + resize: vertical; +} +.form__group input::placeholder, +.form__group textarea::placeholder { color: var(--c-text-3); } +.form__group input:focus, +.form__group textarea:focus { + border-color: var(--c-green); + box-shadow: 0 0 0 3px var(--c-green-dim); +} +.form__submit { width: 100%; justify-content: center; } +.form__disclaimer { + font-size: 0.78rem; + color: var(--c-text-3); + text-align: center; + margin-top: 0.75rem; +} + +/* ─── FOOTER ─── */ +.footer { + background: var(--c-bg); + border-top: 1px solid var(--c-border); + padding: 4rem 0 2rem; +} +.footer__top { + display: grid; + grid-template-columns: 1.2fr 1fr; + gap: 4rem; + margin-bottom: 3.5rem; +} +.footer__brand p { + font-size: 0.88rem; + color: var(--c-text-3); + margin: 1rem 0 1.5rem; + max-width: 320px; + line-height: 1.65; +} +.footer__social { + display: flex; + gap: 0.75rem; +} +.footer__social a { + width: 36px; height: 36px; + border: 1px solid var(--c-border); + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + color: var(--c-text-3); + transition: color var(--trans), border-color var(--trans); +} +.footer__social a:hover { color: var(--c-green); border-color: var(--c-green); } +.footer__nav { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 2rem; +} +.footer__nav-col h4 { + font-size: 0.8rem; + font-weight: 700; + color: var(--c-text); + letter-spacing: 0.08em; + text-transform: uppercase; + margin-bottom: 1rem; +} +.footer__nav-col ul { + display: flex; + flex-direction: column; + gap: 0.6rem; +} +.footer__nav-col a { + font-size: 0.85rem; + color: var(--c-text-3); + transition: color var(--trans); +} +.footer__nav-col a:hover { color: var(--c-green); } +.footer__bottom { + padding-top: 2rem; + border-top: 1px solid var(--c-border); + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 0.5rem; +} +.footer__bottom p { + font-size: 0.78rem; + color: var(--c-text-3); +} + +/* ─── Responsive ─── */ +@media (max-width: 1024px) { + .benefits-grid { grid-template-columns: repeat(2, 1fr); } + .process-steps { grid-template-columns: repeat(2, 1fr); gap: 2rem; } + .process-step__connector { display: none; } + .savings__inner, .fleet__inner, .contact__inner, .faq__inner { grid-template-columns: 1fr; gap: 3rem; } + .fleet__visual { height: 280px; } + .fleet__content .section__title, + .fleet__content .section__sub { text-align: center; } + .fleet__list { align-items: flex-start; } +} + +@media (max-width: 768px) { + .section { padding: 4.5rem 0; } + .nav__links, .btn--nav { display: none; } + .nav__hamburger { display: flex; } + .benefits-grid { grid-template-columns: 1fr; } + .services-grid { grid-template-columns: 1fr; } + .service-card { flex-direction: column; gap: 1rem; } + .service-card__num { font-size: 2rem; } + .testimonials-grid { grid-template-columns: 1fr; } + .process-steps { grid-template-columns: 1fr; } + .hero__stats { gap: 1.5rem; } + .hero__stat-num, .hero__stat-suffix { font-size: 2rem; } + .form__row { grid-template-columns: 1fr; } + .footer__top { grid-template-columns: 1fr; } + .footer__nav { grid-template-columns: repeat(2, 1fr); } + .footer__bottom { flex-direction: column; text-align: center; } + .desktop-br { display: none; } + .faq__inner { grid-template-columns: 1fr; gap: 3rem; } + .contact__inner { grid-template-columns: 1fr; gap: 3rem; } +} + +@media (max-width: 480px) { + .container { padding: 0 1.25rem; } + .hero { padding: 7rem 1.25rem 4rem; } + .trust__inner { gap: 1rem; justify-content: flex-start; } + .hero__actions { flex-direction: column; } + .hero__actions .btn { width: 100%; justify-content: center; } + .footer__nav { grid-template-columns: 1fr; } +}