diff --git a/app/about/AboutClient.tsx b/app/about/AboutClient.tsx index 053998d..12facbc 100644 --- a/app/about/AboutClient.tsx +++ b/app/about/AboutClient.tsx @@ -20,18 +20,12 @@ export default function AboutPage() { return (
- {/* Inner Banner */} -
-
-

Your Trusted Fencing Partner

-
- - - Home - - / - About Us -
+
+

About Us.

+
+ Home + / + About
diff --git a/app/contact/ContactClient.tsx b/app/contact/ContactClient.tsx index 4604c3f..583152c 100644 --- a/app/contact/ContactClient.tsx +++ b/app/contact/ContactClient.tsx @@ -1,274 +1,679 @@ "use client"; import React, { useState, useEffect } from "react"; -import ReCAPTCHA from "react-google-recaptcha"; +import Link from "next/link"; import axios from "axios"; -import Link from 'next/link'; const ContactClient = () => { const [formData, setFormData] = useState({ + company: "", name: "", phone: "", email: "", - service: "Commercial", - message: "", + product: "", + city: "", + qty: "", + notes: "", + tc: false }); - const [formErrors, setFormErrors] = useState({}); - const [captchaToken, setCaptchaToken] = useState(null); - const [alert, setAlert] = useState({ show: false, type: "", message: "" }); + const [formStatus, setFormStatus] = useState<"idle" | "submitting" | "success" | "error">("idle"); + const [tcError, setTcError] = useState(false); + const [openFaq, setOpenFaq] = useState(null); + + useEffect(() => { + const revealObs = new IntersectionObserver((entries) => { + entries.forEach(e => { + if (e.isIntersecting) { + e.target.classList.add('visible'); + } + }); + }, { threshold: 0.06 }); + + document.querySelectorAll('.reveal').forEach(el => revealObs.observe(el)); + + return () => revealObs.disconnect(); + }, []); const handleChange = (e: React.ChangeEvent) => { - const { name, value } = e.target; - setFormData((prev) => ({ ...prev, [name]: value })); + const { id, value, type } = e.target; + if (type === 'checkbox') { + const checked = (e.target as HTMLInputElement).checked; + setFormData(prev => ({ ...prev, tc: checked })); + if (checked) setTcError(false); + } else { + const key = id.replace('f-', ''); + setFormData(prev => ({ ...prev, [key]: value })); + } }; - const handleCaptchaChange = (token: string | null) => { - setCaptchaToken(token); + const toggleFaq = (index: number) => { + setOpenFaq(openFaq === index ? null : index); }; - const handleSubmit = async (e: React.FormEvent) => { + const submitContactForm = async (e: React.FormEvent) => { e.preventDefault(); - const errors: any = {}; - if (!formData.name.trim()) errors.name = "Name is required."; - if (!formData.phone.trim()) errors.phone = "Phone is required."; - if (!formData.email.trim()) errors.email = "Email is required."; - if (!formData.service.trim()) errors.service = "Please select a service."; - if (!formData.message.trim()) errors.message = "Message is required."; - if (!captchaToken) errors.captcha = "Please verify the CAPTCHA."; + // Validate email + if (!formData.email || !formData.email.includes('@')) { + const el = document.getElementById('f-email'); + if (el) { + el.style.outline = '2px solid var(--orange)'; + el.focus(); + setTimeout(() => el.style.outline = '', 2000); + } + return; + } - setFormErrors(errors); - if (Object.keys(errors).length > 0) return; + // Validate T&C + if (!formData.tc) { + setTcError(true); + const el = document.getElementById('tc-row-contact'); + if (el) el.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); + return; + } + + setFormStatus("submitting"); const emailData = { - ...formData, - message: `Project Type: ${formData.service}

Message: ${formData.message}`, + name: formData.name, + phone: formData.phone, + email: formData.email, + service: formData.product || "General Enquiry", + message: ` + Company: ${formData.company}
+ City: ${formData.city}
+ Quantity: ${formData.qty}

+ Notes: ${formData.notes} + `, to: "info@vgfenceproducts.com", senderName: "VG Fence Contact Page", - recaptchaToken: captchaToken, }; - setAlert({ show: true, type: "info", message: "Sending your message..." }); - try { await axios.post("https://mailserver.metatronnest.com/send", emailData, { headers: { "Content-Type": "application/json" }, }); - - setAlert({ - show: true, - type: "success", - message: "Thank you! Your message has been sent successfully.", - }); - - setFormData({ - name: "", - phone: "", - email: "", - service: "Commercial", - message: "", - }); - setCaptchaToken(null); - setFormErrors({}); + setFormStatus("success"); + const successEl = document.getElementById('form-success'); + if (successEl) successEl.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); } catch (error) { console.error("❌ Error sending email:", error); - setAlert({ - show: true, - type: "danger", - message: "Failed to send message. Please try again later.", - }); + setFormStatus("error"); + alert("Failed to send message. Please try again later or email us directly at info@vgfenceproducts.com"); } }; - useEffect(() => { - if (alert.show && alert.type !== "info") { - const timer = setTimeout(() => { - setAlert((prev) => ({ ...prev, show: false })); - }, 5000); - return () => clearTimeout(timer); - } - }, [alert.show, alert.type]); - return ( -
- {/* Inner Banner */} -
-
-

How to Contact Us

-
- - - Home - - / - Contact +
+ + {/* HERO + QUOTE FORM */} +
+

Get in touch.

+
+ Home + / + Contact +
+
{/* MAIN CONTACT SECTION */} +
+
+
Send us a message
+

Tell us what you need
and where it's going.

+
+ +
+ {/* LEFT - INFO */} +
+
+
📧 Email — primary contact
+ +
+ Send quote requests, product enquiries, rental bookings, contractor account applications, and any question about our products and services. +
+
+ +
+
🌐 Website
+ +
+ Browse all products, specifications, service pages, and location-specific information for your city. +
+
+ +
+
📍 Based in
+
Kitchener–Waterloo, Ontario
+
+ We are a B2B supplier operating out of the KWC region. We do not have a retail storefront — contact us by email to arrange orders, pickup, or delivery. +
+
+ +
+
🕐 Business hours
+
+ 2-hour response commitment +
+
+
+
Mon – Fri
+
8:00 AM – 5:00 PM
+
+
+
Saturday
+
9:00 AM – 2:00 PM
+
+
+
Sunday
+
Closed
+
+
+
Stat holidays
+
Closed
+
+
+
+
+ + {/* RIGHT - FORM */} +
+
+
+
Request a quote
+
Fill in the details below. We respond to all enquiries within 2 business hours during business hours. Emergency temp fence rentals in KWC – contact us directly by email for fastest response.
+
+ + {formStatus === "success" ? ( +
+
✅
+

Quote request sent!

+

+ We'll respond to your email within 2 business hours. Check your spam folder if you don't hear from us. +

+ +
+ ) : ( +
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + + + {/* T&C CHECKBOX */} +
{ setFormData(p => ({ ...p, tc: !p.tc })); setTcError(false); }}> + e.stopPropagation()} /> + +
+ {tcError &&
⚠️ Please read and accept our Terms & Conditions to continue.
} + + +
Or email directly · info@vgfenceproducts.com
+
+ )} +
- {/* Contact Content */} -
-
-
- - {/* Left Col: Info & Map */} -
-
-

Office Details.

- -
-
-
- -
-
-
Our Location
-
125 Earl Thompson Rd, Ayr, ON N0B 1E0, Canada
-
-
- -
-
- -
-
-
Direct Line Numbers
-
+1 226-888-7999
-
-
- -
-
- -
-
-
Our Email
-
info@vgfenceproducts.com
-
-
-
-
- - {/* Map Placeholder */} -
- -
+ {/* HOURS + LOCATION */} +
+
Details
+

Hours, location
& response times.

+
+
+
🕐
+
Business hours & response time
+
+
Response within 2 business hours
+
Monday – Friday8:00 AM – 5:00 PM EST
+
Saturday9:00 AM – 2:00 PM EST
+
SundayClosed
+
Statutory holidaysClosed
+
-
-
-

Send us a Message.

-

Fill out the form below and our team will get back to you within 24 hours.

-
- -
- {alert.show && ( -
- {alert.message} -
- )} - -
-
- - - {formErrors.name && {formErrors.name}} -
-
- - - {formErrors.email && {formErrors.email}} -
-
- -
-
- - - {formErrors.phone && {formErrors.phone}} -
-
- - -
-
- -
- - - {formErrors.message && {formErrors.message}} -
- -
- - {formErrors.captcha && {formErrors.captcha}} -
- - -
+
+
✅
+
We can help with
+
+
Contractor pricing on all 8 product lines
+
Temporary fence rental for construction or events
+
2D fence drawing services & permit drawings
+
Professional wood staining services (KWC area)
+
Contractor account setup & bulk ordering
+
Scheduled job site delivery across Ontario
+
Product specifications & technical questions
+
Emergency temporary fence (same-day KWC)
+
+
+
📝
+
For the fastest response — include
+
+
The product or service you need
+
Your job site city or location
+
Approximate quantity or linear footage
+
Your preferred delivery timeline
+
Your company name and best contact method
+
+ {/* WHAT TO EXPECT */} +
+
What happens next
+

After you send your quote request.
Here's our process.

+
+ {[ + { num: "01", title: "We receive your request", desc: "Your quote request lands in our inbox immediately. We review every request personally — no bots, no auto-replies with prices." }, + { num: "02", title: "We check stock & delivery", desc: "We confirm current availability and delivery feasibility to your job site within our 250km radius. We quote only what we can actually deliver." }, + { num: "03", title: "You receive a written quote", desc: "Within 2 business hours, you receive a written quote with contractor pricing, delivery fee, and a confirmed delivery date. No vague estimates." }, + { num: "04", title: "Confirm & we deliver", desc: "Approve the quote, we confirm delivery. Materials arrive on schedule. For contractor accounts, repeat ordering is fast and pricing is pre-agreed." } + ].map((step, idx) => ( +
+
{step.num}
+
{step.title}
+
{step.desc}
+
+ ))} +
+
+ + {/* REASONS SECTION */} +
+
+
How we can help
+

Every reason to
get in touch.

+
+
+
+
+ + + + + + + + +
+
Contractor pricing
+
Get trade pricing on chain link, ornamental, composite, glass railing, aluminum railing, Expert Stain & Seal, or Fence Armor. Send your quantities and job site location and we'll quote fast.
+ Email for pricing → +
+ +
+
+ + + + + + +
+
Temporary fence rental
+
Construction, demolition, events, renovations, and emergencies. Tell us your panel count, gate needs, site location, and how long you need it. Same-day available in KWC for emergencies.
+ Email for rental → +
+ +
+
+ + + + + + +
+
2D fence drawings
+
CAD-based fence layout drawings, permit support drawings, and material takeoffs for residential and commercial projects. Share your site measurements or property plan and we'll produce a professional drawing.
+ Email for drawings → +
+ +
+
+ + + + +
+
Wood staining services
+
Professional fence staining, deck staining, pergola staining, and wood restoration in the KWC area and surrounding communities. Tell us your structure type and approximate size.
+ Email for staining → +
+ +
+
+ + + + +
+
Contractor account setup
+
Set up a contractor account for streamlined ordering, consistent contractor pricing, scheduled delivery arrangements, and bulk order discounts across all product lines.
+ Email to apply → +
+ +
+
+ + + + + +
+
General enquiries
+
Product specifications, availability, delivery schedules, service area questions, or anything else — send us an email and we'll help. We respond to every enquiry within 2 business hours.
+ Send us an email → +
+
+
+ + {/* COVERAGE SECTION */} +
+
+
Where we deliver
+

We deliver across
250km of Ontario.

+
+
+ {/* MAP SVG */} +
+ + + + + + 250KM + RADIUS + + + + KWC + + + Guelph + ~30km + + + Hamilton + ~75km + + + Toronto / GTA + ~110km + + + Brantford + ~50km + + + Stratford + ~45km + + + London + ~120km + + + Owen Sound + ~175km + + + Barrie + ~160km + + + Niagara + ~150km + + + Windsor + ~230km + + {/* Legend */} + + Major hub + + Regional city + + 250km delivery + +
+ + {/* REGION LIST */} +
+

We deliver all fence products and materials to job sites and business locations across Southern Ontario within a 250km radius from our Kitchener–Waterloo base. Contact us with your location for a delivery quote.

+
+
+
Waterloo Region
+ +
+
+
Guelph & Wellington
+
    +
  • Guelph
    • +
  • Fergus · Elora · Rockwood
    • +
  • Acton · Georgetown
    • +
+
+
+
Halton & Hamilton
+ +
+
+
GTA & Peel
+ +
+
+
Oxford & Perth
+ +
+
+
London & Elgin
+
    +
  • London
    • +
  • St. Thomas · Strathroy
    • +
  • Komoka
    • +
+
+
+
Southwest Ontario
+
    +
  • Windsor
    • +
  • Chatham
    • +
  • Leamington · Sarnia
    • +
  • Petrolia
    • +
+
+
+
Extended Service
+
    +
  • Niagara Falls
    • +
  • St. Catharines · Welland
    • +
  • Barrie
    • +
  • Owen Sound · Collingwood
    • +
+
+
+
+
+
+ + {/* FAQ */} +
+
+
Common questions
+

Before you reach out —
quick answers.

+
+
+
+ {[ + { q: "How quickly do you respond to quote requests?", a: "We respond to all quote requests and enquiries within 2 business hours during business hours (Monday–Friday 8:00 AM – 5:00 PM, Saturday 9:00 AM – 2:00 PM EST). Requests sent outside business hours are responded to first thing the next business day. For emergency temporary fence requirements in the KWC area, email us directly at info@vgfenceproducts.com for the fastest response." }, + { q: "Do you have a showroom or storefront I can visit?", a: "We are a B2B supplier operating from the Kitchener–Waterloo–Cambridge area. We do not operate a public retail storefront. All orders, quotes, and service bookings are handled by email and delivered directly to your job site or business location. Contact us at info@vgfenceproducts.com to arrange product pickup if needed." }, + { q: "What information should I include when requesting a quote?", a: "The more detail you provide, the faster and more accurate the quote. Ideal information to include: the product or service you need, your job site city or address, approximate quantity or linear footage, preferred delivery date, and your company name and contact details. For temporary fence rental, also include the number of gates needed, rental duration, and whether privacy screens are required." }, + { q: "Do you offer same-day temporary fence rental?", a: "Same-day temporary fence delivery and setup is available in the Kitchener–Waterloo–Cambridge area for urgent construction emergencies and emergency situations, subject to inventory and crew availability. Contact us directly by email as early as possible for same-day requests — we'll confirm availability immediately." } + ].map((item, idx) => ( +
+
toggleFaq(idx)}> + {item.q} + +
+
+ {item.a} +
+
+ ))} +
+
+ {[ + { q: "Do you deliver outside the KWC area?", a: "Yes. We deliver all fence products and materials to job sites and business locations across approximately 250km from our Kitchener–Waterloo base. This covers Guelph, Hamilton, Brantford, the GTA, London, Windsor, Niagara, Barrie, and everything in between. A delivery fee applies based on distance and order size. Contact us with your location and we'll confirm delivery availability and quote the cost." }, + { q: "How do I set up a contractor account?", a: "Email us at info@vgfenceproducts.com with your company name, your role (fence contractor, general contractor, builder, etc.), and the types of products you typically order. We'll set up your account, confirm your contractor pricing, and get you set up for streamlined ordering. Most contractor accounts are activated within 1 business day of application." }, + { q: "Do you supply to homeowners or only contractors?", a: "Our primary focus is the trade — fence contractors, general contractors, builders, and property managers. We do supply to homeowners on a case-by-case basis, particularly for Expert Stain & Seal products and Fence Armor post protection accessories. Minimum order quantities and pricing terms for homeowners may differ from contractor pricing. Contact us to discuss your specific project." }, + { q: "Can I order fence materials and a fence drawing at the same time?", a: "Yes — and we recommend it. When you order your fence layout drawing through us, we spec it to the exact products we carry. Once the drawing is approved, your material takeoff is built in and you can order materials in the same conversation. One supplier, one invoice, and materials spec'd to your layout with no gaps or guesswork." } + ].map((item, idx) => { + const actualIdx = idx + 4; + return ( +
+
toggleFaq(actualIdx)}> + {item.q} + +
+
+ {item.a} +
+
+ ); + })} +
+
+
+ + {/* CTA SECTION */} +
+
+

READY TO ORDER?
EMAIL US NOW.

+

Contractor pricing · 250km Ontario delivery · Response within 2 business hours

+ + + + + + + + info@vgfenceproducts.com + +
+
+ + {/* NEWSLETTER */} +
+
+
Stay in the loop
+

Product updates &
contractor deals.

+

New products, seasonal promotions, and industry tips — delivered to your inbox. No spam, unsubscribe anytime.

+
+ + +
+

Join contractors and builders across Ontario · 1–6 emails per month

+
+
); }; diff --git a/app/contact/page.tsx b/app/contact/page.tsx index 6babf71..affa64a 100644 --- a/app/contact/page.tsx +++ b/app/contact/page.tsx @@ -2,8 +2,8 @@ import type { Metadata } from "next"; import ContactClient from "./ContactClient"; export const metadata: Metadata = { - title: "Contact Us | VG Fence Products", - description: "Get in touch with our expert team for quotes, product inquiries, or technical support. We are located in Ayr, Ontario and serve the entire province.", + title: "Contact VG Fence Products | Kitchener–Waterloo Ontario", + description: "Contact VG Fence Products for contractor pricing, fence supply, temp fence rental, wood staining, and 2D drawing services. Email info@vgfenceproducts.com. Response within 2 business hours.", alternates: { canonical: "/contact" } diff --git a/app/globals.css b/app/globals.css index 6225ddf..c722c3c 100644 --- a/app/globals.css +++ b/app/globals.css @@ -8,14 +8,27 @@ --orange-dark: #C0421B; --orange-light: #F07A50; --cream: #F5F2ED; - --white: #ffffff; + --white: #fff; --gray-100: #F7F6F3; --gray-200: #ECEAE5; --gray-400: #B0ADA6; --gray-600: #6B6860; --gray-800: #2E2C29; - --font-display: 'Barlow Condensed', sans-serif; - --font-body: 'Barlow', sans-serif; + --fd: 'Barlow Condensed', sans-serif; + --fb: 'Barlow', sans-serif; +} + +/* ── UTILITIES ── */ +.text-white-50 { + color: rgba(255, 255, 255, .5) !important; +} + +.text-orange { + color: var(--orange) !important; +} + +.mt-24 { + margin-top: 24px; } *, @@ -31,69 +44,679 @@ html { } body { - font-family: var(--font-body); + font-family: var(--fb); background: var(--white); color: var(--gray-800); overflow-x: hidden; } -/* ── ANIMATIONS ── */ -@keyframes fadeUp { - from { - opacity: 0; - transform: translateY(24px); - } - - to { - opacity: 1; - transform: translateY(0); - } +a { + text-decoration: none; } -.fade-up { - animation: fadeUp 0.6s ease both; -} - -/* ── SCROLLBAR ── */ -::-webkit-scrollbar { - width: 6px; -} - -::-webkit-scrollbar-track { - background: var(--gray-100); -} - -::-webkit-scrollbar-thumb { +/* ── NAV ── */ +nav { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 100; background: var(--navy); - border-radius: 3px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 48px; + height: 64px; + border-bottom: 2px solid var(--orange); + transition: box-shadow .3s; } -/* Section Generic Styles */ -section, -.section { - padding: 80px 20px; +.nav-logo { + display: flex; + align-items: center; + gap: 10px; + text-decoration: none; + flex-shrink: 0; } -.container { - max-width: 1200px; - margin: 0 auto; - padding: 0 40px; +.nav-logo img { + height: 36px; + width: auto; + /* filter: brightness(0) invert(1); */ } -@media (max-width: 768px) { - - section, - .section { - padding: 60px 20px; - } - - .container { - padding: 0; - } +.nav-logo .lm { + width: 36px; + height: 36px; + border-radius: 50%; + border: 2.5px solid var(--orange); + display: flex; + align-items: center; + justify-content: center; + font-size: 13px; + font-weight: 800; + color: var(--white); + font-family: var(--fd); } +.nav-links { + display: flex; + align-items: center; + gap: 24px; + list-style: none; +} + +.nav-links a { + font-family: var(--fd); + font-size: 13px; + font-weight: 600; + color: rgba(255, 255, 255, .72); + text-decoration: none; + letter-spacing: .06em; + text-transform: uppercase; + transition: color .2s; + padding: 4px 0; + border-bottom: 2px solid transparent; +} + +.nav-links a:hover, +.nav-links a.active { + color: var(--orange); + border-bottom-color: var(--orange); +} + +/* Dropdown */ +.nav-dropdown-wrap { + position: relative; +} + +.nav-dropdown { + position: absolute; + top: 100%; + left: 0; + background: var(--navy); + min-width: 200px; + list-style: none; + padding: 10px 0; + border-bottom: 3px solid var(--orange); + opacity: 0; + visibility: hidden; + transform: translateY(10px); + transition: all .3s; + box-shadow: 0 10px 30px rgba(0, 0, 0, .3); +} + +.nav-dropdown-wrap:hover .nav-dropdown { + opacity: 1; + visibility: visible; + transform: translateY(0); +} + +.nav-dropdown li a { + display: block; + padding: 10px 24px; + border-bottom: none !important; + color: rgba(255, 255, 255, .7) !important; + font-size: 12px !important; +} + +.nav-dropdown li a:hover { + color: var(--orange) !important; + background: rgba(255, 255, 255, .05); +} + +.chevron-down { + font-size: 10px; + margin-left: 4px; + opacity: .7; +} + +.mobile-dropdown-section { + display: flex; + flex-direction: column; + padding: 10px 0; + border-bottom: 1px solid rgba(255, 255, 255, .07); +} + +.mobile-section-title { + font-family: var(--fd); + font-size: 12px; + font-weight: 700; + color: var(--orange); + text-transform: uppercase; + margin-bottom: 10px; + letter-spacing: .1em; +} + +.mobile-dropdown-section a { + font-size: 14px !important; + padding: 8px 0 8px 12px !important; + border-bottom: none !important; +} + +.nav-right { + display: flex; + align-items: center; + gap: 10px; +} + +.nav-login { + font-family: var(--fd); + font-size: 12px; + font-weight: 700; + letter-spacing: .06em; + text-transform: uppercase; + color: rgba(255, 255, 255, .65); + text-decoration: none; + padding: 7px 14px; + border: 1px solid rgba(255, 255, 255, .2); + border-radius: 4px; + transition: all .2s; + white-space: nowrap; +} + +.nav-login:hover { + border-color: var(--orange); + color: var(--orange); +} + +.nav-cta { + background: var(--orange); + color: var(--white); + font-family: var(--fd); + font-size: 13px; + font-weight: 700; + letter-spacing: .06em; + text-transform: uppercase; + padding: 9px 20px; + border: none; + border-radius: 4px; + cursor: pointer; + transition: background .2s; + white-space: nowrap; + text-decoration: none; + display: inline-block; +} + +.nav-cta:hover { + background: var(--orange-dark); +} + +.nav-hamburger { + display: none; + background: none; + border: none; + cursor: pointer; + flex-direction: column; + gap: 5px; + padding: 4px; +} + +.nav-hamburger span { + display: block; + width: 22px; + height: 2px; + background: rgba(255, 255, 255, .8); + border-radius: 2px; + transition: all .3s; +} + +.mobile-menu { + display: none; + position: fixed; + top: 64px; + left: 0; + right: 0; + background: var(--navy); + border-bottom: 2px solid var(--orange); + padding: 16px 24px; + z-index: 99; + flex-direction: column; + gap: 0; +} + +.mobile-menu.open { + display: flex; +} + +.mobile-menu a, .mobile-dropdown-btn { + font-family: var(--fd); + font-size: 16px; + font-weight: 700; + letter-spacing: .06em; + text-transform: uppercase; + color: rgba(255, 255, 255, .75); + text-decoration: none; + padding: 13px 0; + border-bottom: 1px solid rgba(255, 255, 255, .07); + transition: color .2s; + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + background: none; + border-top: none; + border-left: none; + border-right: none; + cursor: pointer; + text-align: left; +} + +.mobile-menu a:hover, .mobile-dropdown-btn:hover { + color: var(--orange); +} + +.mobile-menu a:last-child { + border-bottom: none; +} + +.mobile-dropdown-content { + display: none; + flex-direction: column; + padding-left: 16px; + background: rgba(0, 0, 0, 0.15); + border-bottom: 1px solid rgba(255, 255, 255, .07); +} + +.mobile-dropdown-content.show { + display: flex; +} + +.mobile-dropdown-content a { + border-bottom: none; + font-size: 14px; + padding: 10px 0; +} + +.mobile-menu-actions { + display: flex; + flex-direction: column; + gap: 10px; + margin-top: 16px; +} + +.mobile-login-btn { + background: transparent; + color: var(--white); + font-family: var(--fd); + font-size: 14px; + font-weight: 700; + letter-spacing: .06em; + text-transform: uppercase; + padding: 12px; + border: 1px solid rgba(255, 255, 255, .3); + border-radius: 6px; + text-align: center; + text-decoration: none; + transition: border-color .2s; +} + +.mobile-cta { + background: var(--orange) !important; + color: var(--white) !important; + text-align: center; + padding: 12px !important; + border-radius: 6px; + border-bottom: none !important; + font-family: var(--fd); + font-size: 14px; + font-weight: 700; + letter-spacing: .06em; + text-transform: uppercase; + text-decoration: none; +} + +.chevron-down { + font-size: 12px; + transition: transform 0.3s ease; +} + +.chevron-down.rotated { + transform: rotate(180deg); +} + +/* ── HERO ── */ +.hero { + background: var(--navy); + min-height: 100vh; + display: grid; + grid-template-columns: 1fr 1fr; + padding-top: 64px; + position: relative; + overflow: hidden; +} + +.hero-grid-bg { + position: absolute; + inset: 0; + opacity: .035; + background-image: repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255, 255, 255, .6) 39px, rgba(255, 255, 255, .6) 40px), repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255, 255, 255, .6) 39px, rgba(255, 255, 255, .6) 40px); +} + +.hero-fence-deco { + position: absolute; + right: 0; + top: 0; + bottom: 0; + width: 50%; + overflow: hidden; +} + +.hfd-rail { + position: absolute; + left: 0; + right: 0; + height: 3px; + background: rgba(255, 255, 255, .055); +} + +.hfd-post { + position: absolute; + top: 0; + bottom: 0; + width: 6px; + background: rgba(255, 255, 255, .04); + border-radius: 1px; +} + +.hero-accent { + position: absolute; + right: -60px; + top: 80px; + width: 400px; + height: 400px; + border-radius: 50%; + border: 56px solid var(--orange); + opacity: .1; +} + +.hero-accent2 { + position: absolute; + right: 90px; + bottom: -80px; + width: 250px; + height: 250px; + border-radius: 50%; + border: 36px solid var(--orange); + opacity: .07; +} + +.hero-left { + display: flex; + flex-direction: column; + justify-content: center; + padding: 80px 48px 80px 80px; + position: relative; + z-index: 2; +} + +.hero-eyebrow { + display: inline-flex; + align-items: center; + gap: 10px; + font-family: var(--fd); + font-size: 12px; + font-weight: 700; + letter-spacing: .14em; + text-transform: uppercase; + color: var(--orange); + margin-bottom: 22px; +} + +.hero-eyebrow::before { + content: ''; + display: block; + width: 28px; + height: 2px; + background: var(--orange); +} + +h1.hero-h1 { + font-family: var(--fd); + font-size: clamp(50px, 5.5vw, 82px); + font-weight: 800; + line-height: .9; + color: var(--white); + letter-spacing: -.02em; + text-transform: uppercase; + margin-bottom: 26px; +} + +h1.hero-h1 em { + color: var(--orange); + font-style: normal; + display: block; +} + +.hero-sub { + font-size: 16px; + font-weight: 300; + line-height: 1.8; + color: rgba(255, 255, 255, .65); + max-width: 460px; + margin-bottom: 36px; +} + +.hero-sub strong { + color: rgba(255, 255, 255, .9); + font-weight: 500; +} + +.hero-btns { + display: flex; + gap: 12px; + flex-wrap: wrap; + margin-bottom: 52px; +} + +.btn-primary { + background: var(--orange); + color: var(--white); + font-family: var(--fd); + font-size: 14px; + font-weight: 700; + letter-spacing: .08em; + text-transform: uppercase; + padding: 14px 28px; + border: none; + border-radius: 4px; + cursor: pointer; + transition: background .2s; + text-decoration: none; + display: inline-block; +} + +.btn-primary:hover { + background: var(--orange-dark); +} + +.btn-secondary { + background: transparent; + color: var(--white); + font-family: var(--fd); + font-size: 14px; + font-weight: 700; + letter-spacing: .08em; + text-transform: uppercase; + padding: 13px 28px; + border: 1.5px solid rgba(255, 255, 255, .3); + border-radius: 4px; + cursor: pointer; + transition: border-color .2s; + text-decoration: none; + display: inline-block; +} + +.btn-secondary:hover { + border-color: rgba(255, 255, 255, .7); +} + +.hero-stats { + display: flex; + gap: 36px; + padding-top: 28px; + border-top: 1px solid rgba(255, 255, 255, .1); + flex-wrap: wrap; +} + +.stat-val { + font-family: var(--fd); + font-size: 36px; + font-weight: 800; + color: var(--orange); + line-height: 1; +} + +.stat-label { + font-size: 12px; + color: rgba(255, 255, 255, .45); + margin-top: 4px; +} + +.hero-right { + display: flex; + flex-direction: column; + justify-content: center; + padding: 80px 80px 80px 40px; + position: relative; + z-index: 2; +} + +.quote-card { + background: rgba(255, 255, 255, .06); + border: 1px solid rgba(255, 255, 255, .12); + border-radius: 14px; + padding: 36px; + backdrop-filter: blur(12px); +} + +.qc-title { + font-family: var(--fd); + font-size: 22px; + font-weight: 700; + color: var(--white); + text-transform: uppercase; + letter-spacing: .05em; + margin-bottom: 4px; +} + +.qc-sub { + font-size: 13px; + color: rgba(255, 255, 255, .45); + margin-bottom: 24px; +} + +.fl { + display: block; + font-size: 10px; + font-weight: 700; + letter-spacing: .1em; + text-transform: uppercase; + color: rgba(255, 255, 255, .5); + margin-bottom: 6px; + margin-top: 14px; +} + +.fl:first-of-type { + margin-top: 0; +} + +.fi { + width: 100%; + background: rgba(255, 255, 255, .08); + border: 1px solid rgba(255, 255, 255, .14); + border-radius: 6px; + padding: 11px 14px; + font-family: var(--fb); + font-size: 14px; + color: var(--white); + outline: none; + transition: border-color .2s; + appearance: none; +} + +.fi::placeholder { + color: rgba(255, 255, 255, .3); +} + +.fi:focus { + border-color: var(--orange); +} + +.fi option { + background: var(--navy); +} + +.frow { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 12px; +} + +.form-submit { + width: 100%; + background: var(--orange); + color: var(--white); + font-family: var(--fd); + font-size: 16px; + font-weight: 700; + letter-spacing: .08em; + text-transform: uppercase; + padding: 14px; + border: none; + border-radius: 6px; + cursor: pointer; + margin-top: 16px; + transition: background .2s; +} + +.form-submit:hover { + background: var(--orange-dark); +} + +.form-note { + text-align: center; + font-size: 11px; + color: rgba(255, 255, 255, .3); + margin-top: 10px; +} + +/* ── TRUST BAR ── */ +.trust-bar { + background: var(--orange); + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; +} + +.trust-item { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + gap: 9px; + padding: 13px 16px; + border-right: 1px solid rgba(255, 255, 255, .2); + font-family: var(--fd); + font-size: 12px; + font-weight: 700; + letter-spacing: .06em; + text-transform: uppercase; + color: rgba(255, 255, 255, .92); +} + +.trust-item:last-child { + border-right: none; +} + +.trust-icon { + font-size: 15px; +} + +/* ── SECTION COMMON ── */ .section-eyebrow { - font-family: var(--font-display); + font-family: var(--fd); font-size: 12px; font-weight: 700; letter-spacing: .14em; @@ -113,9 +736,38 @@ section, background: var(--orange); } -.section-h2 { - font-family: var(--font-display); - font-size: clamp(32px, 4vw, 58px); +.section-eyebrow::before { + content: ''; + display: block; + width: 22px; + height: 2px; + background: var(--orange); +} + +.section-eyebrow.white-eye { + color: rgba(255, 255, 255, .55); +} + +.section-eyebrow.white-eye::before { + background: rgba(255, 255, 255, .3); +} + +.section-eyebrow.center { + justify-content: center; +} + +.section-eyebrow.center::before, +.section-eyebrow.center::after { + content: ''; + display: block; + width: 22px; + height: 2px; + background: var(--orange); +} + +h2.sh { + font-family: var(--fd); + font-size: clamp(36px, 4vw, 56px); font-weight: 800; text-transform: uppercase; line-height: .95; @@ -123,418 +775,19 @@ section, letter-spacing: -.01em; } -.section-h2 span { +h2.sh span { color: var(--orange); } -/* Buttons */ -.btn-primary { - background: var(--orange); - color: var(--white); - font-family: var(--font-display); - font-size: 15px; - font-weight: 700; - letter-spacing: .08em; - text-transform: uppercase; - padding: 14px 32px; - border: none; - border-radius: 4px; - cursor: pointer; - transition: background .2s; - text-decoration: none; - display: inline-block; +h2.sh.white, +h2.sh-white { + color: var(--white) !important; } -.btn-primary:hover { - background: var(--orange-dark); -} - -.btn-secondary { - background: transparent; - color: var(--white); - font-family: var(--font-display); - font-size: 15px; - font-weight: 700; - letter-spacing: .08em; - text-transform: uppercase; - padding: 13px 32px; - border: 1.5px solid rgba(255, 255, 255, .3); - border-radius: 4px; - cursor: pointer; - transition: border-color .2s; - text-decoration: none; - display: inline-block; -} - -.btn-secondary:hover { - border-color: rgba(255, 255, 255, .7); -} - -/* ── NAV ── */ -nav { - position: fixed; - top: 0; - left: 0; - right: 0; - z-index: 1000; - background: var(--navy); - display: flex; - align-items: center; - justify-content: space-between; - padding: 0 48px; - height: 64px; - border-bottom: 2px solid var(--orange); -} - -.nav-logo { - display: flex; - align-items: center; - gap: 12px; - font-family: var(--font-display); - font-size: 22px; - font-weight: 700; - color: var(--white); - letter-spacing: .04em; - text-decoration: none; -} - -.nav-logo .logo-mark { - width: 38px; - height: 38px; - border-radius: 50%; - border: 2.5px solid var(--orange); - display: flex; - align-items: center; - justify-content: center; - font-size: 14px; - font-weight: 800; - color: var(--white); - letter-spacing: -.02em; -} - -.nav-logo .logo-text span { - color: var(--orange); -} - -.nav-links { - display: flex; - align-items: center; - gap: 32px; - list-style: none; -} - -.nav-links a { - font-family: var(--font-display); - font-size: 14px; - font-weight: 500; - color: rgba(255, 255, 255, .75); - text-decoration: none; - letter-spacing: .06em; - text-transform: uppercase; - transition: color .2s; -} - -.nav-links a:hover { - color: var(--orange); -} - -.nav-cta { - background: var(--orange); - color: var(--white); - font-family: var(--font-display); - font-size: 14px; - font-weight: 700; - letter-spacing: .06em; - text-transform: uppercase; - padding: 10px 22px; - border: none; - border-radius: 4px; - cursor: pointer; - transition: background .2s; - text-decoration: none; -} - -.nav-cta:hover { - background: var(--orange-dark); -} - -/* ── HERO ── */ -.hero { - min-height: 100vh; - background: var(--navy); - display: grid; - grid-template-columns: 1fr 1fr; - padding-top: 64px; - position: relative; - overflow: hidden; -} - -.hero-pattern { - display: none; -} - -.hero-accent { - position: absolute; - right: -60px; - top: 80px; - width: 420px; - height: 420px; - border-radius: 50%; - border: 60px solid var(--orange); - opacity: .12; -} - -.hero-accent2 { - position: absolute; - right: 80px; - bottom: -80px; - width: 280px; - height: 280px; - border-radius: 50%; - border: 40px solid var(--orange); - opacity: .08; -} - -.hero-left { - display: flex; - flex-direction: column; - justify-content: center; - padding: 80px 48px 80px 80px; - position: relative; - z-index: 2; -} - -.hero-eyebrow { - display: inline-flex; - align-items: center; - gap: 10px; - font-family: var(--font-display); - font-size: 13px; - font-weight: 600; - letter-spacing: .12em; - text-transform: uppercase; - color: var(--orange); - margin-bottom: 24px; -} - -.hero-eyebrow::before { - content: ''; - display: block; - width: 32px; - height: 2px; - background: var(--orange); -} - -.hero-h1 { - font-family: var(--font-display); - font-size: clamp(52px, 5vw, 80px); - font-weight: 800; - line-height: .95; - color: var(--white); - letter-spacing: -.01em; - text-transform: uppercase; - margin-bottom: 28px; -} - -.hero-h1 em { - color: var(--orange); - font-style: normal; - display: block; -} - -.hero-sub { - font-size: 17px; - font-weight: 300; - line-height: 1.7; - color: rgba(255, 255, 255, .65); - max-width: 460px; - margin-bottom: 40px; -} - -.hero-sub strong { - color: rgba(255, 255, 255, .9); - font-weight: 500; -} - -.hero-btns { - display: flex; - gap: 14px; - flex-wrap: wrap; - margin-bottom: 56px; -} - -.hero-stats { - display: flex; - gap: 40px; - padding-top: 28px; - border-top: 1px solid rgba(255, 255, 255, .1); -} - -.stat-val { - font-family: var(--font-display); - font-size: 36px; - font-weight: 800; - color: var(--orange); - line-height: 1; -} - -.stat-label { - font-size: 12px; - font-weight: 400; - color: rgba(255, 255, 255, .5); - margin-top: 4px; - letter-spacing: .03em; -} - -.hero-right { - display: flex; - flex-direction: column; - justify-content: center; - padding: 80px 80px 80px 40px; - position: relative; - z-index: 2; -} - -.quote-card { - background: rgba(255, 255, 255, .06); - border: 1px solid rgba(255, 255, 255, .12); - border-radius: 12px; - padding: 32px; - backdrop-filter: blur(10px); -} - -.quote-card-title { - font-family: var(--font-display); - font-size: 20px; - font-weight: 700; - color: var(--white); - text-transform: uppercase; - letter-spacing: .06em; - margin-bottom: 6px; -} - -.quote-card-sub { - font-size: 13px; - color: rgba(255, 255, 255, .5); - margin-bottom: 24px; -} - -.form-group { - margin-bottom: 14px; -} - -.form-label { - display: block; - font-size: 11px; - font-weight: 600; - letter-spacing: .08em; - text-transform: uppercase; - color: rgba(255, 255, 255, .5); - margin-bottom: 6px; -} - -.form-input, -.form-select { - width: 100%; - background: rgba(255, 255, 255, .08); - border: 1px solid rgba(255, 255, 255, .15); - border-radius: 6px; - padding: 11px 14px; - font-family: var(--font-body); - font-size: 14px; - color: var(--white); - outline: none; - transition: border-color .2s; - appearance: none; -} - -.form-input::placeholder { - color: rgba(255, 255, 255, .3); -} - -.form-input:focus, -.form-select:focus { - border-color: var(--orange); -} - -.form-select option { - background: var(--navy); - color: var(--white); -} - -.form-row { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 12px; -} - -.form-submit { - width: 100%; - background: var(--orange); - color: var(--white); - font-family: var(--font-display); - font-size: 16px; - font-weight: 700; - letter-spacing: .08em; - text-transform: uppercase; - padding: 14px; - border: none; - border-radius: 6px; - cursor: pointer; - margin-top: 6px; - transition: background .2s; -} - -.form-submit:hover { - background: var(--orange-dark); -} - -.form-note { - text-align: center; - font-size: 12px; - color: rgba(255, 255, 255, .35); - margin-top: 12px; -} - -/* ── TRUST BAR ── */ -.trust-bar { - background: var(--orange); - display: flex; - align-items: center; - justify-content: center; - gap: 0; - overflow: hidden; - flex-wrap: wrap; -} - -.trust-item { - flex: 1; - display: flex; - align-items: center; - justify-content: center; - gap: 10px; - padding: 14px 20px; - border-right: 1px solid rgba(255, 255, 255, .2); - font-family: var(--font-display); - font-size: 13px; - font-weight: 600; - letter-spacing: .06em; - text-transform: uppercase; - color: rgba(255, 255, 255, .9); - min-width: 200px; -} - -.trust-item:last-child { - border-right: none; -} - -.trust-icon { - font-size: 16px; -} - -/* ── PRODUCTS ── */ +/* ── PRODUCTS SECTION — background: white ── */ .products-section { - background: var(--gray-100); + padding: 88px 80px; + background: var(--white); } .products-header { @@ -546,59 +799,39 @@ nav { gap: 20px; } +.products-header-right { + font-size: 14px; + color: var(--gray-600); + max-width: 320px; + line-height: 1.7; +} + .products-grid { display: grid; grid-template-columns: repeat(3, 1fr); - /* gap: 24px; */ -} - -.product-page { - gap: 24px; -} - -@media (max-width: 1024px) { - .products-grid { - background: none; - border: none; - border-radius: none; - } + gap: 2px; + background: var(--gray-200); + border: 2px solid var(--gray-200); + border-radius: 12px; + overflow: hidden; } +/* product image card */ .product-card { background: var(--white); - padding: 32px 28px; - border: 1px solid var(--gray-200); - /* border-radius: 12px; */ - transition: all .2s; - cursor: pointer; position: relative; - overflow: hidden; - text-decoration: none; + cursor: pointer; + transition: background .2s; display: flex; flex-direction: column; -} - -.product-card::after { - content: ''; - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 3px; - background: var(--orange); - transform: scaleX(0); - transform-origin: left; - transition: transform .3s; + overflow: hidden; + text-decoration: none; } .product-card:hover { background: var(--navy); } -.product-card:hover::after { - transform: scaleX(1); -} - .product-card:hover .product-name { color: var(--white); } @@ -616,87 +849,210 @@ nav { color: var(--orange); } -.product-icon { - width: 44px; - height: 44px; +.product-card::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 3px; background: var(--orange); - border-radius: 8px; + transform: scaleX(0); + transform-origin: left; + transition: transform .3s; +} + +.product-card:hover::after { + transform: scaleX(1); +} + +/* IMAGE SPACE */ +.product-img-area { + width: 100%; + aspect-ratio: 12/9; + background: var(--gray-100); + border-bottom: 1px solid var(--gray-200); + position: relative; + overflow: hidden; + flex-shrink: 0; +} + +.product-img-area img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform .4s ease; + display: block; +} + +.product-card:hover .product-img-area img { + transform: scale(1.05); +} + +.product-img-area.has-img { + background: var(--gray-200); +} + +.img-ph { + position: absolute; + inset: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 8px; + background: var(--gray-100); +} + +.img-ph svg { + opacity: .25; +} + +.img-ph-label { + font-family: var(--fd); + font-size: 10px; + font-weight: 700; + letter-spacing: .08em; + text-transform: uppercase; + color: var(--gray-400); +} + +.img-ph-hint { + font-size: 10px; + color: var(--gray-400); + text-align: center; + padding: 0 16px; + line-height: 1.4; +} + +.product-card:hover .img-ph { + background: rgba(15, 36, 68, .9); +} + +.product-card:hover .img-ph-label, +.product-card:hover .img-ph-hint { + color: rgba(255, 255, 255, .4); +} + +.img-badge { + position: absolute; + top: 8px; + left: 8px; + background: var(--orange); + color: var(--white); + font-family: var(--fd); + font-size: 9px; + font-weight: 700; + letter-spacing: .07em; + text-transform: uppercase; + padding: 2px 8px; + border-radius: 3px; + z-index: 2; +} + +.product-card-body { + padding: 24px 22px 20px; + flex: 1; + display: flex; + flex-direction: column; +} + +.product-icon { + width: 38px; + height: 38px; + background: var(--orange); + border-radius: 7px; display: flex; align-items: center; justify-content: center; - margin-bottom: 20px; + margin-bottom: 14px; } .product-icon svg { - width: 22px; - height: 22px; + width: 19px; + height: 19px; } .product-name { - font-family: var(--font-display); - font-size: 20px; + font-family: var(--fd); + font-size: 18px; font-weight: 700; text-transform: uppercase; color: var(--navy); letter-spacing: .02em; - margin-bottom: 8px; + margin-bottom: 7px; transition: color .2s; } .product-desc { - font-size: 13px; + font-size: 12px; color: var(--gray-600); - line-height: 1.6; - margin-bottom: 16px; + line-height: 1.65; + margin-bottom: 12px; + flex: 1; transition: color .2s; } .product-tags { display: flex; - gap: 6px; + gap: 5px; flex-wrap: wrap; - margin-bottom: 16px; + margin-bottom: 12px; } .product-tag { - font-size: 10px; - font-weight: 600; + font-size: 9px; + font-weight: 700; letter-spacing: .06em; text-transform: uppercase; - padding: 3px 8px; + padding: 2px 7px; border-radius: 3px; background: rgba(15, 36, 68, .07); color: var(--navy-light); - transition: background .2s, color .2s; + transition: all .2s; } .product-arrow { - font-size: 18px; + font-size: 17px; color: var(--gray-400); transition: color .2s; + margin-top: auto; } -/* ── SERVICES ── */ +.product-cta-card { + background: var(--navy) !important; +} + +.product-cta-card:hover { + background: var(--navy-mid) !important; +} + +/* ── SERVICES SECTION — background: navy ── */ .services-section { + padding: 88px 80px; background: var(--navy); } -.services-section .section-h2 { - color: var(--white); +.services-section .section-eyebrow { + color: rgba(255, 255, 255, .5); +} + +.services-section .section-eyebrow::before { + background: rgba(255, 255, 255, .2); } .services-grid { display: grid; grid-template-columns: repeat(2, 1fr); - gap: 24px; - margin-top: 48px; + gap: 20px; + margin-top: 44px; } .service-card { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; - padding: 32px; + padding: 32px 28px; transition: background .2s, border-color .2s; } @@ -706,8 +1062,8 @@ nav { } .service-num { - font-family: var(--font-display); - font-size: 48px; + font-family: var(--fd); + font-size: 52px; font-weight: 800; color: rgba(255, 255, 255, .06); line-height: 1; @@ -716,13 +1072,13 @@ nav { } .service-name { - font-family: var(--font-display); + font-family: var(--fd); font-size: 22px; font-weight: 700; text-transform: uppercase; color: var(--white); - margin-bottom: 12px; - letter-spacing: .04em; + margin-bottom: 10px; + letter-spacing: .03em; } .service-name span { @@ -730,10 +1086,10 @@ nav { } .service-desc { - font-size: 14px; + font-size: 13px; color: rgba(255, 255, 255, .55); - line-height: 1.7; - margin-bottom: 20px; + line-height: 1.75; + margin-bottom: 18px; } .service-list { @@ -744,7 +1100,7 @@ nav { } .service-list li { - font-size: 13px; + font-size: 12px; color: rgba(255, 255, 255, .6); display: flex; align-items: center; @@ -753,15 +1109,16 @@ nav { .service-list li::before { content: ''; - width: 6px; - height: 6px; + width: 5px; + height: 5px; border-radius: 50%; background: var(--orange); flex-shrink: 0; } -/* ── TERRITORY ── */ +/* ── TERRITORY — background: cream ── */ .territory-section { + padding: 88px 80px; background: var(--cream); } @@ -773,7 +1130,7 @@ nav { align-items: center; } -.territory-map-wrap { +.map-card { background: var(--white); border-radius: 12px; border: 1px solid var(--gray-200); @@ -784,38 +1141,66 @@ nav { .radius-label { position: absolute; - top: 16px; - right: 16px; + top: 14px; + right: 14px; background: var(--navy); color: var(--white); - font-family: var(--font-display); - font-size: 12px; + font-family: var(--fd); + font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; - padding: 5px 12px; + padding: 4px 12px; border-radius: 20px; } .city-list { display: flex; flex-direction: column; - gap: 10px; + gap: 9px; + margin-bottom: 24px; +} + +.city-list-header { + background: rgba(232, 87, 42, .1); + border: 1px solid rgba(232, 87, 42, .2); + border-radius: 6px; + padding: 12px 18px; + font-family: var(--fd); + font-size: 13px; + font-weight: 700; + color: var(--orange); + letter-spacing: .06em; + margin-bottom: 16px; + display: flex; + align-items: center; + gap: 8px; } .city-item { display: flex; align-items: center; gap: 14px; - padding: 14px 16px; + padding: 13px 15px; background: var(--white); border-radius: 8px; border: 1px solid var(--gray-200); + transition: border-color .2s, box-shadow .2s; + cursor: default; +} + +.city-item.selected { + border-color: var(--orange); + box-shadow: 0 4px 12px rgba(232, 87, 42, .1); +} + +.city-item:hover { + border-color: var(--orange); } .city-dot { - width: 10px; - height: 10px; + width: 9px; + height: 9px; border-radius: 50%; flex-shrink: 0; } @@ -837,8 +1222,8 @@ nav { } .city-name-txt { - font-family: var(--font-display); - font-size: 15px; + font-family: var(--fd); + font-size: 14px; font-weight: 700; text-transform: uppercase; color: var(--navy); @@ -846,21 +1231,22 @@ nav { } .city-sub-txt { - font-size: 12px; + font-size: 11px; color: var(--gray-600); margin-top: 1px; } .city-dist-badge { font-size: 11px; - font-weight: 600; + font-weight: 700; color: var(--orange); - font-family: var(--font-display); + font-family: var(--fd); letter-spacing: .04em; } -/* ── TARGETS ── */ +/* ── WHO WE SERVE — background: white ── */ .targets-section { + padding: 88px 80px; background: var(--white); } @@ -868,13 +1254,13 @@ nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; - margin-top: 48px; + margin-top: 44px; } .target-card { border: 1px solid var(--gray-200); border-radius: 10px; - padding: 24px 20px; + padding: 22px 18px; transition: border-color .2s, transform .2s; } @@ -888,40 +1274,38 @@ nav { font-weight: 700; letter-spacing: .1em; text-transform: uppercase; - margin-bottom: 12px; + margin-bottom: 10px; } -.priority-1 { - color: var(--orange); -} -.priority-2 { +.p2 { color: var(--navy-mid); } -.priority-3 { +.p3 { color: var(--gray-600); } .target-name { - font-family: var(--font-display); - font-size: 17px; + font-family: var(--fd); + font-size: 16px; font-weight: 700; text-transform: uppercase; color: var(--navy); letter-spacing: .02em; - margin-bottom: 8px; + margin-bottom: 7px; line-height: 1.1; } .target-examples { - font-size: 12px; + font-size: 11px; color: var(--gray-600); line-height: 1.6; } -/* ── STAIN PROMO ── */ +/* ── EXPERT STAIN PROMO — background: navy ── */ .stain-section { + padding: 88px 80px; background: var(--navy); position: relative; overflow: hidden; @@ -942,7 +1326,8 @@ nav { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; - align-items: center; + align-items: stretch; + /* P2 FIX: Stretch to ensure image matches content height */ position: relative; z-index: 1; } @@ -950,7 +1335,7 @@ nav { .stain-badge { display: inline-block; background: var(--orange); - font-family: var(--font-display); + font-family: var(--fd); font-size: 11px; font-weight: 700; letter-spacing: .12em; @@ -958,18 +1343,18 @@ nav { color: var(--white); padding: 5px 12px; border-radius: 3px; - margin-bottom: 16px; + margin-bottom: 14px; } .stain-h2 { - font-family: var(--font-display); - font-size: clamp(36px, 4vw, 54px); + font-family: var(--fd); + font-size: clamp(36px, 4vw, 56px); font-weight: 800; text-transform: uppercase; color: var(--white); line-height: .95; letter-spacing: -.01em; - margin-bottom: 20px; + margin-bottom: 18px; } .stain-h2 span { @@ -977,24 +1362,25 @@ nav { } .stain-desc { - font-size: 16px; + font-size: 15px; color: rgba(255, 255, 255, .6); - line-height: 1.7; - margin-bottom: 32px; + line-height: 1.75; + margin-bottom: 28px; } -.product-pills { +.stain-pills { display: flex; gap: 10px; flex-wrap: wrap; + margin-bottom: 28px; } -.product-pill { +.stain-pill { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .15); border-radius: 6px; padding: 12px 18px; - font-family: var(--font-display); + font-family: var(--fd); font-size: 14px; font-weight: 600; text-transform: uppercase; @@ -1002,75 +1388,114 @@ nav { letter-spacing: .04em; } -.product-pill strong { +.stain-pill strong { display: block; color: var(--orange); - font-size: 11px; + font-size: 10px; margin-bottom: 2px; } -.stain-targets { +/* stain image area */ +.stain-img-wrap { + border-radius: 12px; + overflow: hidden; + height: 100%; + /* Ensure it fills the grid cell */ + position: relative; + background: rgba(255, 255, 255, .05); + border: 1px solid rgba(255, 255, 255, .1); +} + +.stain-img-wrap img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} + +.stain-img-ph { + position: absolute; + inset: 0; display: flex; flex-direction: column; + align-items: center; + justify-content: center; gap: 12px; } +.stain-img-ph .ph-label { + font-family: var(--fd); + font-size: 12px; + font-weight: 700; + letter-spacing: .08em; + text-transform: uppercase; + color: rgba(255, 255, 255, .25); +} + +.stain-img-ph .ph-sub { + font-size: 11px; + color: rgba(255, 255, 255, .18); + text-align: center; + padding: 0 24px; + line-height: 1.5; +} + +.stain-target-list { + display: flex; + flex-direction: column; + gap: 10px; +} + .stain-target { display: flex; align-items: center; - gap: 14px; + gap: 12px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); border-radius: 8px; - padding: 14px 18px; + padding: 13px 16px; } .stain-target-dot { - width: 8px; - height: 8px; + width: 7px; + height: 7px; border-radius: 50%; background: var(--orange); flex-shrink: 0; } .stain-target-txt { - font-size: 14px; + font-size: 13px; color: rgba(255, 255, 255, .75); } -/* ── CTA ── */ +/* ── CTA — orange ── */ .cta-section { + padding: 80px; background: var(--orange); text-align: center; - padding: 80px; -} - -@media (max-width: 768px) { - .cta-section { - padding: 60px 20px !important; - } } .cta-h2 { - font-family: var(--font-display); - font-size: clamp(42px, 5vw, 72px); + font-family: var(--fd); + font-size: clamp(42px, 5vw, 70px); font-weight: 800; text-transform: uppercase; color: var(--white); - line-height: .95; + line-height: .92; letter-spacing: -.01em; - margin-bottom: 20px; + margin-bottom: 18px; } .cta-sub { - font-size: 18px; - color: rgba(255, 255, 255, .8); - margin-bottom: 40px; + font-size: 17px; + color: rgba(255, 255, 255, .82); + margin-bottom: 36px; } .cta-btns { display: flex; - gap: 16px; + gap: 14px; justify-content: center; flex-wrap: wrap; } @@ -1078,7 +1503,7 @@ nav { .btn-white { background: var(--white); color: var(--orange); - font-family: var(--font-display); + font-family: var(--fd); font-size: 15px; font-weight: 700; letter-spacing: .08em; @@ -1088,12 +1513,18 @@ nav { border-radius: 4px; cursor: pointer; text-decoration: none; + display: inline-block; + transition: background .2s; +} + +.btn-white:hover { + background: var(--cream); } .btn-white-outline { background: transparent; color: var(--white); - font-family: var(--font-display); + font-family: var(--fd); font-size: 15px; font-weight: 700; letter-spacing: .08em; @@ -1104,41 +1535,145 @@ nav { cursor: pointer; transition: border-color .2s; text-decoration: none; + display: inline-block; } .btn-white-outline:hover { border-color: var(--white); } -/* ── FOOTER ── */ -footer { - background: #080F1C; - padding: 56px 80px 32px; +/* ── NEWSLETTER — background: cream ── */ +.newsletter-section { + background: var(--cream); + padding: 80px; + text-align: center; } -@media (max-width: 768px) { - footer { - padding: 60px 20px !important; - } +.newsletter-inner { + max-width: 560px; + margin: 0 auto; +} + +.newsletter-h2 { + font-family: var(--fd); + font-size: clamp(32px, 3.5vw, 48px); + font-weight: 800; + text-transform: uppercase; + color: var(--navy); + line-height: .95; + letter-spacing: -.01em; + margin-bottom: 16px; +} + +.newsletter-h2 span { + color: var(--orange); +} + +.newsletter-sub { + font-size: 15px; + color: var(--gray-600); + line-height: 1.75; + margin-bottom: 32px; +} + +.newsletter-form { + display: flex; + max-width: 480px; + margin: 0 auto; + border: 2px solid var(--gray-200); + border-radius: 8px; + overflow: hidden; + background: var(--white); + transition: border-color .2s; +} + +.newsletter-form:focus-within { + border-color: var(--orange); +} + +.newsletter-input { + flex: 1; + border: none; + padding: 14px 18px; + font-family: var(--fb); + font-size: 14px; + color: var(--gray-800); + background: transparent; + outline: none; +} + +.newsletter-input::placeholder { + color: var(--gray-400); +} + +.newsletter-btn { + background: var(--orange); + color: var(--white); + font-family: var(--fd); + font-size: 13px; + font-weight: 700; + letter-spacing: .07em; + text-transform: uppercase; + padding: 14px 22px; + border: none; + cursor: pointer; + transition: background .2s; + white-space: nowrap; +} + +.newsletter-btn:hover { + background: var(--orange-dark); +} + +.q-form-title { + font-family: var(--fd); + font-size: 17px; + font-weight: 700; + text-transform: uppercase; + color: var(--white); + letter-spacing: .04em; + margin-bottom: 4px; +} + +.q-form-sub { + font-size: 12px; + color: rgba(255, 255, 255, .6); + margin-bottom: 20px; +} + +.newsletter-note { + font-size: 12px; + color: var(--gray-400); + margin-top: 14px; +} + +/* ── FOOTER ── */ +footer { + background: var(--navy); + padding: 80px 80px 40px; + color: var(--white); } .footer-top { display: grid; - grid-template-columns: 2fr 1fr 1fr 1fr; - gap: 48px; - margin-bottom: 48px; - padding-bottom: 48px; + grid-template-columns: 1.5fr 1fr 1fr 1fr; + gap: 60px; border-bottom: 1px solid rgba(255, 255, 255, .08); + padding-bottom: 60px; +} + +.footer-logo-wrap { + margin-bottom: 24px; } .footer-brand-name { - font-family: var(--font-display); - font-size: 24px; + font-family: var(--fd); + font-size: 26px; font-weight: 800; - color: var(--white); text-transform: uppercase; - letter-spacing: .04em; - margin-bottom: 4px; + color: var(--white); + line-height: 1; + letter-spacing: -.02em; } .footer-brand-name span { @@ -1146,11 +1681,31 @@ footer { } .footer-tagline { - font-size: 13px; - color: rgba(255, 255, 255, .4); - margin-bottom: 20px; + font-size: 14px; + color: rgba(255, 255, 255, .6); + line-height: 1.6; + margin-bottom: 12px; + max-width: 280px; } +.footer-territory { + display: inline-flex; + align-items: center; + gap: 8px; + background: rgba(232, 87, 42, 0.12); + border: 1px solid rgba(232, 87, 42, 0.2); + padding: 6px 14px; + border-radius: 6px; + font-family: var(--fd); + font-size: 11px; + font-weight: 800; + text-transform: uppercase; + letter-spacing: 0.08em; + color: var(--orange); + margin-bottom: 24px; +} + + .footer-contact { display: flex; flex-direction: column; @@ -1158,328 +1713,1231 @@ footer { } .footer-contact a { - font-size: 13px; - color: rgba(255, 255, 255, .55); + color: var(--white); text-decoration: none; - transition: color .2s; + font-size: 14px; + opacity: .8; + transition: opacity .2s, color .2s; } .footer-contact a:hover { + opacity: 1; color: var(--orange); } .footer-col-title { - font-family: var(--font-display); + font-family: var(--fd); font-size: 13px; font-weight: 700; - letter-spacing: .1em; text-transform: uppercase; - color: rgba(255, 255, 255, .4); - margin-bottom: 16px; + color: var(--white); + letter-spacing: .08em; + margin-bottom: 24px; } .footer-links { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + gap: 12px; +} + +.footer-links li a { + color: rgba(255, 255, 255, .5); + text-decoration: none; + font-size: 14px; + transition: color .2s; +} + +.footer-links li a:hover { + color: var(--orange); +} + +.footer-bottom { + padding-top: 40px; + display: flex; + justify-content: space-between; + align-items: center; + font-size: 12px; + color: rgba(255, 255, 255, .4); + flex-wrap: wrap; + gap: 12px; +} + +.footer-legal-links { + display: flex; + gap: 24px; + flex-wrap: wrap; +} + +.footer-legal-links a { + color: inherit; + text-decoration: none; + transition: color .2s; +} + +.footer-legal-links a:hover { + color: var(--white); +} + +@media (max-width: 767px) { + .footer-bottom { + flex-direction: column; + /* align-items: flex-start; */ + gap: 10px; + text-align: center; + } + + .footer-legal-links { + flex-direction: column; + gap: 8px; + } +} + + +/* ── T&C CHECKBOX ── */ +.tc-row { + display: flex; + align-items: flex-start; + gap: 12px; + margin-top: 14px; + padding: 12px 14px; + background: rgba(255, 255, 255, .05); + border: 1px solid rgba(255, 255, 255, .1); + border-radius: 8px; + transition: border-color .2s; +} + +.tc-row:has(.tc-check:checked) { + border-color: rgba(22, 163, 74, .4); + background: rgba(22, 163, 74, .07); +} + +.tc-check { + width: 18px; + height: 18px; + flex-shrink: 0; + margin-top: 2px; + accent-color: #16A34A; + cursor: pointer; +} + +.tc-label { + font-size: 12px; + color: rgba(255, 255, 255, .6); + line-height: 1.65; + cursor: pointer; +} + +.tc-label a { + color: var(--orange); + text-decoration: none; + border-bottom: 1px solid rgba(232, 87, 42, .3); + transition: border-color .2s; +} + +.tc-label a:hover { + border-bottom-color: var(--orange); +} + +.tc-row.tc-error { + border-color: rgba(220, 38, 38, .5) !important; + background: rgba(220, 38, 38, .06) !important; +} + +.tc-row.tc-error .tc-label { + color: rgba(255, 120, 100, .9); +} + +/* ── ANIMATIONS ── */ +@keyframes fadeUp { + from { + opacity: 0; + transform: translateY(20px); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + +.hero-eyebrow { + animation: fadeUp .5s ease both; +} + +.hero-h1 { + animation: fadeUp .55s .08s ease both; +} + +.hero-sub { + animation: fadeUp .55s .16s ease both; +} + +.hero-btns { + animation: fadeUp .55s .24s ease both; +} + +.hero-stats { + animation: fadeUp .55s .32s ease both; +} + +.quote-card { + animation: fadeUp .65s .2s ease both; +} + +.reveal { + opacity: 0; + transform: translateY(24px); + transition: opacity .6s ease, transform .6s ease; +} + +.reveal.visible { + opacity: 1; + transform: translateY(0); +} + +/* ── RESPONSIVE ── */ +@media(max-width:1100px) { + .products-grid { + grid-template-columns: repeat(2, 1fr); + } + + .targets-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media(max-width:900px) { + nav { + padding: 0 20px; + } + + .nav-links, + .nav-login, + .nav-cta { + display: none; + } + + .nav-hamburger { + display: flex; + } + + .hero { + grid-template-columns: 1fr; + min-height: auto; + } + + .hero-left { + padding: 60px 24px 36px; + } + + .hero-right { + padding: 0 24px 60px; + } + + .hero-fence-deco { + display: none; + } + + .products-section, + .services-section, + .territory-section, + .targets-section, + .stain-section, + .cta-section, + .newsletter-section, + footer { + padding-left: 24px; + padding-right: 24px; + } + + .products-grid { + grid-template-columns: 1fr 1fr; + gap: 2px; + } + + .services-grid, + .territory-layout, + .stain-layout { + grid-template-columns: 1fr; + gap: 28px; + } + + .targets-grid { + grid-template-columns: 1fr 1fr; + } + + .footer-top { + grid-template-columns: 1fr 1fr; + gap: 28px; + } + + .trust-bar { + flex-wrap: wrap; + } + + .trust-item { + flex: none; + width: 50%; + border-right: none; + border-bottom: 1px solid rgba(255, 255, 255, .15); + } + + .trust-item:nth-child(odd) { + border-right: 1px solid rgba(255, 255, 255, .15); + } + + .frow { + grid-template-columns: 1fr; + } +} + +@media(max-width:580px) { + .products-grid { + grid-template-columns: 1fr; + } + + .targets-grid { + grid-template-columns: 1fr; + } + + .footer-top { + grid-template-columns: 1fr; + } + + .hero-stats { + gap: 16px; + } +} + +::-webkit-scrollbar { + width: 5px; +} + +::-webkit-scrollbar-track { + background: var(--gray-100); +} + +::-webkit-scrollbar-thumb { + background: var(--navy); + border-radius: 3px; +} + +/* ─── CHAIN LINK FENCE SPECIFIC ─── */ +.breadcrumb { + background: var(--gray-100); + padding: 12px 80px; + font-size: 12px; + color: var(--gray-600); + display: flex; + align-items: center; + gap: 8px; + margin-top: 64px; + border-bottom: 1px solid var(--gray-200); +} + +.breadcrumb a { + color: var(--navy-mid); + text-decoration: none; +} + +.breadcrumb a:hover { + color: var(--orange); +} + +.breadcrumb span { + color: var(--gray-400); +} + +.hero-mesh { + position: absolute; + right: 0; + top: 0; + bottom: 0; + width: 45%; + opacity: .07; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 20 L10 0 L30 0 L40 20 L30 40 L10 40 Z' fill='none' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E"); + background-size: 40px 40px; +} + +.hero-inner { + position: relative; + z-index: 2; + max-width: 760px; +} + +.hero-badges { + display: flex; + gap: 10px; + flex-wrap: wrap; + margin-bottom: 40px; +} + +.badge { + font-family: var(--fd); + font-size: 12px; + font-weight: 700; + letter-spacing: .07em; + text-transform: uppercase; + padding: 7px 14px; + border-radius: 4px; + border: 1px solid rgba(255, 255, 255, .2); + color: rgba(255, 255, 255, .8); +} + +.badge-fill { + background: var(--orange); + border-color: var(--orange); + color: var(--white); +} + +.overview { + padding: 80px 80px 64px; + background: var(--white); +} + +.overview-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 64px; + align-items: start; + margin-top: 48px; +} + +.overview-text p { + font-size: 15px; + line-height: 1.8; + color: var(--gray-600); + margin-bottom: 18px; +} + +.overview-text p strong { + color: var(--gray-800); + font-weight: 600; +} + +.check-list { + list-style: none; + display: flex; + flex-direction: column; + gap: 10px; + margin-top: 24px; +} + +.check-list li { + display: flex; + align-items: flex-start; + gap: 12px; + font-size: 14px; + color: var(--gray-700); + line-height: 1.5; +} + +.check-list li::before { + content: '✓'; + width: 22px; + height: 22px; + border-radius: 50%; + background: rgba(232, 87, 42, .12); + color: var(--orange); + font-size: 12px; + font-weight: 700; + flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + margin-top: 1px; +} + +.use-cards { + display: flex; + flex-direction: column; + gap: 16px; +} + +.use-card { + background: var(--gray-100); + border-radius: 10px; + padding: 20px 24px; + border-left: 3px solid var(--orange); +} + +.use-card-title { + font-family: var(--fd); + font-size: 17px; + font-weight: 700; + text-transform: uppercase; + color: var(--navy); + letter-spacing: .02em; + margin-bottom: 6px; +} + +.use-card-desc { + font-size: 13px; + color: var(--gray-600); + line-height: 1.6; +} + +.use-card-tags { + display: flex; + gap: 6px; + flex-wrap: wrap; + margin-top: 10px; +} + +.mini-tag { + font-size: 10px; + font-weight: 600; + letter-spacing: .06em; + text-transform: uppercase; + padding: 3px 8px; + border-radius: 3px; + background: rgba(15, 36, 68, .07); + color: var(--navy-light); +} + +.materials { + padding: 80px; + background: var(--gray-100); +} + +.materials-intro { + display: flex; + align-items: flex-end; + justify-content: space-between; + margin-bottom: 48px; + flex-wrap: wrap; + gap: 20px; +} + +.materials-intro p { + font-size: 15px; + color: var(--gray-600); + max-width: 380px; + line-height: 1.7; +} + +.cat-tabs { + display: flex; + gap: 8px; + flex-wrap: wrap; + margin-bottom: 32px; +} + +.cat-tab { + font-family: var(--fd); + font-size: 13px; + font-weight: 600; + letter-spacing: .06em; + text-transform: uppercase; + padding: 8px 18px; + border-radius: 4px; + cursor: pointer; + border: 1.5px solid var(--gray-200); + background: var(--white); + color: var(--gray-600); + transition: all .2s; +} + +.cat-tab:hover { + border-color: var(--orange); + color: var(--orange); +} + +.cat-tab.active { + background: var(--navy); + color: var(--white); + border-color: var(--navy); +} + +.mat-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 2px; + background: var(--gray-200); + border: 2px solid var(--gray-200); + border-radius: 12px; + overflow: hidden; +} + +.mat-card { + background: var(--white); + padding: 28px 24px; + transition: background .2s; + cursor: pointer; + position: relative; + overflow: hidden; +} + +.mat-card::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 3px; + background: var(--orange); + transform: scaleX(0); + transform-origin: left; + transition: transform .3s; +} + +.mat-card:hover { + background: var(--navy); +} + +.mat-card:hover::after { + transform: scaleX(1); +} + +.mat-card:hover .mat-name { + color: var(--white); +} + +.mat-card:hover .mat-desc { + color: rgba(255, 255, 255, .55); +} + +.mat-card:hover .mat-spec { + background: rgba(232, 87, 42, .2); + color: var(--orange-light); +} + +.mat-card:hover .mat-num { + color: rgba(255, 255, 255, .1); +} + +.mat-card:hover .mat-arrow { + color: var(--orange); +} + +.mat-img-wrap { + width: 100%; + aspect-ratio: 16/9; + background: var(--gray-100); + border-bottom: 1px solid var(--gray-200); + position: relative; + overflow: hidden; +} + +.mat-img-wrap img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; + transition: transform .4s ease; +} + +.mat-card:hover .mat-img-wrap img { + transform: scale(1.05); +} + +.mat-num { + font-family: var(--fd); + font-size: 40px; + font-weight: 800; + color: rgba(15, 36, 68, .06); + line-height: 1; + margin-bottom: -10px; + letter-spacing: -.02em; + transition: color .2s; +} + +.mat-icon { + width: 40px; + height: 40px; + background: var(--orange); + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 16px; +} + +.mat-icon svg { + width: 20px; + height: 20px; +} + +.mat-name { + font-family: var(--fd); + font-size: 18px; + font-weight: 700; + text-transform: uppercase; + color: var(--navy); + letter-spacing: .02em; + margin-bottom: 8px; + transition: color .2s; + line-height: 1.1; +} + +.mat-desc { + font-size: 13px; + color: var(--gray-600); + line-height: 1.6; + margin-bottom: 14px; + transition: color .2s; +} + +.mat-specs { + display: flex; + gap: 5px; + flex-wrap: wrap; + margin-bottom: 12px; +} + +.mat-spec { + font-size: 10px; + font-weight: 600; + letter-spacing: .05em; + text-transform: uppercase; + padding: 3px 7px; + border-radius: 3px; + background: rgba(15, 36, 68, .07); + color: var(--navy-light); + transition: background .2s, color .2s; +} + +.mat-arrow { + font-size: 16px; + color: var(--gray-400); + transition: color .2s; +} + +.mat-img-ph { + position: absolute; + inset: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 7px; +} + +.mat-img-ph svg { + opacity: .22; +} + +.mat-img-ph-lbl { + font-family: var(--fd); + font-size: 9px; + font-weight: 700; + letter-spacing: .08em; + text-transform: uppercase; + color: var(--gray-400); + text-align: center; + padding: 0 10px; +} + +.mat-img-ph-sub { + font-size: 9px; + color: var(--gray-400); + text-align: center; + padding: 0 10px; + line-height: 1.4; +} + +.finishes { + padding: 80px; + background: var(--white); +} + +.finish-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 24px; + margin-top: 48px; +} + +.finish-card { + border-radius: 12px; + padding: 40px 36px; + position: relative; + overflow: hidden; +} + +.finish-card.galv { + background: var(--navy); +} + +.finish-card.vinyl { + background: var(--gray-800); +} + +.finish-card h3 { + font-family: var(--fd); + font-size: 28px; + font-weight: 800; + text-transform: uppercase; + color: var(--white); + letter-spacing: .04em; + margin-bottom: 12px; +} + +.finish-card h3 span { + color: var(--orange); +} + +.finish-card p { + font-size: 14px; + color: rgba(255, 255, 255, .6); + line-height: 1.75; + margin-bottom: 24px; +} + +.finish-list { list-style: none; display: flex; flex-direction: column; gap: 8px; } -.footer-links a { +.finish-list li { font-size: 13px; - color: rgba(255, 255, 255, .6); - text-decoration: none; - transition: color .2s; -} - -.footer-links a:hover { - color: var(--orange); -} - -.footer-bottom { + color: rgba(255, 255, 255, .7); display: flex; align-items: center; - justify-content: center; - text-align: center; - font-size: 12px; - color: rgba(255, 255, 255, .25); + gap: 10px; } -.footer-territory { - display: inline-flex; - align-items: center; - gap: 6px; - background: rgba(232, 87, 42, .15); - color: var(--orange); - border-radius: 3px; - padding: 3px 10px; - font-family: var(--font-display); - font-size: 11px; - font-weight: 600; - letter-spacing: .06em; - text-transform: uppercase; - margin-top: 10px; +.finish-list li::before { + content: ''; + width: 6px; + height: 6px; + border-radius: 50%; + background: var(--orange); + flex-shrink: 0; } -/* ── SECTIONS & COMPONENTS ── */ -.section-padding { - padding: 80px 0; +.finish-deco { + position: absolute; + right: -30px; + bottom: -30px; + width: 160px; + height: 160px; + border-radius: 50%; + border: 28px solid var(--orange); + opacity: .1; } -/* Testimonials */ -.testimonials-section { - background: var(--navy); - color: var(--white); +.compare { + padding: 80px; + background: var(--cream); } -.testimonials-grid { +.compare-grid { display: grid; - grid-template-columns: repeat(3, 1fr); + grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 48px; } -.testimonial-card { - background: rgba(255, 255, 255, .05); - border: 1px solid rgba(255, 255, 255, .1); +.compare-card { + background: var(--white); border-radius: 12px; - padding: 32px; - display: flex; - flex-direction: column; -} - -.testimonial-quote { - font-size: 15px; - line-height: 1.7; - color: rgba(255, 255, 255, .8); - margin-bottom: 24px; - flex: 1; -} - -.testimonial-author { - font-family: var(--font-display); - font-size: 16px; - font-weight: 700; - color: var(--white); -} - -.testimonial-role { - font-size: 13px; - color: var(--orange); - margin-top: 4px; -} - -/* FAQ */ -.faq-section { - background: var(--white); -} - -.faq-list { - max-width: 800px; - margin: 48px auto 0; - display: flex; - flex-direction: column; - gap: 16px; -} - -.faq-item { border: 1px solid var(--gray-200); - border-radius: 8px; - /* padding: 24px; */ - background: var(--white); + padding: 36px 32px; transition: border-color .2s; } -.faq-item:hover { +.compare-card:hover { border-color: var(--orange); } -.faq-question { - font-family: var(--font-display); - font-size: 18px; +.compare-label { + font-family: var(--fd); + font-size: 11px; font-weight: 700; - color: var(--navy); + letter-spacing: .12em; + text-transform: uppercase; + color: var(--orange); margin-bottom: 12px; } -.faq-answer { - font-size: 14px; - color: var(--gray-600); - line-height: 1.6; +.compare-card h3 { + font-family: var(--fd); + font-size: 26px; + font-weight: 800; + text-transform: uppercase; + color: var(--navy); + letter-spacing: .03em; + margin-bottom: 16px; } -/* ── RESPONSIVE ── */ -@media (max-width: 1024px) { - .hero { +.compare-card p { + font-size: 14px; + color: var(--gray-600); + line-height: 1.75; + margin-bottom: 20px; +} + +.spec-table { + width: 100%; + border-collapse: collapse; +} + +.spec-table tr { + border-bottom: 1px solid var(--gray-100); +} + +.spec-table td { + padding: 9px 0; + font-size: 13px; +} + +.spec-table td:first-child { + color: var(--gray-600); + width: 44%; +} + +.spec-table td:last-child { + color: var(--navy); + font-weight: 600; + text-align: right; +} + +.seo-content { + padding: 80px; + background: var(--white); +} + +.seo-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 64px; + margin-top: 48px; +} + +.faq { + display: flex; + flex-direction: column; + gap: 0; +} + +.faq-item { + border-bottom: 1px solid var(--gray-200); + overflow: hidden; +} + +.faq-q { + font-family: var(--fd); + font-size: 16px; + font-weight: 700; + text-transform: uppercase; + color: var(--navy); + letter-spacing: .02em; + padding: 18px 0; + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + transition: color .2s; + user-select: none; +} + +.faq-q:hover { + color: var(--orange); +} + +.faq-q .faq-icon { + width: 22px; + height: 22px; + border-radius: 50%; + background: rgba(232, 87, 42, .1); + color: var(--orange); + display: flex; + align-items: center; + justify-content: center; + font-size: 16px; + flex-shrink: 0; + transition: transform .3s; +} + +.faq-item.open .faq-icon { + transform: rotate(45deg); +} + +.faq-a { + font-size: 14px; + color: var(--gray-600); + line-height: 1.75; + max-height: 0; + overflow: hidden; + transition: max-height .35s ease, padding .3s; + padding-bottom: 0; +} + +.faq-item.open .faq-a { + max-height: 400px; + padding-bottom: 18px; +} + +.content-block h3 { + font-family: var(--fd); + font-size: 20px; + font-weight: 700; + text-transform: uppercase; + color: var(--navy); + letter-spacing: .03em; + margin-bottom: 12px; + margin-top: 28px; +} + +.content-block p { + font-size: 14px; + color: var(--gray-600); + line-height: 1.8; + margin-bottom: 14px; +} + +.territory { + padding: 80px; + background: var(--navy); +} + +.territory-intro { + font-size: 15px; + color: rgba(255, 255, 255, .6); + line-height: 1.7; + max-width: 560px; + margin-top: 16px; + margin-bottom: 48px; +} + +.region-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 20px; +} + +.region-block { + background: rgba(255, 255, 255, .05); + border: 1px solid rgba(255, 255, 255, .1); + border-radius: 10px; + padding: 22px 20px; + transition: all .2s; +} + +.region-block:hover { + background: rgba(232, 87, 42, .1); + border-color: rgba(232, 87, 42, .3); +} + +.region-name { + font-family: var(--fd); + font-size: 14px; + font-weight: 700; + text-transform: uppercase; + color: var(--orange); + letter-spacing: .06em; + margin-bottom: 12px; + padding-bottom: 10px; + border-bottom: 1px solid rgba(255, 255, 255, .1); +} + +.region-cities { + list-style: none; + display: flex; + flex-direction: column; + gap: 5px; +} + +.region-cities li { + font-size: 12px; + color: rgba(255, 255, 255, .6); +} + +.region-cities li.primary { + color: rgba(255, 255, 255, .9); + font-weight: 500; +} + +.region-cities a { + color: inherit; + text-decoration: none; + transition: color .2s; +} + +.region-cities a:hover { + color: var(--orange); +} + +.quote-cta { + padding: 80px; + background: var(--orange); +} + +.quote-inner { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 64px; + align-items: center; +} + +.quote-left h2 { + font-family: var(--fd); + font-size: clamp(38px, 4vw, 60px); + font-weight: 800; + text-transform: uppercase; + color: var(--white); + line-height: .92; + letter-spacing: -.01em; + margin-bottom: 16px; +} + +.quote-left p { + font-size: 16px; + color: rgba(255, 255, 255, .8); + line-height: 1.7; +} + +.quote-form-card { + background: rgba(255, 255, 255, .12); + border: 1px solid rgba(255, 255, 255, .2); + border-radius: 12px; + padding: 32px; + backdrop-filter: blur(8px); +} + +.ql { + display: block; + font-size: 11px; + font-weight: 600; + letter-spacing: .08em; + text-transform: uppercase; + color: rgba(255, 255, 255, .6); + margin-bottom: 6px; +} + +.qi { + width: 100%; + background: rgba(255, 255, 255, .15); + border: 1px solid rgba(255, 255, 255, .25); + border-radius: 6px; + padding: 11px 14px; + font-family: var(--fb); + font-size: 14px; + color: var(--white); + outline: none; + transition: border-color .2s; + margin-bottom: 12px; + appearance: none; +} + +.qi::placeholder { + color: rgba(255, 255, 255, .45); +} + +.qi:focus { + border-color: rgba(255, 255, 255, .7); +} + +.qi option { + background: var(--navy); +} + +.qrow { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 12px; +} + +.qbtn { + width: 100%; + background: var(--white); + color: var(--orange); + font-family: var(--fd); + font-size: 16px; + font-weight: 700; + letter-spacing: .08em; + text-transform: uppercase; + padding: 14px; + border: none; + border-radius: 6px; + cursor: pointer; + margin-top: 4px; + transition: background .2s; +} + +.qbtn:hover { + background: var(--cream); +} + +@media (max-width: 900px) { + + .breadcrumb, + .overview, + .materials, + .finishes, + .compare, + .seo-content, + .territory, + .quote-cta { + padding-left: 24px; + padding-right: 24px; + } + + .overview-grid, + .finish-grid, + .compare-grid, + .seo-grid, + .quote-inner { grid-template-columns: 1fr; + gap: 32px; } - .hero-right { - padding: 40px 48px 80px; - } - - .products-grid { - grid-template-columns: repeat(2, 1fr); - } - - .footer-top { + .mat-grid, + .region-grid { grid-template-columns: 1fr 1fr; } - .targets-grid { - grid-template-columns: repeat(2, 1fr); - } - - .stain-layout { - grid-template-columns: 1fr; - } - - .contact-layout { - grid-template-columns: 1fr !important; - gap: 48px !important; - } - - .about-layout { - grid-template-columns: 1fr !important; - gap: 64px !important; - } - - .testimonials-grid { - grid-template-columns: repeat(2, 1fr); - } -} - -@media (max-width: 768px) { - .section-padding { - padding: 60px 0; - } - - nav { - padding: 0 24px; - } - - /* Removed display: none to allow mobile menu logic to work */ - - .hero-left { - padding: 60px 0; - } - - .hero-h1 { - font-size: 38px; - margin-bottom: 20px; - } - - .hero-sub { - font-size: 15px; - line-height: 1.6; - margin-bottom: 32px; - } - - .hero-right { - padding: 20px 0 10px; - } - - .quote-card { - padding: 24px 20px; - } - - .form-row { - grid-template-columns: 1fr; - gap: 0; - } - - .hero-stats { - gap: 20px; - flex-wrap: wrap; - } - - .stat-val { - font-size: 28px; - } - - .products-grid { - grid-template-columns: 1fr; - } - - .testimonials-grid { - grid-template-columns: 1fr; - } - - .services-grid { - grid-template-columns: 1fr; - } - - .territory-layout { - grid-template-columns: 1fr; - } - - /* .footer-top { - grid-template-columns: 1fr; - } */ -} - -@media (max-width: 424px) { - .footer-top { + .qrow { grid-template-columns: 1fr; } } +.territory .sh { + color: var(--white); +} /* ── AUTH PAGES ── */ -.auth-page { - /* min-height: 100vh; */ - padding-top: calc(80px + 64px); - /* 80px spacing + 64px for fixed navbar */ - /* padding-bottom: 80px; */ +.login-page-wrapper { background: var(--navy); + min-height: 100vh; +} + +.auth-page { + padding: calc(80px + 64px) 24px 80px; + background: #f5f2ed; display: flex; align-items: flex-start; justify-content: center; position: relative; overflow: hidden; + min-height: calc(100vh - 64px); } -.auth-page::before { - content: ''; - position: absolute; - top: -100px; - left: -100px; - width: 400px; - height: 400px; - border-radius: 50%; - background: var(--orange); - opacity: .05; -} - -.auth-page::after { - content: ''; - position: absolute; - bottom: -100px; - right: -100px; - width: 400px; - height: 400px; - border-radius: 50%; - background: var(--orange); - opacity: .05; -} .auth-card { width: 100%; max-width: 440px; - background: rgba(255, 255, 255, .03); - border: 1px solid rgba(255, 255, 255, .1); + background: var(--white); + border: 1px solid var(--gray-200); border-radius: 16px; - padding: 35px; - backdrop-filter: blur(20px); + padding: 40px; + box-shadow: 0 8px 32px rgba(15, 36, 68, 0.1); position: relative; z-index: 2; } .auth-title { - font-family: var(--font-display); + font-family: var(--fd); font-size: 32px; font-weight: 800; - color: var(--white); + color: var(--navy); text-transform: uppercase; letter-spacing: .02em; margin-bottom: 8px; @@ -1490,1286 +2948,2047 @@ footer { color: var(--orange); } -.auth-sub { - font-size: 14px; - color: rgba(255, 255, 255, .5); - text-align: center; - margin-bottom: 40px; - line-height: 1.6; -} - .auth-form { display: flex; flex-direction: column; } -/* ── ABOUT PAGE ── */ -.about-page-wrapper { - min-height: 100vh; +.form-group { + margin-bottom: 20px; +} + +.form-label { + display: block; + font-size: 11px; + font-weight: 700; + letter-spacing: .08em; + text-transform: uppercase; + color: var(--gray-600); + margin-bottom: 6px; +} + +.form-input { + width: 100%; + background: var(--gray-100); + border: 1px solid var(--gray-200); + border-radius: 6px; + padding: 11px 14px; + font-family: var(--fb); + font-size: 14px; + color: var(--gray-800); + outline: none; + transition: border-color .2s; +} + +.form-input::placeholder { + color: var(--gray-400); +} + +.form-input:focus { + border-color: var(--orange); background: var(--white); } -.about-hero-section { - min-height: 350px; - display: flex; - align-items: center; - padding-top: 130px; -} - -.about-hero-left { - padding: 0; +.form-submit { width: 100%; + background: var(--orange); + color: var(--white); + font-family: var(--fd); + font-size: 16px; + font-weight: 700; + letter-spacing: .08em; + text-transform: uppercase; + padding: 14px; + border: none; + border-radius: 6px; + cursor: pointer; + margin-top: 6px; + transition: background .2s; } -.about-hero-h1 { - margin-bottom: 16px; +.form-submit:hover { + background: var(--orange-dark); } -.about-hero-sub { - max-width: 600px; - margin-bottom: 0; +.form-submit:disabled { + opacity: 0.7; + cursor: not-allowed; } -.about-story-container { - max-width: 1200px; - margin: 0 auto; - /* padding: 0 20px; */ + +.section { + padding: 80px 0; } -.about-story-layout { +/* ── CONTACT PAGE Styles ── */ +.contact-page { + background: var(--white); +} + +.contact-page .hero { + background: var(--navy); + padding: 72px 80px 64px; + position: relative; + overflow: hidden; + margin-top: 0; +} + +.contact-page .hero-grid { + position: absolute; + inset: 0; + opacity: .035; + background-image: repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255, 255, 255, .6) 39px, rgba(255, 255, 255, .6) 40px), repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255, 255, 255, .6) 39px, rgba(255, 255, 255, .6) 40px); +} + +.contact-page .hero-accent { + position: absolute; + right: -60px; + top: 60px; + width: 380px; + height: 380px; + border-radius: 50%; + border: 52px solid var(--orange); + opacity: .1; +} + +.contact-page .hero-inner { + position: relative; + z-index: 2; display: grid; - grid-template-columns: 1.2fr 1fr; + grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; + max-width: 1400px; + margin: 0 auto; } -@media (max-width: 1024px) { - .about-story-layout { - grid-template-columns: 1fr; - gap: 40px; - } +.contact-page .hero-eyebrow { + display: inline-flex; + align-items: center; + gap: 10px; + font-family: var(--fd); + font-size: 12px; + font-weight: 700; + letter-spacing: .14em; + text-transform: uppercase; + color: var(--orange); + margin-bottom: 18px; } -.about-story-h2 { +.contact-page .hero-eyebrow::before { + content: ''; + display: block; + width: 24px; + height: 2px; + background: var(--orange); +} + +.contact-page h1 { + font-family: var(--fd); + font-size: clamp(42px, 5vw, 70px); + font-weight: 800; + text-transform: uppercase; + color: var(--white); + line-height: .92; + letter-spacing: -.01em; + margin-bottom: 18px; +} + +.contact-page h1 em { + color: var(--orange); + font-style: normal; + display: block; +} + +.contact-page .hero-desc { + font-size: 15px; + font-weight: 300; + line-height: 1.85; + color: rgba(255, 255, 255, .65); margin-bottom: 32px; } -.about-story-text { - font-size: 17px; +.contact-page .hero-desc strong { + color: rgba(255, 255, 255, .9); + font-weight: 500; +} + +.contact-pills { + display: flex; + flex-direction: column; + gap: 12px; +} + +.contact-pill { + display: flex; + align-items: center; + gap: 14px; + background: rgba(255, 255, 255, .06); + border: 1px solid rgba(255, 255, 255, .12); + border-radius: 10px; + padding: 16px 20px; + text-decoration: none; + transition: background .2s, border-color .2s; + cursor: pointer; +} + +.contact-pill:hover { + background: rgba(232, 87, 42, .12); + border-color: rgba(232, 87, 42, .3); +} + +.cp-icon { + width: 42px; + height: 42px; + border-radius: 8px; + background: var(--orange); + display: flex; + align-items: center; + justify-content: center; + font-size: 18px; + flex-shrink: 0; +} + +.cp-label { + font-family: var(--fd); + font-size: 11px; + font-weight: 700; + letter-spacing: .09em; + text-transform: uppercase; + color: rgba(255, 255, 255, .45); + margin-bottom: 2px; +} + +.cp-value { + font-family: var(--fd); + font-size: 16px; + font-weight: 700; + color: var(--white); + letter-spacing: .03em; +} + +.cp-sub { + font-size: 11px; + color: rgba(255, 255, 255, .5); + margin-top: 1px; +} + +.hero-response { + display: inline-flex; + align-items: center; + gap: 8px; + background: rgba(22, 163, 74, .15); + border: 1px solid rgba(22, 163, 74, .3); + border-radius: 6px; + padding: 8px 16px; + font-family: var(--fd); + font-size: 12px; + font-weight: 700; + letter-spacing: .07em; + text-transform: uppercase; + color: #4ADE80; + margin-top: 20px; +} + +/* QUOTE FORM */ +.contact-page .form-card { + background: rgba(255, 255, 255, .07); + border: 1px solid rgba(255, 255, 255, .12); + border-radius: 14px; + padding: 36px; + backdrop-filter: blur(10px); +} + +.contact-page .form-title { + font-family: var(--fd); + font-size: 22px; + font-weight: 700; + text-transform: uppercase; + color: var(--white); + letter-spacing: .04em; + margin-bottom: 4px; +} + +.contact-page .form-sub { + font-size: 13px; + color: rgba(255, 255, 255, .45); + margin-bottom: 22px; +} + +.contact-page .fl { + display: block; + font-size: 10px; + font-weight: 700; + letter-spacing: .1em; + text-transform: uppercase; + color: rgba(255, 255, 255, .5); + margin-bottom: 6px; + margin-top: 14px; +} + +.contact-page .fl:first-of-type, +.contact-page .fl.first { + margin-top: 0; +} + +.contact-page .fi { + width: 100%; + background: rgba(255, 255, 255, .08); + border: 1px solid rgba(255, 255, 255, .14); + border-radius: 6px; + padding: 11px 14px; + font-family: var(--fb); + font-size: 14px; + color: var(--white); + outline: none; + transition: border-color .2s; + appearance: none; +} + +.contact-page .fi::placeholder { + color: rgba(255, 255, 255, .3); +} + +.contact-page .fi:focus { + border-color: var(--orange); +} + +.contact-page .fi option { + background: var(--navy); +} + +.contact-page .fi-ta { + min-height: 90px; + resize: vertical; +} + +.contact-page .frow { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 12px; +} + +.contact-page .form-btn { + width: 100%; + background: var(--orange); + color: var(--white); + font-family: var(--fd); + font-size: 16px; + font-weight: 700; + letter-spacing: .08em; + text-transform: uppercase; + padding: 14px; + border: none; + border-radius: 6px; + cursor: pointer; + margin-top: 16px; + transition: background .2s; +} + +.contact-page .form-btn:hover { + background: var(--orange-dark); +} + +.contact-page .form-btn:disabled { + opacity: 0.7; + cursor: not-allowed; +} + +.contact-page .form-note { + text-align: center; + font-size: 11px; + color: rgba(255, 255, 255, .3); + margin-top: 10px; +} + +.form-success { + text-align: center; + padding: 24px; + background: rgba(22, 163, 74, .1); + border: 1px solid rgba(22, 163, 74, .3); + border-radius: 8px; + margin-top: 12px; +} + +.fs-icon { + font-size: 36px; + margin-bottom: 8px; +} + +.form-success p { + font-size: 14px; + color: #4ADE80; + font-family: var(--fd); + font-weight: 700; + text-transform: uppercase; + letter-spacing: .04em; +} + +/* INFO SECTION */ +.info-section { + padding: 72px 80px; + background: var(--gray-100); +} + +.info-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 24px; + margin-top: 44px; +} + +.info-card { + background: var(--white); + border-radius: 12px; + padding: 28px 24px; + border: 1px solid var(--gray-200); +} + +.ic-icon { + font-size: 28px; + margin-bottom: 14px; +} + +.ic-title { + font-family: var(--fd); + font-size: 18px; + font-weight: 700; + text-transform: uppercase; + color: var(--navy); + letter-spacing: .03em; + margin-bottom: 12px; +} + +.ic-rows { + display: flex; + flex-direction: column; + gap: 8px; +} + +.ic-row { + display: flex; + justify-content: space-between; + align-items: center; + font-size: 13px; + padding: 7px 0; + border-bottom: 1px solid var(--gray-100); +} + +.ic-row:last-child { + border-bottom: none; +} + +.ic-key { color: var(--gray-600); - line-height: 1.8; +} + +.ic-val { + font-weight: 600; + color: var(--navy); + text-align: right; +} + +.ic-val.orange { + color: var(--orange); +} + +.ic-val.green { + color: var(--green); +} + +/* EXPECT SECTION */ +.expect-section { + padding: 72px 80px; + background: var(--white); +} + +.expect-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 24px; + margin-top: 44px; +} + +.expect-step { + text-align: center; + padding: 0 8px; +} + +.es-num { + font-family: var(--fd); + font-size: 52px; + font-weight: 800; + color: var(--orange); + line-height: 1; + margin-bottom: 10px; +} + +.es-title { + font-family: var(--fd); + font-size: 16px; + font-weight: 700; + text-transform: uppercase; + color: var(--navy); + letter-spacing: .03em; + margin-bottom: 8px; +} + +.es-desc { + font-size: 13px; + color: var(--gray-600); + line-height: 1.75; +} + +/* FAQ SECTION */ +.faq-section { + padding: 80px; + background: var(--white); +} + +.faq-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 48px; + margin-top: 48px; +} + +.faq { + display: flex; + flex-direction: column; +} + +.faq-item { + border-bottom: 1px solid var(--gray-200); +} + +.faq-q { + font-family: var(--fd); + font-size: 15px; + font-weight: 700; + text-transform: uppercase; + color: var(--navy); + letter-spacing: .02em; + padding: 18px 0; + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + transition: color .2s; + user-select: none; +} + +.faq-q:hover { + color: var(--orange); +} + +.faq-icon { + width: 22px; + height: 22px; + border-radius: 50%; + background: rgba(232, 87, 42, .1); + color: var(--orange); + display: flex; + align-items: center; + justify-content: center; + font-size: 16px; + flex-shrink: 0; + transition: transform .3s; +} + +.faq-item.open .faq-icon { + transform: rotate(45deg); +} + +.faq-a { + font-size: 14px; + color: var(--gray-600); + line-height: 1.75; + max-height: 0; + overflow: hidden; + transition: max-height .35s ease, padding .3s; +} + +.faq-item.open .faq-a { + max-height: 400px; + padding-bottom: 18px; +} + +/* NEWSLETTER */ +.contact-page .newsletter-section { + padding: 64px 80px; + background: var(--white); + text-align: center; +} + +.nl-inner { + max-width: 520px; + margin: 0 auto; +} + +.nl-eye { + font-family: var(--fd); + font-size: 11px; + font-weight: 700; + letter-spacing: .14em; + text-transform: uppercase; + color: var(--orange); + margin-bottom: 12px; + display: flex; + align-items: center; + justify-content: center; + gap: 10px; +} + +.nl-eye::before, +.nl-eye::after { + content: ''; + display: block; + width: 22px; + height: 2px; + background: var(--orange); +} + +.contact-page .nl-h2 { + font-family: var(--fd); + font-size: clamp(28px, 3.5vw, 44px); + font-weight: 800; + text-transform: uppercase; + color: var(--navy); + line-height: .95; + letter-spacing: -.01em; + margin-bottom: 14px; +} + +.contact-page .nl-h2 span { + color: var(--orange); +} + +.nl-sub { + font-size: 14px; + color: var(--gray-600); + line-height: 1.75; + margin-bottom: 28px; +} + +.nl-form { + display: flex; + max-width: 460px; + margin: 0 auto; + border: 2px solid var(--gray-200); + border-radius: 8px; + overflow: hidden; + background: var(--white); + transition: border-color .2s; +} + +.nl-form:focus-within { + border-color: var(--orange); +} + +.nl-input { + flex: 1; + border: none; + padding: 14px 18px; + font-family: var(--fb); + font-size: 14px; + color: var(--gray-800); + background: transparent; + outline: none; +} + +.nl-btn { + background: var(--orange); + color: var(--white); + font-family: var(--fd); + font-size: 13px; + font-weight: 700; + letter-spacing: .07em; + text-transform: uppercase; + padding: 14px 22px; + border: none; + cursor: pointer; + transition: background .2s; +} + +.nl-btn:hover { + background: var(--orange-dark); +} + +@media (max-width: 425px) { + + .nl-btn, + .newsletter-btn { + padding: 14px 7px; + font-size: 10px; + } +} + +.nl-note { + font-size: 12px; + color: var(--gray-400); + margin-top: 12px; +} + +/* T&C CHECKBOX */ +.contact-page .tc-row { + display: flex; + align-items: flex-start; + gap: 12px; + margin-top: 14px; + padding: 14px 16px; + background: rgba(255, 255, 255, .07); + border: 1px solid rgba(255, 255, 255, .12); + border-radius: 8px; + cursor: pointer; + transition: border-color .2s, background .2s; +} + +.contact-page .tc-row:hover { + background: rgba(255, 255, 255, .1); +} + +.contact-page .tc-row.checked { + border-color: rgba(22, 163, 74, .45); + background: rgba(22, 163, 74, .08); +} + +.contact-page .tc-row.tc-error { + border-color: rgba(220, 38, 38, .5) !important; + background: rgba(220, 38, 38, .06) !important; + animation: shake-contact .3s ease; +} + +@keyframes shake-contact { + 0% { + transform: translateX(0) + } + + 20% { + transform: translateX(-5px) + } + + 40% { + transform: translateX(5px) + } + + 60% { + transform: translateX(-4px) + } + + 80% { + transform: translateX(4px) + } + + 100% { + transform: translateX(0) + } +} + +.tc-check { + width: 18px; + height: 18px; + flex-shrink: 0; + margin-top: 2px; + accent-color: #16A34A; + cursor: pointer; +} + +.tc-label { + font-size: 12px; + color: rgba(255, 255, 255, .62); + line-height: 1.7; + cursor: pointer; + user-select: none; +} + +.tc-label a { + color: var(--orange); + text-decoration: none; + border-bottom: 1px solid rgba(232, 87, 42, .3); +} + +.tc-label a:hover { + border-bottom-color: var(--orange); +} + +.tc-error-msg { + font-size: 11px; + color: #FCA5A5; + margin-top: 6px; + padding-left: 30px; + font-weight: 500; +} + +/* COMMON */ +.se { + font-family: var(--fd); + font-size: 11px; + font-weight: 700; + letter-spacing: .14em; + text-transform: uppercase; + color: var(--orange); + margin-bottom: 12px; + display: flex; + align-items: center; + gap: 10px; +} + +.se::before { + content: ''; + display: block; + width: 22px; + height: 2px; + background: var(--orange); +} + +.contact-page h2.sh { + font-family: var(--fd); + font-size: clamp(34px, 4vw, 52px); + font-weight: 800; + text-transform: uppercase; + line-height: .95; + color: var(--navy); + letter-spacing: -.01em; +} + +.contact-page h2.sh span { + color: var(--orange); +} + +@media(max-width:900px) { + .contact-page .hero { + padding: 52px 24px 48px; + } + + .contact-page .hero-inner { + grid-template-columns: 1fr; + gap: 36px; + } + + .contact-page .info-section, + .contact-page .expect-section, + .contact-page .faq-section, + .contact-page .newsletter-section { + padding-left: 24px !important; + padding-right: 24px !important; + } + + .contact-page .info-grid, + .contact-page .expect-grid, + .contact-page .faq-grid, + .contact-page .frow { + grid-template-columns: 1fr; + } +} + +/* CTA SECTION */ +.contact-page .cta-section { + padding: 80px 24px; + background: var(--orange); + text-align: center; + overflow: hidden; +} + +.contact-page .cta-inner { + max-width: 700px; + margin: 0 auto; + width: 100%; +} + +.contact-page .cta-h2 { + font-family: var(--fd); + font-size: clamp(28px, 5vw, 60px); + font-weight: 800; + text-transform: uppercase; + color: var(--white); + line-height: .95; + letter-spacing: -.01em; + margin-bottom: 16px; +} + +.contact-page .cta-sub { + font-size: 15px; + color: rgba(255, 255, 255, .9); + margin-bottom: 36px; + font-weight: 300; + word-break: break-word; +} + +.cta-btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 12px; + background: var(--white); + color: var(--orange); + font-family: var(--fb); + font-size: clamp(14px, 3vw, 18px); + font-weight: 700; + padding: 16px 28px; + border-radius: 8px; + text-decoration: none; + transition: transform .2s, box-shadow .2s; + box-shadow: 0 4px 15px rgba(0, 0, 0, .1); + max-width: 100%; + word-break: break-all; + overflow-wrap: break-word; + white-space: normal; + text-align: center; +} + +.cta-btn:hover { + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(0, 0, 0, .15); +} + +.cta-btn-icon { + color: var(--orange); + display: flex; + align-items: center; +} + +/* COVERAGE SECTION */ +.coverage-section { + padding: 80px 80px; + background: var(--navy); + color: var(--white); +} + +.sh-white { + color: var(--white) !important; +} + +.coverage-layout { + display: grid; + grid-template-columns: 500px 1fr; + gap: 60px; + margin-top: 44px; + align-items: start; +} + +.coverage-map { + border: 1px solid rgba(255, 255, 255, .08); + border-radius: 12px; + overflow: hidden; + background: rgba(255, 255, 255, .02); + box-shadow: 0 20px 40px rgba(0, 0, 0, .3); + width: 100%; + max-width: 500px; +} + +.contact-page .region-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 24px; +} + +.contact-page .region-block { + border-top: 1px solid rgba(255, 255, 255, .1); + padding-top: 20px; +} + +.contact-page .region-name { + font-family: var(--fd); + font-size: 13px; + font-weight: 700; + text-transform: uppercase; + color: var(--orange); + margin-bottom: 12px; + letter-spacing: .05em; +} + +.contact-page .region-cities { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + gap: 6px; +} + +.contact-page .region-cities li { + font-size: 13px; + color: rgba(255, 255, 255, .5); +} + +.contact-page .region-cities li.primary { + color: var(--white); + font-weight: 600; +} + +.contact-page .region-cities a { + color: inherit; + text-decoration: none; + transition: color .2s; +} + +.contact-page .region-cities a:hover { + color: var(--orange); +} + +@media(max-width:1200px) { + .coverage-layout { + grid-template-columns: 1fr; + justify-items: center; + } + + .coverage-section { + padding: 60px 24px; + } + + .contact-page .region-grid { + grid-template-columns: 1fr 1fr; + } +} + +@media(max-width:600px) { + .contact-page .region-grid { + grid-template-columns: 1fr; + } +} + +/* REASONS SECTION */ +.reasons-section { + padding: 80px; + background: var(--gray-100); +} + +.reasons-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 18px; + margin-top: 48px; +} + +.reason-card { + background: var(--white); + border: 1px solid var(--gray-200); + border-radius: 10px; + padding: 26px 22px; + transition: border-color .2s, transform .2s; + position: relative; + overflow: hidden; + display: flex; + flex-direction: column; +} + +.reason-card::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 3px; + background: var(--orange); + transform: scaleX(0); + transform-origin: left; + transition: transform .3s; +} + +.reason-card:hover { + border-color: var(--orange); + transform: translateY(-3px); +} + +.reason-card:hover::after { + transform: scaleX(1); +} + +.reason-icon { + width: 40px; + height: 40px; + background: rgba(232, 87, 42, .1); + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 16px; + flex-shrink: 0; +} + +.reason-icon svg { + width: 20px; + height: 20px; +} + +.reason-title { + font-family: var(--fd); + font-size: 18px; + font-weight: 700; + text-transform: uppercase; + color: var(--navy); + letter-spacing: .02em; + margin-bottom: 8px; + line-height: 1.1; +} + +.reason-desc { + font-size: 13px; + color: var(--gray-600); + line-height: 1.65; + margin-bottom: 14px; + flex-grow: 1; +} + +.reason-email { + display: inline-flex; + align-items: center; + gap: 6px; + font-family: var(--fd); + font-size: 12px; + font-weight: 700; + letter-spacing: .07em; + text-transform: uppercase; + color: var(--orange); + text-decoration: none; + transition: gap .2s; + width: fit-content; +} + +.reason-email:hover { + gap: 10px; +} + +@media(max-width:1100px) { + .reasons-grid { + grid-template-columns: 1fr 1fr; + } +} + +@media(max-width:700px) { + .reasons-grid { + grid-template-columns: 1fr; + } + + .reasons-section { + padding: 60px 24px; + } +} + +/* CONTACT PAGE UTILITIES */ +.contact-page .fs-note { + font-family: var(--fb); + font-size: 13px; + color: rgba(255, 255, 255, .7); + font-weight: 300; + text-transform: none; + letter-spacing: 0; + margin-top: 8px; +} + +.contact-page .mt-24 { + margin-top: 24px; +} + +.contact-page .text-orange { + color: var(--orange) !important; +} + +.contact-page .text-gray-400 { + color: var(--gray-400) !important; +} + +.contact-page .ic-val-list { + text-align: left; + font-weight: normal; + font-size: 12px; +} + +.contact-page .text-white-50 { + color: rgba(255, 255, 255, .5) !important; +} + +.contact-page .coverage-intro { + font-size: 15px; + color: rgba(255, 255, 255, .6); + line-height: 1.7; + margin-bottom: 28px; +} + +.contact-page .cta-inner { + max-width: 800px; + margin: 0 auto; +} + +/* ── STAINING PAGE Styles ── */ +.hero-staining { + background-image: linear-gradient(rgba(15, 36, 68, 0.8), rgba(15, 36, 68, 0.8)), url(/images/staining-hero.png); + background-size: cover; + background-position: center; +} + +.hero-staining .hero-grid-bg { + opacity: 0.2; +} + +.model-extra-info { + margin-top: 20px; + background: rgba(232, 87, 42, .12); + border: 1px solid rgba(232, 87, 42, .25); + border-radius: 10px; + padding: 16px 20px; +} + +.model-extra-info-title { + font-family: var(--fd); + font-size: 12px; + font-weight: 700; + letter-spacing: .08em; + text-transform: uppercase; + color: var(--orange); + margin-bottom: 6px; +} + +.model-extra-info-desc { + font-size: 13px; + line-height: 1.7; +} + +.model-extra-info-desc.dark { + color: rgba(255, 255, 255, .7); +} + +.model-extra-info-desc.light { + color: var(--gray-600); +} + +.qi-textarea { + height: 100px; + resize: none; +} + +.photo-area-large { + min-height: 340px; +} + +.photo-area-small { + min-height: 160px; +} + +.photo-area img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.photo-sub-small { + font-size: 11px; +} + +.stain-promo-eyebrow { + font-family: var(--fd); + font-size: 12px; + font-weight: 700; + letter-spacing: .08em; + text-transform: uppercase; + color: rgba(255, 255, 255, .3); + margin-bottom: 12px; + margin-top: 32px; +} + +.mt-32 { + margin-top: 32px; +} + +.d-inline-block { + display: inline-block; +} + +.home-base-pill { + font-family: var(--fd); + font-size: 11px; + font-weight: 700; + letter-spacing: .1em; + text-transform: uppercase; + color: var(--orange); + display: inline-flex; + align-items: center; + gap: 6px; + background: rgba(232, 87, 42, .1); + padding: 4px 12px; + border-radius: 3px; + margin-bottom: 16px; +} + +/* -- HERO DECORATION -- */ +.hero-fence-rail { + position: absolute; + left: 0; + right: 0; + height: 2px; + background: rgba(255, 255, 255, 0.05); + z-index: 1; +} + +.hero-fence-post { + position: absolute; + top: 25%; + bottom: 25%; + width: 2px; + background: rgba(255, 255, 255, 0.05); + z-index: 1; +} + +.hero-slider-dots { + display: flex; + gap: 8px; + margin-top: 10px; +} + +.hero-slider-dot { + width: 10px; + height: 10px; + border-radius: 50%; + background: rgba(255, 255, 255, 0.3); + border: none; + cursor: pointer; + transition: background 0.3s; + padding: 0; +} + +.hero-slider-dot.active { + background: var(--orange); +} + +.hero-alert { + padding: 12px 16px; + border-radius: 8px; + font-size: 14px; + margin-bottom: 20px; + border-width: 1px; + border-style: solid; +} + +.hero-alert-danger { + background: #fee2e2; + color: #991b1b; + border-color: #fecaca; +} + +.hero-alert-info { + background: #e0f2fe; + color: #075985; + border-color: #bae6fd; +} + +.hero-alert-success { + background: #f0fdf4; + color: #166534; + border-color: #bbf7d0; +} + +.text-danger { + color: #ef4444 !important; +} + +.border-danger { + border-color: #ef4444 !important; +} + +/* -- ORANGE QUOTE CTA (Staining Services) -- */ +.quote-cta-orange { + background: var(--orange); + padding: 80px 0; +} + +.quote-cta-orange .quote-inner { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 60px; + align-items: center; + max-width: 1200px; + margin: 0 auto; + /* padding: 0 24px; */ +} + +.quote-cta-orange h2 { + font-family: var(--fd); + font-size: 56px; + font-weight: 800; + line-height: 1; + margin-bottom: 20px; + text-transform: uppercase; +} + +.quote-cta-orange p { + font-size: 18px; + line-height: 1.6; + opacity: 0.9; +} + +.orange-card { + background: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 12px; + padding: 40px; + backdrop-filter: blur(10px); +} + +.orange-input { + background: rgba(255, 255, 255, 0.15) !important; + border: 1px solid rgba(255, 255, 255, 0.2) !important; + color: white !important; +} + +.orange-input::placeholder { + color: rgba(255, 255, 255, 0.5); +} + +.btn-white-orange { + background: white !important; + color: var(--orange) !important; + font-weight: 700 !important; + width: 100%; + padding: 16px !important; + border-radius: 6px !important; + font-family: var(--fd) !important; + letter-spacing: 0.05em !important; + margin-top: 10px; +} + +.btn-white-orange:hover { + background: rgba(255, 255, 255, 0.9) !important; +} + +.text-white-70 { + color: rgba(255, 255, 255, 0.7) !important; +} + +@media (max-width: 900px) { + .quote-cta-orange .quote-inner { + grid-template-columns: 1fr; + gap: 40px; + } + + .quote-cta-orange h2 { + font-size: 42px; + } +} + +/* CONTACT PAGE HERO CARDS */ +.hero-contact-cards { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 16px; + align-content: center; +} + +.hcc { + background: rgba(255, 255, 255, .05); + border: 1px solid rgba(255, 255, 255, .1); + border-radius: 10px; + padding: 20px; + transition: background .2s, border-color .2s; +} + +.hcc:hover { + background: rgba(255, 255, 255, .08); + border-color: rgba(255, 255, 255, .15); +} + +.hcc-label { + font-family: var(--fd); + font-size: 11px; + font-weight: 700; + text-transform: uppercase; + color: var(--orange); + letter-spacing: .08em; + margin-bottom: 8px; + opacity: .9; +} + +.hcc-val { + font-family: var(--fd); + font-size: 18px; + font-weight: 700; + color: var(--white); + margin-bottom: 6px; + line-height: 1.1; +} + +.hcc-val a { + color: inherit; + text-decoration: none; +} + +.hcc-sub { + font-size: 12px; + color: rgba(255, 255, 255, .5); + line-height: 1.5; + font-weight: 300; +} + +.hcc-hours { + margin-top: 10px; + display: flex; + flex-direction: column; + gap: 4px; +} + +.hcc-hour-item { + display: flex; + justify-content: space-between; + font-size: 11px; + color: rgba(255, 255, 255, .4); +} + +.hcc-hour-time { + color: rgba(255, 255, 255, .7); +} + +.hcc-hour-time.closed { + color: #fca5a5; + opacity: .7; +} + +/* MAIN CONTACT SECTION */ +.contact-section { + padding: 80px; + background: var(--white); + overflow: hidden; +} + +.contact-layout { + display: grid; + grid-template-columns: 1fr 1.1fr; + gap: 64px; + margin-top: 48px; + align-items: start; + max-width: 1300px; + margin-left: auto; + margin-right: auto; + width: 100%; +} + +.contact-left { display: flex; flex-direction: column; gap: 20px; } -.about-story-p-italic { - font-style: italic; - color: var(--gray-500); - font-size: 15px; -} - -.about-image-column { - position: relative; -} - -.about-image-cover { - object-fit: cover; -} - -.about-floating-card { - position: absolute; - bottom: -30px; - left: -17px; - background: var(--navy); - padding: 32px; +.contact-card { + background: var(--gray-100); border-radius: 12px; - color: var(--white); - max-width: 280px; - z-index: 2; - box-shadow: 0 20px 40px rgba(0, 0, 0, .3); + padding: 24px 22px; + border-left: 3px solid var(--orange); } -@media (max-width: 1024px) { - .about-section { - margin-bottom: 40px; - } -} - -@media (max-width: 768px) { - .about-floating-card { - left: 20px; - right: 20px; - max-width: none; - bottom: -40px; - } -} - -.about-floating-card-100 { - font-size: 40px; - font-weight: 800; +.contact-card-label { + font-size: 10px; + font-weight: 700; + letter-spacing: .12em; + text-transform: uppercase; color: var(--orange); margin-bottom: 8px; - font-family: var(--font-display); } -.about-floating-card-text { +.contact-card-val { + font-family: var(--fd); + font-size: 20px; + font-weight: 700; + color: var(--navy); + letter-spacing: .02em; + line-height: 1.1; + margin-bottom: 6px; +} + +.contact-card-val a { + color: var(--navy); + text-decoration: none; + transition: color .2s; +} + +.contact-card-val a:hover { + color: var(--orange); +} + +.contact-card-sub { font-size: 13px; - font-weight: 600; - text-transform: uppercase; - letter-spacing: .1em; - line-height: 1.4; + color: var(--gray-600); + line-height: 1.65; } -.about-mission-section { - background: var(--cream); +.hours-table { + width: 100%; + margin-top: 14px; + border-collapse: collapse; } -.about-mission-container { - max-width: 800px; - margin: 0 auto; - padding: 0 20px; - text-align: center; +.hours-table tr { + border-bottom: 1px solid var(--gray-200); } -.about-mission-eyebrow { - margin: 0 auto 16px; - justify-content: center; +.hours-table tr:last-child { + border-bottom: none; } -.about-mission-h2 { +.hours-table td { + padding: 9px 0; + font-size: 13px; +} + +.hours-table td:first-child { + color: var(--gray-600); +} + +.hours-table td:last-child { + text-align: right; + font-family: var(--fd); + font-size: 14px; + font-weight: 700; + color: var(--navy); +} + +.hours-table td:last-child.closed { + color: var(--gray-400); + font-weight: 400; + font-family: var(--fb); +} + +.help-list { + display: flex; + flex-direction: column; + gap: 10px; + margin-top: 4px; +} + +.help-item { + display: flex; + align-items: center; + gap: 12px; + font-size: 13px; + color: var(--gray-600); +} + +.help-item::before { + content: '✓'; + font-family: var(--fd); + font-size: 14px; + font-weight: 700; + color: var(--orange); + flex-shrink: 0; +} + +.contact-form-wrap { + background: var(--navy); + border-radius: 16px; + padding: 44px 40px; +} + +.form-head { margin-bottom: 32px; } -.about-mission-card { - background: var(--white); - padding: 64px 15px; - border-radius: 20px; - box-shadow: 0 10px 30px rgba(0, 0, 0, .03); -} - -.about-mission-text { - font-size: 24px; - color: var(--navy); - line-height: 1.6; - font-weight: 500; - font-family: var(--font-body); -} - -.about-testimonial-container { - max-width: 1200px; - margin: 0 auto; - padding: 0 20px; - text-align: center; -} - -.about-testimonial-eyebrow { - margin: 0 auto 16px; - justify-content: center; -} - -.about-testimonial-h2 { - color: var(--white); - margin-bottom: 30px; -} - -.about-testimonial-card-inner { - max-width: 800px; - margin: 0 auto; - background: rgba(255, 255, 255, 0.05); - border: 1px solid rgba(255, 255, 255, 0.1); - padding: 20px; - border-radius: 12px; -} - -.about-testimonial-quote { - font-size: 22px; - font-style: italic; - margin-bottom: 24px; -} - -.about-testimonial-author { - font-weight: bold; - color: var(--orange); - font-size: 18px; -} - -.about-testimonial-role { - color: var(--gray-300); - font-size: 14px; -} - -.about-faq-container { - max-width: 800px; - margin: 0 auto; - padding: 0 20px; -} - -.about-faq-eyebrow { - margin: 0 auto 16px; - justify-content: center; -} - -.about-faq-h2 { - text-align: center; - margin-bottom: 40px; -} - -.about-cta-section { - text-align: center; - background: var(--navy); - color: var(--white); -} - -.about-cta-sub { - opacity: .7; -} - -@keyframes float { - 0% { - transform: translateY(0px); - } - - 50% { - transform: translateY(-15px); - } - - 100% { - transform: translateY(0px); - } -} - -.floating-card { - animation: float 4s ease-in-out infinite; -} - -.testimonials-slider { - position: relative; - max-width: 800px; - margin: 0 auto; - overflow: hidden; -} - -.slider-inner { - display: flex; - transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); -} - -.slide { - min-width: 100%; - /* padding: 0 20px; */ - box-sizing: border-box; -} - -.slider-controls { - display: flex; - gap: 16px; - justify-content: center; - margin-top: 40px; -} - -.slider-btn { - width: 48px; - height: 48px; - display: flex; - align-items: center; - justify-content: center; - background: rgba(255, 255, 255, 0.05); - color: var(--white); - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 50%; - cursor: pointer; - transition: all 0.3s; - font-size: 24px; -} - -.slider-btn:hover { - background: var(--orange); - border-color: var(--orange); - transform: scale(1.1); -} - -.faq-accordion .faq-item { - border: 1px solid var(--gray-200); - border-radius: 12px; - margin-bottom: 16px; - overflow: hidden; - background: var(--white); - transition: all 0.3s; -} - -.faq-accordion .faq-item:hover { - border-color: var(--orange); - box-shadow: 0 10px 30px rgba(221, 107, 32, 0.05); -} - -.faq-header { - padding: 18px 24px; - cursor: pointer; - display: flex; - justify-content: space-between; - align-items: center; -} - -.faq-question { - font-size: 18px; - font-weight: 600; - color: var(--navy); - transition: color 0.3s; - margin: 0; -} - -.faq-header:hover .faq-question { - color: var(--orange); -} - -.faq-answer-collapse { - overflow: hidden; - transition: max-height 0.5s ease; - max-height: 0; -} - -.faq-answer-collapse.open { - max-height: 300px; -} - -.faq-answer-inner { - padding: 0 24px 20px; - color: var(--gray-600); - line-height: 1.6; -} - -.faq-icon { - font-size: 24px; - color: var(--orange); - transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); - line-height: 1; -} - -.faq-icon.open { - transform: rotate(180deg); -} - -.about-image-wrapper { - position: relative; - width: 100%; - height: 500px; - border-radius: 20px; - overflow: hidden; - box-shadow: 0 30px 60px rgba(221, 107, 32, .15); - border: 4px solid var(--orange); -} - -/* -- BLOG PAGES -- */ -.inner-banner { - background: var(--navy); - padding: 160px 80px 100px; - display: flex; - align-items: center; - justify-content: center; - text-align: center; - position: relative; - overflow: hidden; -} - -.inner-banner::before { - display: none; -} - -.inner-banner-content { - position: relative; - z-index: 2; - max-width: 700px; -} - -.inner-banner .section-eyebrow { - justify-content: center; -} - -.inner-banner h1 { - color: var(--white); - margin: 20px 0; -} - -.banner-sub { - font-size: 18px; - color: rgba(255, 255, 255, 0.7); - line-height: 1.6; -} - -.blog-grid-section { - background: var(--cream); - padding: 100px 80px; -} - -.blog-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 40px; - max-width: 1400px; - margin: 0 auto; -} - -.blog-card { - background: var(--white); - border-radius: 16px; - overflow: hidden; - text-decoration: none; - color: inherit; - transition: transform 0.3s ease, box-shadow 0.3s ease; - display: flex; - flex-direction: column; - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); - border: 1px solid var(--gray-200); -} - -.blog-card:hover { - transform: translateY(-10px); - box-shadow: 0 20px 40px rgba(15, 36, 68, 0.15); -} - -.blog-card-img { - position: relative; - height: 240px; - overflow: hidden; -} - -.blog-card-img img { - transition: transform 0.5s ease; -} - -.blog-card:hover .blog-card-img img { - transform: scale(1.1); -} - -.blog-card-category { - position: absolute; - top: 20px; - left: 20px; - background: var(--orange); - color: var(--white); - padding: 6px 16px; - border-radius: 4px; - font-family: var(--font-display); - font-size: 12px; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.05em; - z-index: 2; -} - -.blog-card-body { - padding: 30px; - flex-grow: 1; - display: flex; - flex-direction: column; -} - -.blog-card-date { - font-size: 13px; - color: var(--gray-600); - margin-bottom: 12px; - font-weight: 500; -} - -.blog-card-title { - font-family: var(--font-display); - font-size: 24px; - font-weight: 700; - color: var(--navy); - line-height: 1.25; - margin-bottom: 16px; - text-transform: uppercase; -} - -.blog-card-excerpt { - font-size: 15px; - line-height: 1.6; - color: var(--gray-600); - margin-bottom: 24px; - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - overflow: hidden; -} - -.blog-card-footer { - margin-top: auto; - display: flex; - align-items: center; -} - -.read-more { - color: var(--orange); - font-family: var(--font-display); - font-size: 14px; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.05em; - display: flex; - align-items: center; - gap: 8px; -} - -.arrow-icon { - transition: transform 0.3s ease; -} - -.blog-card:hover .arrow-icon { - transform: translateX(5px); -} - -/* Detail Page */ -.detail-banner { - background: var(--navy); - padding: 160px 80px 120px; - display: flex; - align-items: center; - justify-content: center; - text-align: center; - position: relative; -} - -.detail-banner .section-eyebrow { - justify-content: center; - margin-bottom: 24px; -} - -.detail-title { - font-family: var(--font-display); - font-size: clamp(32px, 5vw, 64px); +.form-head-title { + font-family: var(--fd); + font-size: 26px; font-weight: 800; + text-transform: uppercase; color: var(--white); - text-transform: uppercase; - line-height: 1.1; - margin-bottom: 24px; - max-width: 1000px; + letter-spacing: .03em; + margin-bottom: 6px; } -.detail-meta { - font-size: 15px; - color: rgba(255, 255, 255, 0.6); - font-weight: 500; - letter-spacing: 0.05em; - text-transform: uppercase; +.form-head-title span { + color: var(--orange); } -.detail-content-section { - background: var(--white); +.form-head-sub { + font-size: 13px; + color: rgba(255, 255, 255, .5); + line-height: 1.6; } -.detail-container { - max-width: 1000px; - margin: 0 auto; - /* padding: 0 40px; */ -} - -.big-image-wrap { - position: relative; - z-index: 5; - box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15); - border-radius: 20px; - overflow: hidden; - margin-bottom: 60px; -} - -.big-image { - width: 100%; - height: 500px; - object-fit: cover; - display: block; -} - -.detail-body { - font-size: 18px; - line-height: 1.8; - color: var(--gray-800); -} - -.detail-body p { - margin-bottom: 30px; -} - -.split-images { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 30px; - margin: 50px 0; -} - -.small-image-wrap { - border-radius: 12px; - overflow: hidden; - box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); -} - -.small-image { - width: 100%; - height: 350px; - object-fit: cover; - display: block; -} - -.detail-footer { - margin-top: 60px; - padding-top: 40px; - border-top: 1px solid var(--gray-200); - text-align: center; -} - -@media (max-width: 1200px) { - .blog-grid { - grid-template-columns: repeat(2, 1fr); - } -} - -@media (max-width: 1024px) { - .detail-banner { - padding: 140px 40px 100px; +@media (max-width: 900px) { + .contact-section { + padding: 48px 20px; } - .detail-container { - padding: 0; - } -} - -@media (max-width: 768px) { - .blog-grid { + .contact-layout { grid-template-columns: 1fr; + gap: 28px; } - .inner-banner { - padding: 140px 20px 80px; + .contact-form-wrap { + padding: 28px 22px; } - .blog-grid-section { + .contact-page .cta-section { padding: 60px 20px; } - .detail-banner { - padding: 120px 20px 80px; - } - - .big-image-wrap { - margin-top: -60px; - } - - .split-images { - grid-template-columns: 1fr; - } - - .detail-title { - font-size: 32px; + .cta-btn { + font-size: 14px; + padding: 14px 20px; + word-break: break-all; } } -/* -- RENTALS PAGE -- */ -.intro-text { - font-size: 20px; - line-height: 1.7; - color: var(--gray-800); - margin-bottom: 30px; -} -.info-bar { - background: var(--cream); - padding: 15px 30px; - border-radius: 8px; - border-left: 4px solid var(--orange); - display: inline-block; - font-weight: 600; - color: var(--navy); -} - -.rental-grid { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 24px; -} - -.rental-item-card { - background: var(--orange); - border-radius: 12px; - overflow: hidden; - box-shadow: 0 10px 30px rgba(221, 107, 32, 0.15); - transition: all 0.3s ease; - border: 1px solid rgba(255, 255, 255, 0.1); -} - -.rental-item-card:hover { - transform: translateY(-8px); - box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); -} - -.rental-item-img { - height: 180px; - position: relative; -} - -.rental-item-body { - padding: 24px; -} - -.rental-item-name { - font-family: var(--font-display); - font-size: 18px; - font-weight: 700; - text-transform: uppercase; - color: var(--white); - margin-bottom: 8px; -} - -.rental-item-desc { - font-size: 13px; - color: rgba(255, 255, 255, 0.85); - line-height: 1.4; -} - -.app-grid { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 32px; -} - -.app-card { +/* INNER PAGE BANNER */ +.inner-banner { + height: 400px; + background: var(--navy); display: flex; - align-items: flex-start; - gap: 24px; - background: var(--gray-100); - padding: 32px; - border-radius: 16px; - transition: background 0.3s ease; -} - -.app-card:hover { - background: var(--cream); -} - -.app-num { - font-family: var(--font-display); - font-size: 48px; - font-weight: 800; - color: var(--orange); - line-height: 1; - opacity: 0.5; -} - -.app-title { - font-family: var(--font-display); - font-size: 24px; - font-weight: 700; - color: var(--navy); - text-transform: uppercase; - margin-bottom: 8px; -} - -.app-desc { - font-size: 15px; - color: var(--gray-600); -} - -.benefits-container { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 60px; - align-items: center; -} - -.benefits-list { - list-style: none; -} - -.benefits-list li { - font-size: 18px; - margin-bottom: 16px; - display: flex; - align-items: center; - gap: 12px; -} - -.benefits-list li::before { - content: '?'; - color: var(--orange); - font-weight: bold; - font-size: 20px; -} - -@media (max-width: 1200px) { - .rental-grid { - grid-template-columns: repeat(3, 1fr); - } -} - -@media (max-width: 992px) { - .rental-grid { - grid-template-columns: repeat(2, 1fr); - } - - .benefits-container { - grid-template-columns: 1fr; - gap: 40px; - } -} - -@media (max-width: 768px) { - .app-grid { - grid-template-columns: 1fr; - } - - .rental-grid { - grid-template-columns: 1fr; - } - - .intro-text { - font-size: 18px; - } -} - -/* -- BREADCRUMB -- */ -.banner-breadcrumb { - display: flex; - align-items: center; + flex-direction: column; justify-content: center; - gap: 12px; - font-family: var(--font-display); - font-size: 13px; - font-weight: 600; - color: var(--orange); + align-items: center; + text-align: center; + color: var(--white); + position: relative; + overflow: hidden; + padding: 0 24px; +} + +.inner-banner-title { + font-family: var(--fd); + font-size: 56px; + font-weight: 800; text-transform: uppercase; - letter-spacing: 0.12em; + letter-spacing: -.02em; + line-height: 1; margin-bottom: 20px; } -.banner-breadcrumb a { - color: rgba(255, 255, 255, 0.45); +.inner-banner-title span { + color: var(--orange); +} + +.inner-banner-breadcrumbs { + font-size: 14px; + color: rgba(255, 255, 255, 0.4); + font-weight: 500; + letter-spacing: 0.05em; + text-transform: uppercase; +} + +.inner-banner-breadcrumbs a { + color: inherit; text-decoration: none; transition: color 0.2s; - display: flex; - align-items: center; - gap: 8px; } -.banner-breadcrumb a:hover { - color: var(--white); -} - -.banner-breadcrumb .separator { - color: rgba(255, 255, 255, 0.15); - font-size: 10px; -} - -/* -- BACK LINK -- */ -.back-link { - display: inline-flex; - align-items: center; - gap: 10px; - padding: 10px 20px; - background: var(--gray-100); - color: var(--navy); - text-decoration: none; - font-size: 14px; - font-weight: 700; - text-transform: uppercase; - letter-spacing: 0.05em; - border-radius: 50px; - margin-bottom: 40px; - transition: all 0.3s ease; - border: 1px solid transparent; -} - -.back-link:hover { - background: var(--white); - border-color: var(--orange); +.inner-banner-breadcrumbs a:hover { color: var(--orange); - transform: translateX(-5px); - box-shadow: 0 5px 15px rgba(221, 107, 32, 0.1); } -/* -- MANUFACTURING UI UPGRADE -- */ -.mfg-card { - background: var(--navy); - padding: 50px 40px; - border-radius: 20px; - transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); - position: relative; - overflow: hidden; - border: 1px solid rgba(255, 255, 255, 0.05); - display: flex; - flex-direction: column; - height: 100%; +.inner-banner-breadcrumbs span { + margin: 0 10px; + opacity: 0.5; } -.mfg-card:hover { - transform: translateY(-10px); - box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3); - border-color: rgba(221, 107, 32, 0.3); -} - -.mfg-card .section-h2 { - color: var(--white) !important; - font-size: 24px !important; - margin-bottom: 25px !important; -} - -.mfg-card .service-list li { - color: rgba(255, 255, 255, 0.7); - font-size: 15px; - margin-bottom: 12px; - line-height: 1.5; - display: flex; - align-items: flex-start; - gap: 12px; -} - -.mfg-card .service-list li::before { - margin-top: 8px; -} - -/* -- RENTAL WHY CHOOSE (TIMELINE UI) -- */ -.rental-why-section { - padding: 0 !important; - background: var(--navy); - display: flex; - min-height: 650px; -} - -.rental-why-img { - flex: 1; - position: relative; - min-height: 500px; -} - -.rental-why-content { - flex: 1; - padding: 80px; - display: flex; - flex-direction: column; - justify-content: center; -} - -.rental-why-title { - font-family: var(--font-display); - font-size: 48px; - color: var(--white); - margin-bottom: 48px; - font-weight: 700; - line-height: 1.1; - text-transform: uppercase; -} - -.rental-timeline { - list-style: none; - padding: 0; -} - -.rental-timeline-item { - position: relative; - display: flex; - align-items: center; - gap: 24px; - padding-bottom: 40px; -} - -.rental-timeline-item:last-child { - padding-bottom: 0; -} - -.rental-timeline-item::after { - content: ""; - position: absolute; - left: 32px; - top: 60px; - bottom: 0; - width: 1px; - border-left: 2px dashed rgba(255, 255, 255, 0.2); - z-index: 1; -} - -.rental-timeline-item:last-child::after { - display: none; -} - -.timeline-icon { - flex-shrink: 0; - width: 64px; - height: 64px; - background: var(--orange); - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - z-index: 2; - color: var(--white); - box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); -} - -.timeline-text { - font-family: var(--font-body); - color: var(--white); - font-size: 18px; - font-weight: 500; - line-height: 1.4; -} - -@media (max-width: 992px) { - .rental-why-section { - flex-direction: column; +@media (max-width: 768px) { + .inner-banner { + height: 300px; } - .rental-why-img { - height: 400px; - } - - .rental-why-content { - padding: 48px 24px; - } - - .rental-why-title { + .inner-banner-title { font-size: 36px; } } -/* -- RENTAL INTRO REDESIGN -- */ -.progress-container { - display: flex; - align-items: center; - gap: 30px; - margin-top: 50px; -} - -.circular-progress { - width: 100px; - height: 100px; - border-radius: 50%; - background: conic-gradient(var(--orange) 85% 0, var(--gray-200) 0); - display: flex; - align-items: center; - justify-content: center; - position: relative; -} - -.circular-progress::before { - content: ""; - position: absolute; - width: 80px; - height: 80px; - background: var(--white); - border-radius: 50%; -} - -.progress-value { - position: relative; - z-index: 1; - font-family: var(--font-display); - font-size: 22px; +inner-banner-title { + font-family: var(--fd); + font-size: 56px; font-weight: 800; + text-transform: uppercase; + letter-spacing: -.02em; + line-height: 1; + margin-bottom: 20px; +} + +.inner-banner-title span { color: var(--orange); } -.progress-info h4 { - font-family: var(--font-display); - font-size: 20px; - color: var(--navy); - margin-bottom: 8px; - text-transform: uppercase; - letter-spacing: 0.02em; -} - -.progress-info p { +.inner-banner-breadcrumbs { font-size: 14px; + color: rgba(255, 255, 255, 0.4); + font-weight: 500; + letter-spacing: 0.05em; + text-transform: uppercase; +} + +.inner-banner-breadcrumbs a { + color: inherit; + text-decoration: none; + transition: color 0.2s; +} + +.inner-banner-breadcrumbs a:hover { + color: var(--orange); +} + +.inner-banner-breadcrumbs span { + margin: 0 10px; + opacity: 0.5; +} + +@media (max-width: 768px) { + .inner-banner { + height: 300px; + } + + .inner-banner-title { + font-size: 36px; + } +} + +/* CONTACT SECTION LIGHT OVERRIDES */ +.contact-section .hcc { + background: var(--gray-100); + border: 1px solid var(--gray-200); + border-left: 3px solid var(--orange); + border-radius: 12px; + padding: 24px 22px; +} + +.contact-section .hcc-label { + opacity: 1; +} + +.contact-section .hcc-val { + color: var(--navy); + font-size: 20px; +} + +.contact-section .hcc-val a { + color: var(--navy); +} + +.contact-section .hcc-sub { color: var(--gray-600); - line-height: 1.5; - max-width: 300px; } -/* -- RENTAL PARALLAX CTA -- */ -.rental-parallax-cta { +.contact-section .hcc-hours { + margin-top: 10px; + display: flex; + flex-direction: column; + gap: 4px; +} + +.contact-section .hcc-hour-item { + display: flex; + justify-content: space-between; + font-size: 13px; + color: var(--gray-600); + border-bottom: 1px solid var(--gray-200); + padding: 8px 0; +} + +.contact-section .hcc-hour-item:last-child { + border-bottom: none; +} + +.contact-section .hcc-hour-time { + color: var(--navy); + font-weight: 700; + font-family: var(--fd); +} + +.contact-section .hcc-hour-time.closed { + color: var(--gray-400); + font-weight: 400; + font-family: var(--fb); +} + +.contact-section .fl { + color: var(--gray-600); +} + +.contact-section .fi { + background: var(--gray-100); + border: 1px solid var(--gray-200); + color: var(--gray-800); +} + +.contact-section .fi::placeholder { + color: var(--gray-400); +} + +.contact-section .form-btn { + width: 100%; + background: var(--orange); + color: var(--white); + padding: 16px; + border: none; + border-radius: 8px; + font-family: var(--fd); + font-size: 16px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: .08em; + cursor: pointer; + margin-top: 24px; +} + +.contact-section .form-note { + color: var(--gray-400); +} + +/* ── CONSTRUCTION POPUP ── */ +.construction-overlay { + position: fixed; + inset: 0; + background: rgba(15, 36, 68, 0.6); + backdrop-filter: blur(8px); + z-index: 10000; + display: flex; + align-items: center; + justify-content: center; + padding: 24px; + animation: fadeInPopup 0.4s ease-out forwards; +} + +.construction-modal { + background: var(--white); + max-width: 500px; + width: 100%; + border-radius: 20px; position: relative; - background-image: url("/assets/fence-rentals-hero.png"); - background-attachment: fixed; - background-position: center; - background-repeat: no-repeat; - background-size: cover; - padding: 120px 0 !important; + overflow: hidden; + box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4); + animation: scaleInPopup 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; + border: 1px solid rgba(255, 255, 255, 0.1); } -.rental-parallax-cta::before { - content: ""; +.construction-modal::before { + content: ''; position: absolute; top: 0; left: 0; right: 0; - bottom: 0; - background: rgba(15, 36, 68, 0.85); - z-index: 1; + height: 8px; + background: linear-gradient(90deg, var(--orange), var(--orange-light)); } -.rental-parallax-cta .container { - position: relative; +.construction-content { + padding: 32px 32px 28px; + text-align: center; +} + +.construction-icon { + font-size: 42px; + margin-bottom: 16px; + display: block; + filter: drop-shadow(0 10px 15px rgba(232, 87, 42, 0.2)); +} + +.construction-title { + font-family: var(--fd); + font-size: 26px; + font-weight: 800; + color: var(--navy); + margin-bottom: 12px; + text-transform: uppercase; + line-height: 1.1; + letter-spacing: -0.01em; +} + +.construction-text { + font-size: 15px; + color: var(--gray-600); + line-height: 1.5; + margin-bottom: 20px; + font-weight: 400; +} + +.construction-prices { + background: var(--gray-100); + padding: 14px 18px; + border-radius: 10px; + font-size: 14px; + color: var(--gray-800); + margin-bottom: 20px; + border-left: 4px solid var(--orange); + text-align: center; + line-height: 1.4; +} + +.construction-contact { + font-size: 14px; + font-weight: 600; + color: var(--navy); + margin-top: 4px; + padding: 8px 16px; + background: rgba(232, 87, 42, 0.05); + border-radius: 8px; + display: inline-block; +} + +.construction-contact span { + color: var(--orange); +} + +.construction-close { + position: absolute; + top: 14px; + right: 14px; + background: var(--gray-100); + border: none; + font-size: 18px; + color: var(--gray-600); + cursor: pointer; + transition: all 0.2s; + display: flex; + align-items: center; + justify-content: center; + width: 30px; + height: 30px; + border-radius: 50%; z-index: 2; } -/* -- PRODUCT DETAIL RESPONSIVE GRID -- */ -.detail-grid { - display: grid; - grid-template-columns: 1.2fr 1fr; - gap: 80px; - align-items: start; + +.construction-close:hover { + color: var(--white); + background: var(--orange); + transform: rotate(90deg); } -.detail-image-column { - position: relative; +.construction-btn { width: 100%; - height: 600px; - border-radius: 12px; - overflow: hidden; - box-shadow: 0 20px 40px rgba(0,0,0,0.05); - background: var(--gray-100); -} - -.detail-info-column { - padding-top: 20px; - display: flex; - flex-direction: column; -} - -@media (max-width: 1024px) { - .detail-grid { - grid-template-columns: 1fr; - gap: 48px; - } - - .detail-info-column { - order: 1; - padding-top: 0; - } - - .detail-image-column { - order: 2; - height: 450px; - } -} - -/* -- MOBILE MENU -- */ -.menu-toggle { - display: none; - background: none; + background: var(--navy); + color: var(--white); + padding: 14px; + border-radius: 8px; border: none; + font-family: var(--fd); + font-size: 14px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.1em; cursor: pointer; - padding: 10px; - z-index: 1100; + transition: all 0.3s; + margin-top: 16px; + box-shadow: 0 4px 12px rgba(15, 36, 68, 0.1); } -.hamburger { - width: 24px; - height: 18px; - position: relative; - display: flex; - flex-direction: column; - justify-content: space-between; +.construction-btn:hover { + background: var(--orange); + box-shadow: 0 6px 20px rgba(232, 87, 42, 0.3); + transform: translateY(-2px); } -.hamburger span { - display: block; - width: 100%; - height: 2px; - background-color: var(--white); - transition: all 0.3s ease; -} - -.hamburger.active span:nth-child(1) { - transform: translateY(8px) rotate(45deg); -} - -.hamburger.active span:nth-child(2) { - opacity: 0; -} - -.hamburger.active span:nth-child(3) { - transform: translateY(-8px) rotate(-45deg); -} - -.mobile-cta-li { - display: none; -} - -@media (max-width: 992px) { - nav { - padding: 0 24px; - justify-content: space-between; +@keyframes fadeInPopup { + from { + opacity: 0; + backdrop-filter: blur(0px); } - .menu-toggle { - display: block; - } - - .desktop-cta { - display: none; - } - - .nav-links { - display: flex; - position: fixed; - top: 64px; - left: 0; - width: 100%; - height: calc(100vh - 64px); - background: var(--navy); - flex-direction: column; - padding: 40px 0; - gap: 0; - transition: transform 0.4s ease; - transform: translateX(100%); - z-index: 999; - border-top: 1px solid rgba(255, 255, 255, 0.1); - } - - .nav-links.active { - transform: translateX(0); - } - - .nav-links li { - width: 100%; - text-align: center; - } - - .nav-links a { - font-size: 20px; - display: block; - padding: 10px 0; - } - - .mobile-cta-li { - display: block; - padding: 0 40px; - margin-top: 20px; + to { + opacity: 1; + backdrop-filter: blur(8px); } } -/* -- BLOG DETAIL RESPONSIVE FIX -- */ -@media (max-width: 768px) { - .detail-content-section { - padding: 60px 20px !important; +@keyframes scaleInPopup { + from { + opacity: 0; + transform: scale(0.9) translateY(20px); } - - /* .detail-container { - padding: 0 20px !important; - } */ - - .big-image-wrap { - margin-top: 0 !important; - margin-bottom: 30px; - } -} -/* -- MANUFACTURING GRID RESPONSIVE -- */ -.mfg-grid { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 30px; -} - -@media (max-width: 768px) { - .mfg-grid { - grid-template-columns: 1fr !important; + to { + opacity: 1; + transform: scale(1) translateY(0); } -} +} \ No newline at end of file diff --git a/app/layout.tsx b/app/layout.tsx index d690268..707482f 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -3,6 +3,8 @@ import { Barlow, Barlow_Condensed } from "next/font/google"; import "./globals.css"; import Navbar from "@/components/Navbar"; import Footer from "@/components/Footer"; +import ConstructionPopup from "@/components/ConstructionPopup"; + const barlow = Barlow({ subsets: ["latin"], @@ -18,8 +20,8 @@ const barlowCondensed = Barlow_Condensed({ export const metadata: Metadata = { metadataBase: new URL("https://vgfenceproducts.ca"), - title: "VG Fence Products — Ontario's B2B Fence Supply Partner", - description: "Supplying contractors, builders, and property managers across Ontario with chain link, ornamental, composite, glass railing, and stain products.", + title: "VG Fence Products | B2B Fence Supply Ontario — KWC", + description: "B2B fence supply Ontario. Chain link, ornamental, glass railing, Expert Stain & Seal, temp fence rental. Contractor pricing. 250km from Kitchener–Waterloo.", icons: { icon: "/assets/favicon.webp", }, @@ -41,6 +43,8 @@ export default function RootLayout({ {children}