/* ============================================================ styles.css — Bruce's Fencing Shared stylesheet for index.html and contact.html TABLE OF CONTENTS: 1. Base & Typography 2. Scroll Reveal Animation 3. Navbar — underline hover effect 4. Section Shape Dividers (index.html) 5. Service Cards — hover lift (index.html) 6. CTA Button — pulsing glow (index.html) 7. Form Inputs — custom focus ring (contact.html) ============================================================ */ /* ============================================================ 1. BASE & TYPOGRAPHY Sets smooth scrolling and applies the Google Fonts loaded in each HTML file's . ============================================================ */ html { scroll-behavior: smooth; } body { font-family: 'Source Sans 3', sans-serif; } /* Apply display font to all headings and elements with .font-display */ h1, h2, h3, h4, .font-display { font-family: 'Oswald', sans-serif; } /* ============================================================ 2. SCROLL REVEAL ANIMATION Elements start invisible and slightly shifted down. script.js adds the .visible class when they scroll into view, triggering the fade-up transition. ============================================================ */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.visible { opacity: 1; transform: none; } /* ============================================================ 3. NAVBAR — underline hover effect on nav links A thin green underline slides in from the left on hover. Applied to any with class="nav-link". ============================================================ */ .nav-link::after { content: ''; display: block; height: 2px; width: 0; background: #4a9a4a; /* green-600 */ transition: width 0.25s ease; } .nav-link:hover::after { width: 100%; } /* ============================================================ 4. SECTION SHAPE DIVIDERS (index.html only) clip-diagonal — used on the hero section for an angled bottom edge that flows into the next section. clip-diagonal-top — used on the CTA banner for an angled top edge. ============================================================ */ .clip-diagonal { clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); } .clip-diagonal-top { clip-path: polygon(0 6%, 100% 0, 100% 100%, 0 100%); } /* ============================================================ 5. SERVICE CARDS — hover lift effect (index.html) Cards gently lift and cast a deeper shadow when hovered. ============================================================ */ .service-card { transition: transform 0.25s ease, box-shadow 0.25s ease; } .service-card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.13); } /* ============================================================ 6. CTA BUTTON — pulsing green glow (index.html hero) The main "Get a Free Estimate" button pulses with a soft green halo to draw the eye. ============================================================ */ @keyframes pulse-green { 0%, 100% { box-shadow: 0 0 0 0 rgba(74, 154, 74, 0.45); } 50% { box-shadow: 0 0 0 10px rgba(74, 154, 74, 0); } } .btn-cta-pulse { animation: pulse-green 2.4s ease-in-out infinite; } /* ============================================================ 7. FORM INPUTS — custom focus ring (contact.html) Replaces the browser's default blue outline with a green ring that matches the brand palette. ============================================================ */ input:focus, textarea:focus, select:focus { outline: none; border-color: #3a7d3a; /* green-700 */ box-shadow: 0 0 0 3px rgba(58, 125, 58, 0.15); }