V2 fixes: full-size wordmark logo in nav/footer, legible legal pages

- Nav and footer now use the logo SVG alone (it already contains the
  HOA LedgerIQ wordmark) at correct aspect ratio, dropping the
  redundant text spans and the 36x36 square sizing that shrank it
- Privacy and Terms pages: replaced V1 dark-theme inline colors
  (white headings, light gray body) with dark ink colors for the
  V2 white background

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

privacy.html

@@ -10,16 +10,16 @@
   <link rel="stylesheet" href="styles.css" />
   <style>
     .legal-page { max-width: 800px; margin: 0 auto; padding: 60px 24px 100px; }
-    .legal-page h1 { font-size: 38px; font-weight: 900; color: #fff; margin-bottom: 8px; letter-spacing: -0.025em; }
+    .legal-page h1 { font-size: 38px; font-weight: 900; color: #1d1d1f; margin-bottom: 8px; letter-spacing: -0.025em; }
-    .legal-meta { font-size: 13px; color: var(--gray-600); margin-bottom: 48px; }
+    .legal-meta { font-size: 13px; color: #6e6e73; margin-bottom: 48px; }
-    .legal-page h2 { font-size: 20px; font-weight: 700; color: #fff; margin: 36px 0 10px; }
+    .legal-page h2 { font-size: 20px; font-weight: 700; color: #1d1d1f; margin: 36px 0 10px; }
-    .legal-page p, .legal-page li { font-size: 15px; color: var(--gray-400); line-height: 1.75; margin-bottom: 12px; }
+    .legal-page p, .legal-page li { font-size: 15px; color: #424245; line-height: 1.75; margin-bottom: 12px; }
     .legal-page ul { padding-left: 20px; margin-bottom: 12px; }
     .legal-page a { color: var(--blue); text-decoration: none; }
     .legal-page a:hover { text-decoration: underline; }
-    .legal-divider { border: none; border-top: 1px solid rgba(255,255,255,0.07); margin: 40px 0; }
+    .legal-divider { border: none; border-top: 1px solid #e5e5ea; margin: 40px 0; }
-    .back-link { display: inline-flex; align-items: center; gap: 8px; color: var(--gray-400); font-size: 14px; font-weight: 500; text-decoration: none; margin-bottom: 40px; transition: color 0.15s; }
+    .back-link { display: inline-flex; align-items: center; gap: 8px; color: #6e6e73; font-size: 14px; font-weight: 500; text-decoration: none; margin-bottom: 40px; transition: color 0.15s; }
-    .back-link:hover { color: #fff; }
+    .back-link:hover { color: #1d1d1f; }
   </style>
 </head>
 <!-- Google tag (gtag.js) -->

terms.html

@@ -10,16 +10,16 @@
   <link rel="stylesheet" href="styles.css" />
   <style>
     .legal-page { max-width: 800px; margin: 0 auto; padding: 60px 24px 100px; }
-    .legal-page h1 { font-size: 38px; font-weight: 900; color: #fff; margin-bottom: 8px; letter-spacing: -0.025em; }
+    .legal-page h1 { font-size: 38px; font-weight: 900; color: #1d1d1f; margin-bottom: 8px; letter-spacing: -0.025em; }
-    .legal-meta { font-size: 13px; color: var(--gray-600); margin-bottom: 48px; }
+    .legal-meta { font-size: 13px; color: #6e6e73; margin-bottom: 48px; }
-    .legal-page h2 { font-size: 20px; font-weight: 700; color: #fff; margin: 36px 0 10px; }
+    .legal-page h2 { font-size: 20px; font-weight: 700; color: #1d1d1f; margin: 36px 0 10px; }
-    .legal-page p, .legal-page li { font-size: 15px; color: var(--gray-400); line-height: 1.75; margin-bottom: 12px; }
+    .legal-page p, .legal-page li { font-size: 15px; color: #424245; line-height: 1.75; margin-bottom: 12px; }
     .legal-page ul { padding-left: 20px; margin-bottom: 12px; }
     .legal-page a { color: var(--blue); text-decoration: none; }
     .legal-page a:hover { text-decoration: underline; }
-    .legal-divider { border: none; border-top: 1px solid rgba(255,255,255,0.07); margin: 40px 0; }
+    .legal-divider { border: none; border-top: 1px solid #e5e5ea; margin: 40px 0; }
-    .back-link { display: inline-flex; align-items: center; gap: 8px; color: var(--gray-400); font-size: 14px; font-weight: 500; text-decoration: none; margin-bottom: 40px; transition: color 0.15s; }
+    .back-link { display: inline-flex; align-items: center; gap: 8px; color: #6e6e73; font-size: 14px; font-weight: 500; text-decoration: none; margin-bottom: 40px; transition: color 0.15s; }
-    .back-link:hover { color: #fff; }
+    .back-link:hover { color: #1d1d1f; }
   </style>
 </head>
 <!-- Google tag (gtag.js) -->

v2.js

@@ -0,0 +1,133 @@
+/* HOA LedgerIQ — V2 site behaviors
+   Mobile nav, billing toggle, secondary calc trigger,
+   active-section nav highlighting, GA4 events. */
+
+(function () {
+  'use strict';
+
+  // ── Mobile hamburger nav ────────────────────────────────
+  var toggle = document.getElementById('navToggle');
+  var links = document.getElementById('navLinks');
+
+  if (toggle && links) {
+    toggle.addEventListener('click', function () {
+      var open = links.classList.toggle('open');
+      toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
+      toggle.setAttribute('aria-label', open ? 'Close navigation menu' : 'Open navigation menu');
+    });
+
+    // Close the panel when a link is chosen
+    links.addEventListener('click', function (e) {
+      if (e.target.tagName === 'A') {
+        links.classList.remove('open');
+        toggle.setAttribute('aria-expanded', 'false');
+      }
+    });
+
+    // Close on Escape
+    document.addEventListener('keydown', function (e) {
+      if (e.key === 'Escape' && links.classList.contains('open')) {
+        links.classList.remove('open');
+        toggle.setAttribute('aria-expanded', 'false');
+        toggle.focus();
+      }
+    });
+  }
+
+  // ── Second calculator trigger (footer CTA) ─────────────
+  var calc2 = document.getElementById('openCalc2');
+  var overlay = document.getElementById('calcOverlay');
+  if (calc2 && overlay) {
+    calc2.addEventListener('click', function () {
+      overlay.classList.add('open');
+      document.body.style.overflow = 'hidden';
+      if (window.gtag) {
+        gtag('event', 'calculator_open', { event_category: 'engagement', event_label: 'CTA section' });
+      }
+    });
+  }
+
+  // ── Billing interval toggle ─────────────────────────────
+  var billingOpts = document.querySelectorAll('.billing-opt');
+  billingOpts.forEach(function (btn) {
+    btn.addEventListener('click', function () {
+      var interval = btn.dataset.billing; // 'month' | 'year'
+
+      billingOpts.forEach(function (b) {
+        b.classList.toggle('is-active', b === btn);
+        b.setAttribute('aria-selected', b === btn ? 'true' : 'false');
+      });
+
+      document.querySelectorAll('.price-num[data-monthly]').forEach(function (el) {
+        var val = interval === 'year' ? el.dataset.annual : el.dataset.monthly;
+        el.textContent = '$' + val;
+      });
+      document.querySelectorAll('.price-per[data-monthly]').forEach(function (el) {
+        el.textContent = interval === 'year' ? el.dataset.annual : el.dataset.monthly;
+      });
+
+      if (window.gtag) {
+        gtag('event', 'billing_toggle', { event_category: 'engagement', event_label: interval });
+      }
+    });
+  });
+
+  // ── Active-section nav highlighting ─────────────────────
+  if ('IntersectionObserver' in window && links) {
+    var sectionIds = ['features', 'how', 'ai', 'pricing', 'faq'];
+    var navAnchors = {};
+    sectionIds.forEach(function (id) {
+      var a = links.querySelector('a[href="#' + id + '"]');
+      if (a) navAnchors[id] = a;
+    });
+
+    var observer = new IntersectionObserver(function (entries) {
+      entries.forEach(function (entry) {
+        var a = navAnchors[entry.target.id];
+        if (!a) return;
+        if (entry.isIntersecting) {
+          Object.keys(navAnchors).forEach(function (k) { navAnchors[k].classList.remove('is-active'); });
+          a.classList.add('is-active');
+        }
+      });
+    }, { rootMargin: '-40% 0px -55% 0px' });
+
+    sectionIds.forEach(function (id) {
+      var el = document.getElementById(id);
+      if (el) observer.observe(el);
+    });
+  }
+
+  // ── GA4: scroll depth + CTA clicks (lightweight) ───────
+  var fired = {};
+  window.addEventListener('scroll', function () {
+    var pct = Math.round((window.scrollY + window.innerHeight) / document.body.scrollHeight * 100);
+    [25, 50, 75].forEach(function (mark) {
+      if (pct >= mark && !fired[mark]) {
+        fired[mark] = true;
+        if (window.gtag) gtag('event', 'scroll_' + mark, { event_category: 'engagement' });
+      }
+    });
+  }, { passive: true });
+
+  document.querySelectorAll('a.btn-primary, #openCalc, #openCalc2, #calcSubmit').forEach(function (el) {
+    el.addEventListener('click', function () {
+      if (!window.gtag) return;
+      var label = (el.textContent || '').trim().substring(0, 50) || el.id;
+      gtag('event', 'cta_click', { event_category: 'conversion', event_label: label });
+    });
+  });
+
+  // ── GA4: FAQ engagement ─────────────────────────────────
+  document.querySelectorAll('.faq-item').forEach(function (item) {
+    item.addEventListener('toggle', function () {
+      if (item.open && window.gtag) {
+        var q = item.querySelector('summary');
+        gtag('event', 'faq_open', {
+          event_category: 'engagement',
+          event_label: q ? q.textContent.trim().substring(0, 60) : 'unknown'
+        });
+      }
+    });
+  });
+})();