From Estimate to Installation

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer">

<h2>From Estimate to Installation</h2>
A local Generac dealer will guide you through the process, from understanding your home’s needs to coordinating installation details. Timing can vary by home, location, permitting, and dealer availability.

<!-- Stepper Nav -->
<ol class="stepper" data-current="1">
  <li class="step">
    <span class="step-dot">1</span>
    <span class="step-label">Request an Estimate</span>
  </li>

  <li class="step">
    <span class="step-dot">2</span>
    <span class="step-label">Connect With a Dealer</span>
  </li>

  <li class="step">
    <span class="step-dot">3</span>
    <span class="step-label">Review Your Home Needs</span>
  </li>

  <li class="step">
    <span class="step-dot">4</span>
    <span class="step-label">Build Your Plan</span>
  </li>

  <li class="step">
    <span class="step-dot">5</span>
    <span class="step-label">Coordinate the Installation</span>
  </li>
</ol>
<!-- //Stepper Nav -->

<!-- Step Content -->
<div class="StepContainer" data-current="1">
  <img
    class="StepImage"
    src="https://www.generac.com/globalassets/step1.png"
    alt="Request an Estimate"
  />

  <div class="StepContent">
    <div class="StepHead">
      <div class="circle">1</div>
      <span class="StepTitle">Request an Estimate</span>
    </div>

    <p class="StepBody">
      Getting started is easy. Your local Generac dealer will follow up, answer your questions, and help you understand the best next step for your home and schedule. It’s a low-pressure conversation designed to make the process feel simple from the start.
    </p>

    <div class="MobileCTAContainer">
      <a href="#" class="btn darkBlueOutlineFill...

CSS

body {
  font-family: Circular, Roboto, san-serif;
  font-size: 18px;
  color: #00263E;
  letter-spacing: 0%;
  line-height: 140%;
}

h2 {
  font-size: 44px;
  margin: 0px 0px 16px 0px;
  line-height: 110%;
}

/* STEPPER NAV */
.stepper {
  --step-count: 1;
  --dot-size: 44px;
  --line-color: #00263E59;
  --active-color: #fa6600;
  --text-color: #00263E59;

  display: grid;
  grid-template-columns: repeat(var(--step-count), minmax(0, 1fr));
  width: 100%;
  margin: 24px 0px 16px 0px;
  padding: 0;
  list-style: none;
}

.step {
  position: relative;
  min-width: 0;
  text-align: center;
  color: var(--text-color);
  cursor: pointer;
}

/* Default line */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--dot-size) / 2);
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--line-color);
  transform: translateY(-50%);
  z-index: 0;
}

/* Line left of active dot */
.step.is-before-active::after {
  background: var(--active-color);
}

/* Line right of active dot */
.step.is-active::after {
  background: var(--active-color);
}

.step-dot {
  position: relative;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  width: var(--dot-size);
  height: var(--dot-size);
  border: 2px solid var(--line-color);
  border-radius: 50%;
  background: #fff;
  color: var(--line-color);
  font-family: Circular, Roboto, san-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

.step-label {
  display: block;
  margin-top: 10px;
  padding: 0 8px;
  color: var(--text-color);
  font-family: Circular, Roboto, san-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.25;
  white-space: nowrap;
}

.step.is-active .step-dot {
  border-color: var(--active-color);
  background: var(--active-color);
  color: #fff;
}

.step.is-active .step-label {
  color: var(--active-color);
  font-weight: 700;
}

/* Focus state for...

JavaScript

(function () {
  const mobileQuery = window.matchMedia("(max-width: 767px)");

  const stepContent = [
    {
      number: 1,
      title: "Request an Estimate",
      image: "https://www.generac.com/globalassets/step1.png",
      alt: "Request an Estimate",
      body: "Getting started is easy. Your local Generac dealer will follow up, answer your questions, and help you understand the best next step for your home and schedule. It’s a low-pressure conversation designed to make the process feel simple from the start."
    },
    {
  number: 2,
  title: "Connect With a Dealer",
  image: "https://www.generac.com/globalassets/step2.png",
  alt: "Generac dealer speaking with homeowners",
  body: `
    <p>
      Your <a href="/dealer-locator" class="StepTextLink">local Generac dealer</a>
      will follow up to answer questions, learn what you want to keep running,
      and schedule your in-home consultation. They’ll use this first conversation
      to better understand your home, priorities, timeline, and concerns before
      recommending next steps.
    </p>

    <p>
      <strong>No pressure — just expert guidance on the right next step.</strong>
    </p>
  `
    },
    {
      number: 3,
      title: "Review Your Home Needs",
      image: "https://www.generac.com/globalassets/step3.png",
      alt: "Review Your Home Needs",
      body: "Every home is different. Your dealer will walk through what matters most to you — from essential circuits to everyday comforts &mdash; and help you understand the right backup power options for your home. It’s a simple, guided conversation designed to make the next step feel clear."
    },
    {
      number: 4,
      title: "Build Your Plan",
      image: "https://www.generac.com/globalassets/step4.png",
      alt: "Build Your Plan",
      body: "Your dealer acts as your guide from plan to installation. Together, you’ll review the right generator for your home, talk through budget and...