perf(top-of-page): fix reveal flash, inline header/footer JSON

Two stacked wins for first-paint speed on every page:

1. The .reveal animation no longer hides content by default. CSS used
   to apply opacity:0 to every .reveal element unconditionally, leaving
   the whole hero invisible for ~800ms until app.js could attach the
   IntersectionObserver and add .in. Above-the-fold content now paints
   immediately; app.js stamps .r-hide only on .reveal elements that
   are below the fold at first paint, then the observer fades them in
   as they scroll into view. prefers-reduced-motion users skip both.

2. header.json and footer.json are now inlined into every page as
   <script id="ota-header-data" type="application/json"> blocks at
   build time. header.js and footer.js read those inline blocks
   instead of fetching, removing a network round-trip on every load
   and letting the nav paint as soon as header.js is parsed. The old
   preload tags are gone (no fetch to preload). Both scripts fall back
   to fetch if the inline block is missing (older deploys, dev).

Also fixes: admin footer editor showed "[object Object]" in the Phone
field because the input was bound to the whole `phone` object instead
of phone.label. Split into two inputs (label + tel: link).

Docs: TROUBLESHOOTING.md now documents the changelog-bot push-rejection
gotcha — on this repo, run git pull --rebase between every push
because changelog.yml auto-commits on each push to main.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: Shalom-Karr

docs/TROUBLESHOOTING.md

@@ -309,6 +309,45 @@ and `wrangler pages secret bulk` both use `secret_text` by default.
 
 ---
 
+## `git push` rejected — "remote contains work that you do not have locally"
+
+### Symptom
+
+You just committed a fix, push, and Git says:
+
+```
+hint: Updates were rejected because the remote contains work that you
+hint: do not have locally...
+```
+
+You didn't expect anyone else to be pushing.
+
+### Why
+
+`.github/workflows/changelog.yml` auto-commits a `CHANGELOG.md` update
+on every push to `main`. That commit (subject ends `[skip ci]`) lands
+on the remote within seconds of your push. Your next local push from
+the same branch is then non-fast-forward — the remote has the bot's
+commit, you don't.
+
+### Fix
+
+```bash
+git pull --rebase origin main
+git push origin main
+```
+
+Don't force-push — the changelog commit is real work; rebasing
+preserves both. Build this into your workflow on this repo:
+
+```bash
+git commit -m "..."
+git pull --rebase origin main   # absorb the auto-changelog if any
+git push origin main
+```
+
+---
+
 ## Conventions on this project
 
 (things that aren't obvious from reading the code, learned the hard way)

website/aba-therapy-guide.html

@@ -435,8 +435,8 @@
 <!-- auto-seo-end -->
   <!-- auto-perf-start -->
 <meta name="view-transition" content="same-origin">
-<link rel="preload" as="fetch" href="/assets/data/header.json">
-<link rel="preload" as="fetch" href="/assets/data/footer.json">
+<script id="ota-header-data" type="application/json">{"schemaVersion":1,"announcementBar":{"text":"NEW LOCATION IN CLEVELAND OPENING SOON!","linkLabel":"","linkHref":""},"logo":{"src":"/assets/images/footerImg.png","alt":"On Target ABA","href":"/"},"navLinks":[{"href":"/our-services.html","label":"Services","section":"Services"},{"href":"/autism-testing.html","label":"Autism Testing","section":"Autism Testing"},{"href":"/about.html","label":"About","section":"About"},{"href":"/insurance.html","label":"Insurance","section":"Insurance"},{"href":"/locations.html","label":"Locations","section":"Locations"},{"href":"/faqs.html","label":"FAQs","section":"FAQs"},{"href":"/careers.html","label":"Careers","section":"Careers"},{"href":"/blog.html","label":"Blog","section":"Blog"}],"cta":{"phone":{"href":"tel:8889895011","label":"(888) 989-5011"},"primary":{"href":"/contact.html","label":"Get Started"}},"breadcrumbs":{"/":null,"/about":[["Home","/"],["About",null]],"/our-process":[["Home","/"],["About","/about"],["Our Process",null]],"/our-services":[["Home","/"],["Services",null]],"/center-based-aba-therapy":[["Home","/"],["Services","/our-services"],["Center-Based ABA",null]],"/in-home-aba-therapy":[["Home","/"],["Services","/our-services"],["In-Home ABA",null]],"/early-intervention-autism-program":[["Home","/"],["Services","/our-services"],["Early Intervention",null]],"/potty-training-program":[["Home","/"],["Services","/our-services"],["Potty Training",null]],"/autism-testing":[["Home","/"],["Services","/our-services"],["Autism Testing",null]],"/locations":[["Home","/"],["Locations",null]],"/murray-utah":[["Home","/"],["Locations","/locations"],["Murray, UT",null]],"/mayfield-ohio":[["Home","/"],["Locations","/locations"],["Mayfield Village, OH",null]],"/gahanna-ohio":[["Home","/"],["Locations","/locations"],["Gahanna, OH",null]],"/worthington-ohio":[["Home","/"],["Locations","/locations"],["Worthington, OH",null]],"/insurance":[["Home","/"],["Insurance",null]],"/faqs":[["Home","/"],["FAQs",null]],"/careers":[["Home","/"],["Careers",null]],"/job-application":[["Home","/"],["Careers","/careers"],["Job Application",null]],"/employment-application":[["Home","/"],["Careers","/careers"],["Employment Application",null]],"/contact":[["Home","/"],["Contact",null]],"/pre-intake-form":[["Home","/"],["Contact","/contact"],["Pre-Intake Form",null]],"/aba-therapy-guide":[["Home","/"],["Resources",null],["ABA Therapy Guide",null]],"/blog":[["Home","/"],["Blog",null]],"/blog/post":[["Home","/"],["Blog","/blog"],["Article",null]],"/privacy-policy":[["Home","/"],["Legal",null],["Privacy Policy",null]],"/terms-of-service":[["Home","/"],["Legal",null],["Terms of Service",null]],"/cookie-consent":[["Home","/"],["Legal",null],["Cookies",null]],"/disclaimer":[["Home","/"],["Legal",null],["Disclaimer",null]],"/icon-attribution":[["Home","/"],["Legal",null],["Icon Attribution",null]],"/thank-you":null,"/thank-you-confirmation":null},"activeSectionMap":{"/our-services":"Services","/center-based-aba-therapy":"Services","/in-home-aba-therapy":"Services","/early-intervention-autism-program":"Services","/potty-training-program":"Services","/autism-testing":"Autism Testing","/about":"About","/our-process":"About","/insurance":"Insurance","/locations":"Locations","/murray-utah":"Locations","/mayfield-ohio":"Locations","/gahanna-ohio":"Locations","/worthington-ohio":"Locations","/faqs":"FAQs","/careers":"Careers","/job-application":"Careers","/employment-application":"Careers","/blog":"Blog"}}</script>
+<script id="ota-footer-data" type="application/json">{"schemaVersion":1,"logo":{"src":"/assets/images/footerImg.png","alt":"On Target ABA"},"tagline":"Compassionate, evidence-based ABA therapy and autism evaluations. Quality care without the wait.","phone":{"href":"tel:8889895011","label":"1-888-989-5011"},"columns":[{"title":"Services","links":[{"href":"/center-based-aba-therapy.html","label":"Center-Based ABA"},{"href":"/in-home-aba-therapy.html","label":"In-Home ABA"},{"href":"/early-intervention-autism-program.html","label":"Early Intervention"},{"href":"/potty-training-program.html","label":"Potty Training"},{"href":"/autism-testing.html","label":"Autism Testing"}]},{"title":"Company","links":[{"href":"/about.html","label":"About"},{"href":"/our-process.html","label":"Our Process"},{"href":"/locations.html","label":"Locations"},{"href":"/careers.html","label":"Careers"},{"href":"/blog.html","label":"Blog"}]},{"title":"Resources","links":[{"href":"/aba-therapy-guide.html","label":"ABA Therapy Guide"},{"href":"/insurance.html","label":"Insurance"},{"href":"/faqs.html","label":"FAQs"},{"href":"/contact.html","label":"Contact"},{"href":"/pre-intake-form.html","label":"Pre-Intake Form"}]},{"title":"Locations","links":[{"href":"/murray-utah.html","label":"Utah | Murray, UT"},{"href":"/mayfield-ohio.html","label":"Cleveland | Mayfield Village, OH"},{"href":"/gahanna-ohio.html","label":"Columbus | Gahanna, OH"},{"href":"/worthington-ohio.html","label":"Worthington | Worthington, OH"}]}],"credit":{"url":"https://shalomkarr.pages.dev/","name":"Shalom Karr"},"copyright":"\u00a9 ON TARGET ABA, LLC \u00b7 All rights reserved \u00b7 Operated by Target ABA, LLC","legalLinks":[{"href":"/privacy-policy.html","label":"Privacy"},{"href":"/terms-of-service.html","label":"Terms"},{"href":"/cookie-consent.html","label":"Cookies"},{"href":"/disclaimer.html","label":"Disclaimer"}]}</script>
 <link rel="prefetch" href="/contact.html">
 <link rel="prefetch" href="/our-services.html">
 <link rel="prefetch" href="/autism-testing.html">

website/about.html

@@ -415,8 +415,8 @@
 <!-- auto-seo-end -->
   <!-- auto-perf-start -->
 <meta name="view-transition" content="same-origin">
-<link rel="preload" as="fetch" href="/assets/data/header.json">
-<link rel="preload" as="fetch" href="/assets/data/footer.json">
+<script id="ota-header-data" type="application/json">{"schemaVersion":1,"announcementBar":{"text":"NEW LOCATION IN CLEVELAND OPENING SOON!","linkLabel":"","linkHref":""},"logo":{"src":"/assets/images/footerImg.png","alt":"On Target ABA","href":"/"},"navLinks":[{"href":"/our-services.html","label":"Services","section":"Services"},{"href":"/autism-testing.html","label":"Autism Testing","section":"Autism Testing"},{"href":"/about.html","label":"About","section":"About"},{"href":"/insurance.html","label":"Insurance","section":"Insurance"},{"href":"/locations.html","label":"Locations","section":"Locations"},{"href":"/faqs.html","label":"FAQs","section":"FAQs"},{"href":"/careers.html","label":"Careers","section":"Careers"},{"href":"/blog.html","label":"Blog","section":"Blog"}],"cta":{"phone":{"href":"tel:8889895011","label":"(888) 989-5011"},"primary":{"href":"/contact.html","label":"Get Started"}},"breadcrumbs":{"/":null,"/about":[["Home","/"],["About",null]],"/our-process":[["Home","/"],["About","/about"],["Our Process",null]],"/our-services":[["Home","/"],["Services",null]],"/center-based-aba-therapy":[["Home","/"],["Services","/our-services"],["Center-Based ABA",null]],"/in-home-aba-therapy":[["Home","/"],["Services","/our-services"],["In-Home ABA",null]],"/early-intervention-autism-program":[["Home","/"],["Services","/our-services"],["Early Intervention",null]],"/potty-training-program":[["Home","/"],["Services","/our-services"],["Potty Training",null]],"/autism-testing":[["Home","/"],["Services","/our-services"],["Autism Testing",null]],"/locations":[["Home","/"],["Locations",null]],"/murray-utah":[["Home","/"],["Locations","/locations"],["Murray, UT",null]],"/mayfield-ohio":[["Home","/"],["Locations","/locations"],["Mayfield Village, OH",null]],"/gahanna-ohio":[["Home","/"],["Locations","/locations"],["Gahanna, OH",null]],"/worthington-ohio":[["Home","/"],["Locations","/locations"],["Worthington, OH",null]],"/insurance":[["Home","/"],["Insurance",null]],"/faqs":[["Home","/"],["FAQs",null]],"/careers":[["Home","/"],["Careers",null]],"/job-application":[["Home","/"],["Careers","/careers"],["Job Application",null]],"/employment-application":[["Home","/"],["Careers","/careers"],["Employment Application",null]],"/contact":[["Home","/"],["Contact",null]],"/pre-intake-form":[["Home","/"],["Contact","/contact"],["Pre-Intake Form",null]],"/aba-therapy-guide":[["Home","/"],["Resources",null],["ABA Therapy Guide",null]],"/blog":[["Home","/"],["Blog",null]],"/blog/post":[["Home","/"],["Blog","/blog"],["Article",null]],"/privacy-policy":[["Home","/"],["Legal",null],["Privacy Policy",null]],"/terms-of-service":[["Home","/"],["Legal",null],["Terms of Service",null]],"/cookie-consent":[["Home","/"],["Legal",null],["Cookies",null]],"/disclaimer":[["Home","/"],["Legal",null],["Disclaimer",null]],"/icon-attribution":[["Home","/"],["Legal",null],["Icon Attribution",null]],"/thank-you":null,"/thank-you-confirmation":null},"activeSectionMap":{"/our-services":"Services","/center-based-aba-therapy":"Services","/in-home-aba-therapy":"Services","/early-intervention-autism-program":"Services","/potty-training-program":"Services","/autism-testing":"Autism Testing","/about":"About","/our-process":"About","/insurance":"Insurance","/locations":"Locations","/murray-utah":"Locations","/mayfield-ohio":"Locations","/gahanna-ohio":"Locations","/worthington-ohio":"Locations","/faqs":"FAQs","/careers":"Careers","/job-application":"Careers","/employment-application":"Careers","/blog":"Blog"}}</script>
+<script id="ota-footer-data" type="application/json">{"schemaVersion":1,"logo":{"src":"/assets/images/footerImg.png","alt":"On Target ABA"},"tagline":"Compassionate, evidence-based ABA therapy and autism evaluations. Quality care without the wait.","phone":{"href":"tel:8889895011","label":"1-888-989-5011"},"columns":[{"title":"Services","links":[{"href":"/center-based-aba-therapy.html","label":"Center-Based ABA"},{"href":"/in-home-aba-therapy.html","label":"In-Home ABA"},{"href":"/early-intervention-autism-program.html","label":"Early Intervention"},{"href":"/potty-training-program.html","label":"Potty Training"},{"href":"/autism-testing.html","label":"Autism Testing"}]},{"title":"Company","links":[{"href":"/about.html","label":"About"},{"href":"/our-process.html","label":"Our Process"},{"href":"/locations.html","label":"Locations"},{"href":"/careers.html","label":"Careers"},{"href":"/blog.html","label":"Blog"}]},{"title":"Resources","links":[{"href":"/aba-therapy-guide.html","label":"ABA Therapy Guide"},{"href":"/insurance.html","label":"Insurance"},{"href":"/faqs.html","label":"FAQs"},{"href":"/contact.html","label":"Contact"},{"href":"/pre-intake-form.html","label":"Pre-Intake Form"}]},{"title":"Locations","links":[{"href":"/murray-utah.html","label":"Utah | Murray, UT"},{"href":"/mayfield-ohio.html","label":"Cleveland | Mayfield Village, OH"},{"href":"/gahanna-ohio.html","label":"Columbus | Gahanna, OH"},{"href":"/worthington-ohio.html","label":"Worthington | Worthington, OH"}]}],"credit":{"url":"https://shalomkarr.pages.dev/","name":"Shalom Karr"},"copyright":"\u00a9 ON TARGET ABA, LLC \u00b7 All rights reserved \u00b7 Operated by Target ABA, LLC","legalLinks":[{"href":"/privacy-policy.html","label":"Privacy"},{"href":"/terms-of-service.html","label":"Terms"},{"href":"/cookie-consent.html","label":"Cookies"},{"href":"/disclaimer.html","label":"Disclaimer"}]}</script>
 <link rel="prefetch" href="/contact.html">
 <link rel="prefetch" href="/our-services.html">
 <link rel="prefetch" href="/autism-testing.html">

website/admin/footer.html

@@ -73,7 +73,8 @@ <h1 class="admin-h1">Footer</h1>
           <div class="field"><label>Logo src</label><input class="input" data-bind="logo.src" type="text"></div>
           <div class="field"><label>Logo alt</label><input class="input" data-bind="logo.alt" type="text"></div>
           <div class="field" style="grid-column:1/-1;"><label>Tagline</label><input class="input" data-bind="tagline" type="text"></div>
-          <div class="field"><label>Phone</label><input class="input" data-bind="phone" type="text"></div>
+          <div class="field"><label>Phone (display label)</label><input class="input" data-bind="phone.label" type="text" placeholder="1-888-989-5011"></div>
+          <div class="field"><label>Phone (tel: link)</label><input class="input" data-bind="phone.href" type="text" placeholder="tel:8889895011"></div>
         </div>
       </section>
 

website/assets/css/app.css

@@ -203,12 +203,17 @@ body {
 .blob-teal  { background: var(--c-teal); }
 
 /* =========== Scroll-reveal =========== */
+/* `.reveal` is no longer hidden by default. app.js stamps `.r-hide` on
+   elements that are below the fold at first paint, then the observer
+   removes it via `.in`. Above-the-fold content paints immediately. */
 .reveal {
-  opacity: 0;
-  transform: translateY(24px);
   transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
   will-change: opacity, transform;
 }
+.reveal.r-hide {
+  opacity: 0;
+  transform: translateY(24px);
+}
 .reveal.in {
   opacity: 1;
   transform: translateY(0);

website/assets/js/app.js

@@ -13,6 +13,18 @@
   'use strict';
 
   // ---------- Scroll reveal ----------
+  // We don't hide .reveal in CSS — above-the-fold content paints
+  // immediately. Here we stamp `.r-hide` only on elements that are
+  // below the fold at first paint, and the observer removes it via
+  // `.in` as they enter the viewport.
+  const reducedMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
+  const fold = window.innerHeight + 80;
+  document.querySelectorAll('.reveal').forEach((el) => {
+    if (!reducedMotion && el.getBoundingClientRect().top > fold) {
+      el.classList.add('r-hide');
+    }
+  });
+
   const io = new IntersectionObserver((entries) => {
     entries.forEach((e) => {
       if (e.isIntersecting) {

website/assets/js/footer.js

@@ -107,11 +107,22 @@
     );
   }
 
-  fetch('/assets/data/footer.json', { credentials: 'same-origin' })
-    .then((r) => {
-      if (!r.ok) throw new Error('footer.json ' + r.status);
-      return r.json();
-    })
+  // Prefer footer data inlined at build time by scripts/optimize-pages.py.
+  // Falls back to a real fetch if no inline block (older deploys etc).
+  function loadFooterData() {
+    const inline = document.getElementById('ota-footer-data');
+    if (inline && inline.textContent.trim()) {
+      try { return Promise.resolve(JSON.parse(inline.textContent)); }
+      catch (e) { /* fall through to fetch */ }
+    }
+    return fetch('/assets/data/footer.json', { credentials: 'same-origin' })
+      .then((r) => {
+        if (!r.ok) throw new Error('footer.json ' + r.status);
+        return r.json();
+      });
+  }
+
+  loadFooterData()
     .then((data) => {
       slot.outerHTML = render(data);
       document.querySelectorAll('[data-year]').forEach((el) => {

website/assets/js/header.js

@@ -182,11 +182,23 @@
     );
   }
 
-  fetch('/assets/data/header.json', { credentials: 'same-origin' })
-    .then((r) => {
-      if (!r.ok) throw new Error('header.json ' + r.status);
-      return r.json();
-    })
+  // Prefer header data inlined at build time by scripts/optimize-pages.py
+  // (no network round-trip). Fall back to fetch if the inline block was
+  // stripped (older deploys, dev preview, etc).
+  function loadHeaderData() {
+    const inline = document.getElementById('ota-header-data');
+    if (inline && inline.textContent.trim()) {
+      try { return Promise.resolve(JSON.parse(inline.textContent)); }
+      catch (e) { /* fall through to fetch */ }
+    }
+    return fetch('/assets/data/header.json', { credentials: 'same-origin' })
+      .then((r) => {
+        if (!r.ok) throw new Error('header.json ' + r.status);
+        return r.json();
+      });
+  }
+
+  loadHeaderData()
     .then((headerData) => {
       const navLinks = headerData.navLinks || [];
       const html =