Pages Medium

Insurance — Home Insurance Landing

A reassuring home-insurance marketing page with a warm hero and instant quote estimator, four coverage cards for dwelling, contents, liability and disasters, a bundle savings calculator, a four-step claims timeline, customer testimonials and a final quote call to action.

Open in Lab

html css vanilla-js

Targets: JS HTML

Code

:root {
  --blue: #2563eb;
  --blue-d: #1d4ed8;
  --blue-50: #eef4ff;
  --green: #15a06b;
  --green-d: #0f7d53;
  --green-50: #e7f7f0;
  --ink: #0f1a2b;
  --muted: #5a6b82;
  --bg: #f3f7fc;
  --white: #ffffff;
  --warm: #fff7ed;
  --amber: #f59e0b;
  --line: #e2e9f3;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 10px 30px rgba(15, 26, 43, 0.08);
  --shadow-lg: 0 22px 60px rgba(15, 26, 43, 0.14);
  --font: 'Inter', system-ui, -apple-system, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
h4 {
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.btn:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.45);
  outline-offset: 2px;
}

.btn-primary {
  background: linear-gradient(135deg, var(--blue), var(--blue-d));
  color: #fff;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.28);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.34);
}

.btn-outline {
  background: #fff;
  color: var(--blue-d);
  border-color: var(--line);
}

.btn-outline:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
}

.btn-ghost {
  background: var(--blue-50);
  color: var(--blue-d);
}

.btn-ghost:hover {
  background: #e1ecff;
}

.btn-block {
  width: 100%;
}

/* Nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: 1.15rem;
}

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--blue-50);
  font-size: 1.05rem;
}

.brand-name {
  letter-spacing: -0.02em;
}

.nav-links {
  display: flex;
  gap: 26px;
  margin-left: auto;
  font-weight: 500;
  color: var(--muted);
}

.nav-links a {
  position: relative;
  padding: 6px 0;
  transition: color 0.15s ease;
}

.nav-links a:hover {
  color: var(--ink);
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--blue);
  transition: width 0.2s ease;
}

.nav-links a:hover::after {
  width: 100%;
}

.nav-cta {
  padding: 9px 18px;
}

/* Hero */
.hero {
  position: relative;
  padding: 64px 0 56px;
  background:
    radial-gradient(900px 420px at 78% -10%, var(--warm), transparent 60%),
    radial-gradient(700px 380px at 8% 0%, var(--blue-50), transparent 55%),
    var(--bg);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--green-50);
  color: var(--green-d);
  font-weight: 600;
  font-size: 0.82rem;
  padding: 7px 14px;
  border-radius: 999px;
}

.pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(21, 160, 107, 0.18);
}

.hero h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.25rem);
  font-weight: 800;
  margin: 18px 0 14px;
}

.lead {
  font-size: 1.12rem;
  color: var(--muted);
  max-width: 30ch;
}

.hero-points {
  list-style: none;
  padding: 0;
  margin: 22px 0;
  display: grid;
  gap: 10px;
}

.hero-points li {
  position: relative;
  padding-left: 30px;
  font-weight: 500;
}

.hero-points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--green-50);
  color: var(--green-d);
  font-size: 0.72rem;
  font-weight: 800;
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 0.9rem;
}

.hero-trust strong {
  color: var(--ink);
}

/* Quote card */
.quote-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 26px;
}

.quote-title {
  font-size: 1.35rem;
  font-weight: 800;
}

.quote-sub {
  color: var(--muted);
  font-size: 0.92rem;
  margin-top: 4px;
}

.quote-form {
  margin-top: 18px;
  display: grid;
  gap: 16px;
}

.field {
  display: grid;
  gap: 7px;
}

.field label {
  font-weight: 600;
  font-size: 0.88rem;
}

.field label output {
  color: var(--blue-d);
  font-weight: 700;
}

.field input[type="text"],
.field select {
  font: inherit;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field input[type="text"]:focus,
.field select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}

.field input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--blue-50);
  cursor: pointer;
}

.field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--blue);
  border: 4px solid #fff;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.4);
}

.field input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--blue);
  border: 4px solid #fff;
}

.field input[type="range"]:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.4);
  outline-offset: 4px;
}

.estimate {
  display: grid;
  gap: 2px;
  background: linear-gradient(135deg, var(--blue-50), var(--green-50));
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  text-align: center;
}

.estimate-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.estimate-amount {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--blue-d);
  letter-spacing: -0.03em;
}

.estimate-amount small {
  font-size: 1rem;
  font-weight: 600;
  color: var(--muted);
}

.estimate-note {
  font-size: 0.82rem;
  color: var(--muted);
}

.quote-fine {
  text-align: center;
  font-size: 0.78rem;
  color: var(--muted);
}

/* Strip */
.strip {
  background: var(--ink);
  color: #fff;
}

.strip-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
}

.strip-stat {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.7);
}

.strip-stat strong {
  color: #fff;
  font-weight: 800;
  font-size: 1.15rem;
  margin-right: 4px;
}

/* Sections */
.section {
  padding: 72px 0;
}

.section-tint {
  background:
    radial-gradient(700px 380px at 90% 10%, var(--green-50), transparent 60%),
    var(--white);
}

.section-head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 42px;
}

.section-head h2 {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 800;
}

.section-head p {
  color: var(--muted);
  margin-top: 10px;
  font-size: 1.05rem;
}

.kicker {
  display: inline-block;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-d);
  margin-bottom: 10px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* Coverage cards */
.cover-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
  box-shadow: var(--shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.cover-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(37, 99, 235, 0.35);
}

.cover-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  font-size: 1.5rem;
  margin-bottom: 14px;
}

.icon-blue {
  background: var(--blue-50);
}

.icon-green {
  background: var(--green-50);
}

.cover-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
}

.cover-card p {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 8px 0 16px;
}

.cover-amount {
  display: inline-block;
  font-size: 0.85rem;
  color: var(--muted);
  background: var(--bg);
  border-radius: 999px;
  padding: 6px 12px;
}

.cover-amount strong {
  color: var(--green-d);
  font-weight: 800;
}

/* Bundle */
.bundle-grid {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 44px;
  align-items: center;
}

.bundle-copy h2 {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 800;
}

.bundle-copy p {
  color: var(--muted);
  margin-top: 12px;
  font-size: 1.05rem;
}

.bundle-copy strong {
  color: var(--green-d);
}

.bundle-options {
  border: 0;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  gap: 12px;
}

.bundle-opt {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--white);
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.bundle-opt:hover {
  border-color: rgba(37, 99, 235, 0.4);
}

.bundle-opt:has(input:checked) {
  border-color: var(--green);
  background: var(--green-50);
}

.bundle-opt:has(input:focus-visible) {
  outline: 3px solid rgba(37, 99, 235, 0.35);
  outline-offset: 2px;
}

.bundle-opt input {
  width: 20px;
  height: 20px;
  accent-color: var(--green);
  cursor: pointer;
}

.bundle-opt-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  gap: 12px;
}

.bundle-opt-title {
  font-weight: 600;
}

.bundle-opt-save {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--green-d);
  background: #fff;
  padding: 4px 10px;
  border-radius: 999px;
}

.bundle-result {
  text-align: center;
  background: linear-gradient(160deg, var(--blue-d), var(--blue));
  color: #fff;
  border-radius: var(--radius);
  padding: 34px 26px;
  box-shadow: var(--shadow-lg);
}

.bundle-result-label {
  display: block;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.75);
}

.bundle-result-pct {
  display: block;
  font-size: 3.6rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 8px 0;
  transition: transform 0.25s ease;
}

.bundle-result-pct.bump {
  transform: scale(1.12);
}

.bundle-result-sub {
  display: block;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.82);
}

.bundle-savings {
  margin: 18px 0 14px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.14);
  font-size: 0.95rem;
}

.bundle-savings strong {
  font-size: 1.15rem;
}

.bundle-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
  display: grid;
  gap: 6px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.92);
}

/* Timeline */
.timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  counter-reset: step;
}

.step {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 22px 22px;
  box-shadow: var(--shadow);
}

.step::after {
  content: "";
  position: absolute;
  top: 44px;
  right: -14px;
  width: 28px;
  height: 2px;
  background: var(--line);
}

.timeline .step:last-child::after {
  display: none;
}

.step-num {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--blue), var(--green));
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
  margin-bottom: 14px;
}

.step h3 {
  font-size: 1.1rem;
  font-weight: 700;
}

.step p {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 8px 0 14px;
}

.step-time {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--blue-d);
  background: var(--blue-50);
  padding: 4px 10px;
  border-radius: 999px;
}

/* Reviews */
.review {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
  box-shadow: var(--shadow);
  grid-column: span 1;
}

.cards .review {
  grid-column: span 1;
}

#reviews .cards {
  grid-template-columns: repeat(3, 1fr);
}

.stars {
  color: var(--amber);
  font-size: 1.05rem;
  letter-spacing: 2px;
}

.star-dim {
  color: var(--line);
}

.review blockquote {
  margin: 12px 0 18px;
  font-size: 0.98rem;
  color: var(--ink);
}

.review figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--blue-50);
  color: var(--blue-d);
  font-weight: 800;
  font-size: 0.85rem;
}

.review-who {
  display: grid;
  font-size: 0.9rem;
}

.review-who span {
  color: var(--muted);
  font-size: 0.82rem;
}

/* CTA */
.cta {
  padding: 24px;
}

.cta-inner {
  text-align: center;
  background:
    radial-gradient(600px 300px at 20% 0%, rgba(255, 255, 255, 0.18), transparent),
    linear-gradient(135deg, var(--blue-d), var(--green-d));
  color: #fff;
  border-radius: 28px;
  padding: 56px 28px;
  box-shadow: var(--shadow-lg);
}

.cta-inner h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  font-weight: 800;
}

.cta-inner > p {
  color: rgba(255, 255, 255, 0.88);
  margin-top: 12px;
  font-size: 1.08rem;
}

.cta-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 26px 0 16px;
}

.cta .btn-primary {
  background: #fff;
  color: var(--blue-d);
}

.cta .btn-outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}

.cta .btn-outline:hover {
  background: rgba(255, 255, 255, 0.12);
}

.cta-fine {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.82);
}

.cta-fine strong {
  color: #fff;
}

/* Footer */
.footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.7);
  padding: 52px 0 26px;
  margin-top: 24px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 32px;
}

.footer-brand .brand {
  color: #fff;
}

.footer-brand .brand-mark {
  background: rgba(255, 255, 255, 0.12);
}

.footer-brand p {
  margin-top: 12px;
  font-size: 0.92rem;
  max-width: 28ch;
}

.footer h4 {
  color: #fff;
  font-size: 0.95rem;
  margin-bottom: 14px;
}

.footer nav a {
  display: block;
  padding: 5px 0;
  font-size: 0.9rem;
  transition: color 0.15s ease;
}

.footer nav a:hover {
  color: #fff;
}

.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.85rem;
}

.footer-legal a:hover {
  color: #fff;
}

/* Responsive */
@media (max-width: 920px) {
  .hero-grid,
  .bundle-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .lead {
    max-width: none;
  }

  .cards,
  .timeline {
    grid-template-columns: repeat(2, 1fr);
  }

  #reviews .cards {
    grid-template-columns: 1fr;
  }

  .step::after {
    display: none;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .wrap {
    padding: 0 18px;
  }

  .nav-links {
    display: none;
  }

  .hero {
    padding: 40px 0 36px;
  }

  .section {
    padding: 52px 0;
  }

  .cards,
  .timeline,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .strip-inner {
    justify-content: flex-start;
    gap: 18px 28px;
  }

  .cta-inner {
    padding: 40px 20px;
  }

  .cta-actions .btn {
    width: 100%;
  }

  .estimate-amount {
    font-size: 2.1rem;
  }
}

// Harborline home-insurance landing — vanilla JS, no dependencies.
(function () {
  "use strict";

  var usd = function (n) {
    return "$" + Math.round(n).toLocaleString("en-US");
  };

  /* ---------------------------------------------------------------
     Instant quote estimator
     A simple, illustrative premium model:
       base rate scales with home value, modified by deductible tier.
  --------------------------------------------------------------- */
  var valueInput = document.getElementById("value");
  var valueOut = document.getElementById("valueOut");
  var deductible = document.getElementById("deductible");
  var premiumEl = document.getElementById("premium");
  var annualNote = document.getElementById("annualNote");
  var quoteForm = document.getElementById("quoteForm");

  // Lower deductible => higher premium multiplier.
  var deductibleFactor = {
    "500": 1.18,
    "1000": 1.0,
    "2500": 0.88,
    "5000": 0.79
  };

  function calcPremium() {
    if (!valueInput) return;
    var value = Number(valueInput.value);
    var factor = deductibleFactor[deductible.value] || 1;

    // ~$0.0021 per dollar of value per year, plus a $180 base, then /12.
    var annual = (value * 0.0021 + 180) * factor;
    var monthly = annual / 12;

    valueOut.textContent = usd(value);
    premiumEl.textContent = usd(monthly);
    annualNote.textContent = "≈ " + usd(monthly * 12) + " billed yearly";
  }

  if (valueInput) {
    valueInput.addEventListener("input", calcPremium);
    deductible.addEventListener("change", calcPremium);
    calcPremium();
  }

  // ZIP: digits only.
  var zip = document.getElementById("zip");
  if (zip) {
    zip.addEventListener("input", function () {
      zip.value = zip.value.replace(/\D/g, "").slice(0, 5);
    });
  }

  if (quoteForm) {
    quoteForm.addEventListener("submit", function (e) {
      e.preventDefault();
      var btn = quoteForm.querySelector('button[type="submit"]');
      if (!btn || btn.dataset.busy) return;
      var original = btn.textContent;
      btn.dataset.busy = "1";
      btn.disabled = true;
      btn.textContent = "Saved! Check the demo ✓";
      setTimeout(function () {
        btn.disabled = false;
        btn.textContent = original;
        delete btn.dataset.busy;
      }, 2200);
    });
  }

  /* ---------------------------------------------------------------
     Bundle savings calculator
     Discounts stack additively, capped at 27%. Savings shown against
     an illustrative $1,540/yr combined bundle premium.
  --------------------------------------------------------------- */
  var bundleOptions = document.getElementById("bundleOptions");
  var bundlePct = document.getElementById("bundlePct");
  var bundleSaved = document.getElementById("bundleSaved");
  var bundleCount = document.getElementById("bundleCount");
  var bundleList = document.getElementById("bundleList");

  var BUNDLE_BASE = 1540; // illustrative combined yearly premium
  var BUNDLE_CAP = 27;

  function updateBundle() {
    if (!bundleOptions) return;
    var checked = bundleOptions.querySelectorAll('input[type="checkbox"]:checked');
    var pct = 0;
    var items = ["🏠 Home insurance — included"];

    checked.forEach(function (c) {
      pct += Number(c.value);
      items.push("➕ " + c.dataset.label + " — added");
    });

    pct = Math.min(pct, BUNDLE_CAP);
    var saved = (BUNDLE_BASE * pct) / 100;

    bundlePct.textContent = pct + "%";
    bundleSaved.textContent = usd(saved);
    bundleCount.textContent = checked.length + 1;

    bundleList.innerHTML = items
      .map(function (t) {
        return "<li>" + t + "</li>";
      })
      .join("");

    // Little bump micro-interaction on change.
    bundlePct.classList.remove("bump");
    void bundlePct.offsetWidth; // reflow to restart animation
    bundlePct.classList.add("bump");
  }

  if (bundleOptions) {
    bundleOptions.addEventListener("change", updateBundle);
    updateBundle();
  }

  /* ---------------------------------------------------------------
     Smooth in-page nav active state (lightweight scroll spy).
  --------------------------------------------------------------- */
  var links = Array.prototype.slice.call(
    document.querySelectorAll(".nav-links a[href^='#']")
  );
  var sections = links
    .map(function (l) {
      return document.querySelector(l.getAttribute("href"));
    })
    .filter(Boolean);

  if ("IntersectionObserver" in window && sections.length) {
    var spy = new IntersectionObserver(
      function (entries) {
        entries.forEach(function (entry) {
          if (!entry.isIntersecting) return;
          links.forEach(function (l) {
            var on = l.getAttribute("href") === "#" + entry.target.id;
            l.style.color = on ? "var(--ink)" : "";
          });
        });
      },
      { rootMargin: "-45% 0px -50% 0px" }
    );
    sections.forEach(function (s) {
      spy.observe(s);
    });
  }
})();

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Harborline Home Insurance — Protect what matters most</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <!-- Top nav -->
  <header class="nav">
    <div class="wrap nav-inner">
      <a href="#top" class="brand" aria-label="Harborline home page">
        <span class="brand-mark" aria-hidden="true">🏠</span>
        <span class="brand-name">Harborline</span>
      </a>
      <nav class="nav-links" aria-label="Primary">
        <a href="#coverage">Coverage</a>
        <a href="#bundle">Bundle &amp; save</a>
        <a href="#claims">Claims</a>
        <a href="#reviews">Reviews</a>
      </nav>
      <a href="#quote" class="btn btn-ghost nav-cta">Get a quote</a>
    </div>
  </header>

  <main id="top">
    <!-- Hero -->
    <section class="hero">
      <div class="wrap hero-grid">
        <div class="hero-copy">
          <span class="pill"><span class="dot" aria-hidden="true"></span> A+ rated · 1.2M homes covered</span>
          <h1>Home insurance that feels like a warm porch light.</h1>
          <p class="lead">
            Protect your house, your stuff and your peace of mind with coverage that's clear,
            fairly priced and backed by 24/7 human claims support.
          </p>
          <ul class="hero-points">
            <li>No-surprise pricing — locked for 12 months</li>
            <li>Most claims paid within 48 hours</li>
            <li>Switch in minutes, keep your old policy date</li>
          </ul>
          <div class="hero-trust" aria-label="Trust indicators">
            <span>★★★★★ <strong>4.8</strong> · 9,400 reviews</span>
            <span aria-hidden="true">•</span>
            <span>NAIC complaint-free 3 yrs</span>
          </div>
        </div>

        <!-- Quote estimator -->
        <aside class="quote-card" id="quote" aria-label="Instant quote estimator">
          <h2 class="quote-title">Instant estimate</h2>
          <p class="quote-sub">No email needed — see a ballpark in seconds.</p>

          <form id="quoteForm" class="quote-form" novalidate>
            <div class="field">
              <label for="zip">ZIP code</label>
              <input id="zip" name="zip" type="text" inputmode="numeric" maxlength="5"
                     placeholder="98101" value="98101" autocomplete="postal-code" />
            </div>

            <div class="field">
              <label for="value">Home value: <output id="valueOut">$420,000</output></label>
              <input id="value" name="value" type="range" min="120000" max="1500000"
                     step="10000" value="420000" />
            </div>

            <div class="field">
              <label for="deductible">Deductible</label>
              <select id="deductible" name="deductible">
                <option value="500">$500 — higher premium</option>
                <option value="1000" selected>$1,000 — balanced</option>
                <option value="2500">$2,500 — lower premium</option>
                <option value="5000">$5,000 — lowest premium</option>
              </select>
            </div>

            <div class="estimate" aria-live="polite">
              <span class="estimate-label">Estimated premium</span>
              <span class="estimate-amount"><span id="premium">$84</span><small>/mo</small></span>
              <span class="estimate-note" id="annualNote">≈ $1,008 billed yearly</span>
            </div>

            <button type="submit" class="btn btn-primary btn-block">Get my real quote</button>
            <p class="quote-fine">Soft check only · won't affect your credit score.</p>
          </form>
        </aside>
      </div>
    </section>

    <!-- Logos / reassurance strip -->
    <section class="strip" aria-label="Backed by">
      <div class="wrap strip-inner">
        <span class="strip-stat"><strong>$2.1B</strong> claims paid</span>
        <span class="strip-stat"><strong>48 hr</strong> avg payout</span>
        <span class="strip-stat"><strong>4.8/5</strong> customer rating</span>
        <span class="strip-stat"><strong>24/7</strong> live support</span>
      </div>
    </section>

    <!-- What's covered -->
    <section class="section" id="coverage">
      <div class="wrap">
        <div class="section-head">
          <h2>What's covered</h2>
          <p>Standard policies protect the four things that cost the most to replace.</p>
        </div>

        <div class="cards" id="coverageGrid">
          <article class="cover-card">
            <span class="cover-icon icon-blue" aria-hidden="true">🏚️</span>
            <h3>Dwelling</h3>
            <p>Your home's structure, roof, foundation, built-ins and attached garage.</p>
            <span class="cover-amount">up to <strong>$650,000</strong></span>
          </article>

          <article class="cover-card">
            <span class="cover-icon icon-green" aria-hidden="true">🛋️</span>
            <h3>Personal contents</h3>
            <p>Furniture, electronics, appliances and clothing — at home or away.</p>
            <span class="cover-amount">up to <strong>$325,000</strong></span>
          </article>

          <article class="cover-card">
            <span class="cover-icon icon-blue" aria-hidden="true">🛡️</span>
            <h3>Personal liability</h3>
            <p>Injuries to guests and accidental damage you cause to others' property.</p>
            <span class="cover-amount">up to <strong>$500,000</strong></span>
          </article>

          <article class="cover-card">
            <span class="cover-icon icon-green" aria-hidden="true">🌪️</span>
            <h3>Natural disasters</h3>
            <p>Wind, hail, wildfire and winter storm damage, plus debris removal.</p>
            <span class="cover-amount">add-on <strong>+$12/mo</strong></span>
          </article>
        </div>
      </div>
    </section>

    <!-- Bundle savings -->
    <section class="section section-tint" id="bundle">
      <div class="wrap bundle-grid">
        <div class="bundle-copy">
          <span class="kicker">Bundle &amp; save</span>
          <h2>Combine policies, drop your bill.</h2>
          <p>
            Add coverage you already need and we apply a stacking discount — up to
            <strong>27% off</strong> your whole bundle.
          </p>

          <fieldset class="bundle-options" id="bundleOptions">
            <legend class="sr-only">Add policies to your bundle</legend>

            <label class="bundle-opt">
              <input type="checkbox" name="bundle" value="8" data-label="Auto" />
              <span class="bundle-opt-body">
                <span class="bundle-opt-title">🚗 Auto insurance</span>
                <span class="bundle-opt-save">save 8%</span>
              </span>
            </label>

            <label class="bundle-opt">
              <input type="checkbox" name="bundle" value="6" data-label="Life" />
              <span class="bundle-opt-body">
                <span class="bundle-opt-title">❤️ Term life</span>
                <span class="bundle-opt-save">save 6%</span>
              </span>
            </label>

            <label class="bundle-opt">
              <input type="checkbox" name="bundle" value="13" data-label="Umbrella" />
              <span class="bundle-opt-body">
                <span class="bundle-opt-title">☂️ Umbrella liability</span>
                <span class="bundle-opt-save">save 13%</span>
              </span>
            </label>
          </fieldset>
        </div>

        <aside class="bundle-result" aria-live="polite">
          <span class="bundle-result-label">Your bundle discount</span>
          <span class="bundle-result-pct" id="bundlePct">0%</span>
          <span class="bundle-result-sub">on a combined <span id="bundleCount">1</span>-policy bundle</span>
          <div class="bundle-savings">
            You'd save about <strong id="bundleSaved">$0</strong> a year.
          </div>
          <ul class="bundle-list" id="bundleList">
            <li>🏠 Home insurance — included</li>
          </ul>
        </aside>
      </div>
    </section>

    <!-- Claims process -->
    <section class="section" id="claims">
      <div class="wrap">
        <div class="section-head">
          <h2>Filing a claim is four calm steps</h2>
          <p>No phone-tree maze. Start online, talk to a real person, get paid fast.</p>
        </div>

        <ol class="timeline">
          <li class="step">
            <span class="step-num">1</span>
            <h3>Report it</h3>
            <p>File in the app or call us. Snap a few photos — that's usually all we need.</p>
            <span class="step-time">~5 min</span>
          </li>
          <li class="step">
            <span class="step-num">2</span>
            <h3>Meet your adjuster</h3>
            <p>A dedicated claims specialist reaches out, often the same day.</p>
            <span class="step-time">within 24 hr</span>
          </li>
          <li class="step">
            <span class="step-num">3</span>
            <h3>Review &amp; approve</h3>
            <p>We assess the damage, confirm coverage and walk you through the payout.</p>
            <span class="step-time">1–2 days</span>
          </li>
          <li class="step">
            <span class="step-num">4</span>
            <h3>Get paid</h3>
            <p>Funds land by direct deposit so you can start repairs right away.</p>
            <span class="step-time">≤ 48 hr</span>
          </li>
        </ol>
      </div>
    </section>

    <!-- Testimonials -->
    <section class="section section-tint" id="reviews">
      <div class="wrap">
        <div class="section-head">
          <h2>Homeowners who sleep easier</h2>
          <p>Real stories from policyholders across the country.</p>
        </div>

        <div class="cards">
          <figure class="review">
            <div class="stars" aria-label="5 out of 5 stars">★★★★★</div>
            <blockquote>A pipe burst over Thanksgiving. Adjuster called within the hour and the
              payout cleared in two days. I've never had insurance feel this human.</blockquote>
            <figcaption>
              <span class="avatar" aria-hidden="true">DM</span>
              <span class="review-who"><strong>Dana Maxwell</strong><span>Spokane, WA · 3 yrs</span></span>
            </figcaption>
          </figure>

          <figure class="review">
            <div class="stars" aria-label="5 out of 5 stars">★★★★★</div>
            <blockquote>Bundling our auto and home knocked $640 off the year. The quote took less
              time than my coffee did to brew.</blockquote>
            <figcaption>
              <span class="avatar" aria-hidden="true">RO</span>
              <span class="review-who"><strong>Rafael Ortega</strong><span>Austin, TX · 2 yrs</span></span>
            </figcaption>
          </figure>

          <figure class="review">
            <div class="stars" aria-label="4 out of 5 stars">★★★★<span class="star-dim">★</span></div>
            <blockquote>Wildfire smoke ruined our deck and siding. They covered the cleanup and the
              repaint without any fuss. Genuinely relieved.</blockquote>
            <figcaption>
              <span class="avatar" aria-hidden="true">PL</span>
              <span class="review-who"><strong>Priya Laghari</strong><span>Bend, OR · 5 yrs</span></span>
            </figcaption>
          </figure>
        </div>
      </div>
    </section>

    <!-- Final CTA -->
    <section class="cta">
      <div class="wrap cta-inner">
        <h2>Your home deserves a friendlier policy.</h2>
        <p>Get a personalized quote in under three minutes. Cancel anytime, no fees.</p>
        <div class="cta-actions">
          <a href="#quote" class="btn btn-primary">Start my free quote</a>
          <a href="tel:18005550123" class="btn btn-outline">Call 1-800-555-0123</a>
        </div>
        <p class="cta-fine">Avg. new customer saves <strong>$412/yr</strong> after switching.</p>
      </div>
    </section>
  </main>

  <footer class="footer">
    <div class="wrap footer-grid">
      <div class="footer-brand">
        <span class="brand"><span class="brand-mark" aria-hidden="true">🏠</span><span class="brand-name">Harborline</span></span>
        <p>Home insurance built around real people, not fine print.</p>
      </div>
      <nav aria-label="Products">
        <h4>Products</h4>
        <a href="#coverage">Home</a>
        <a href="#bundle">Auto bundle</a>
        <a href="#bundle">Umbrella</a>
        <a href="#bundle">Term life</a>
      </nav>
      <nav aria-label="Company">
        <h4>Company</h4>
        <a href="#reviews">Reviews</a>
        <a href="#claims">Claims</a>
        <a href="#top">About</a>
        <a href="#top">Careers</a>
      </nav>
      <nav aria-label="Support">
        <h4>Support</h4>
        <a href="tel:18005550123">1-800-555-0123</a>
        <a href="#top">Help center</a>
        <a href="#top">File a claim</a>
        <a href="#top">Coverage docs</a>
      </nav>
    </div>
    <div class="wrap footer-base">
      <span>© 2026 Harborline Mutual. Illustrative demo — not a real insurer.</span>
      <span class="footer-legal"><a href="#top">Privacy</a> · <a href="#top">Terms</a> · <a href="#top">Licenses</a></span>
    </div>
  </footer>

  <script src="script.js"></script>
</body>
</html>

Home Insurance Landing

A calm, trust-first landing page for a home-insurance product. The warm hero pairs a confident headline with a quick quote estimator that returns a live monthly figure as you change your home value and deductible. Below it, four coverage cards explain what is protected — dwelling, personal contents, personal liability and natural disasters — each with friendly iconography and big, confident numbers.

A bundle savings panel lets visitors toggle auto, life and umbrella policies to watch their projected discount climb. The claims process is laid out as a clear four-step timeline, and real sounding testimonials with star ratings build social proof. A final blue-and-green call to action nudges visitors toward a full quote, followed by a tidy footer.

Everything is plain HTML, CSS custom properties and vanilla JavaScript — no frameworks, no dependencies. Swap the palette tokens in :root to rebrand it in seconds.

Illustrative UI only — not a real insurance offering, quote or binding coverage.