Fix show-on-scroll header and social links

AGENTS.md

@@ -46,7 +46,7 @@ Every site MUST include a responsive header with the following behavior:
 - Navigation entries belonging to the site or page being built MUST follow `Home` and use the same visual treatment.
 - On the main church site, the canonical entries are `The Holy Scriptures`, `Sermons`, `Articles`, `Daily`, and `Services` with the `Join us` subtitle. Preserve the full extracted menu data in `src/data/main-site-navigation.json`.
 - Desktop navigation MUST use the white bar, thin cyan top rule, uppercase widely spaced labels, and active/hover contrast shown in the reference screenshot.
-- The desktop header SHOULD be sticky and reveal on upward scroll when the host framework supports it.
+- The header MUST remain visible at the top of the page, hide when the visitor scrolls downward, and reveal again when the visitor scrolls upward. Portable implementations MUST provide this behavior through `dist/truechristian-theme.js` or an equivalent implementation.
 - Below the desktop breakpoint, use a menu toggle and off-canvas or equivalent accessible navigation. Keep the logo centered and never squeeze the complete desktop menu into a narrow row.
 - Dropdown triggers MUST be keyboard operable and expose `aria-expanded`; the mobile menu MUST have an accessible close control.
 - Portable implementations MUST load `dist/truechristian-theme.js` (built from `src/js/site-header.js`) or provide equivalent menu, submenu, Escape-key, focus, and breakpoint behavior.
@@ -70,8 +70,9 @@ This terminology prevents the YOOtheme region name `tm-bottom` from being confus
 - Use four desktop columns in this exact order: `Church Info`, `Projects`, `Welcome`, `Social Outreach`.
 - Use the exact labels, URLs, order, and external-link behavior in `src/data/site-chrome.json`.
 - The data preserves the source's root-relative URLs. On a different domain, resolve every root-relative global-footer URL against `https://truechristian.church`; the portable HTML template already does this.
-- `Social Outreach` MUST contain X/Twitter, Facebook, GitHub, and Telegram icon links.
-- The source skyline file is `/images/city-skyline-skyscrapers-top.jpg`. It was not supplied separately; `assets/footer/city-skyline-reference.png` is an exact-size reference crop from the owner-supplied screenshot. Preserve its `270px × 180px` slot and do not substitute unrelated stock imagery.
+- `Social Outreach` MUST contain only GitHub and Telegram icon links, in that order.
+- The owner-supplied original skyline file is `assets/footer/city-skyline-skyscrapers-top.jpg`, matching the source-site path `/images/city-skyline-skyscrapers-top.jpg`. Preserve the original asset and its `270px × 180px` display slot; do not replace it with a screenshot crop or unrelated stock imagery.
+- Directory link rows MUST use a `5px` sibling gap. Apply the same spacing to portable `.tcc-footer-group` markup and compatible `.tm-bottom .uk-list` markup.
 - On medium layouts, the four columns MAY become a two-by-two grid. On narrow layouts, stack them and center headings, links, and social controls.
 - Keep the generous light-grey spacing, uppercase headings and links, circular social buttons, rounded image treatment, and subdued shadow shown in `docs/reference/footer-desktop.png`.
 

README.md

@@ -26,7 +26,7 @@ The exact contracts are in [AGENTS.md](AGENTS.md), [docs/header.md](docs/header.
 | `src/data/main-site-navigation.json` | Full static menu data extracted from the supplied main-site header |
 | `assets/brand/logo.jpg` | Source church logo, 288 × 77 |
 | `assets/favicons/favicon.ico` | Supplied browser favicon |
-| `assets/footer/city-skyline-reference.png` | 270 × 180 screenshot-derived footer image reference |
+| `assets/footer/city-skyline-skyscrapers-top.jpg` | Owner-supplied 1920 × 1280 footer skyline image |
 | `dist/` | Built, directly consumable CSS and header JavaScript |
 | `docs/` | Human-readable brand and implementation guide |
 | `docs/component-inventory.md` | Supplied page-source framework/CSS roles and evidence limits |

dist/truechristian-theme.css

@@ -126,6 +126,18 @@ p {
   position: sticky;
   z-index: 1000;
   top: 0;
+  transform: translateY(0);
+  transition: transform 220ms ease;
+  will-change: transform;
+}
+
+.tcc-site-header[data-scroll-hidden="true"] {
+  transform: translateY(calc(-100% - 1px));
+}
+
+.tcc-site-header[data-menu-open="true"],
+.tcc-site-header:focus-within {
+  transform: translateY(0);
 }
 
 .tcc-header__container {
@@ -435,8 +447,9 @@ p {
   list-style: none;
 }
 
-.tcc-footer-group li + li {
-  margin-top: 10px;
+.tcc-footer-group li + li,
+.tm-bottom .uk-list > li + li {
+  margin-top: 5px;
 }
 
 .tcc-footer-group li a,

dist/truechristian-theme.js

@@ -16,6 +16,10 @@
     const scrim = header.querySelector(".tcc-header__scrim");
     const submenuButtons = header.querySelectorAll(".has-submenu > button");
     let returnFocusTo = null;
+    let lastScrollY = Math.max(0, window.scrollY);
+    let directionStartY = lastScrollY;
+    let scrollDirection = 0;
+    let scrollFrame = null;
 
     if (!toggle || !navigation || !closeButton || !scrim) return;
 
@@ -30,6 +34,7 @@
     const setMenuOpen = (open, restoreFocus = true) => {
       const nextOpen = Boolean(open && mobileQuery.matches);
       header.dataset.menuOpen = String(nextOpen);
+      if (nextOpen) header.removeAttribute("data-scroll-hidden");
       toggle.setAttribute("aria-expanded", String(nextOpen));
       navigation.toggleAttribute("inert", mobileQuery.matches && !nextOpen);
       if (mobileQuery.matches) navigation.setAttribute("aria-hidden", String(!nextOpen));
@@ -100,6 +105,35 @@
       if (!header.contains(event.target)) collapseSubmenus();
     });
 
+    header.addEventListener("focusin", () => header.removeAttribute("data-scroll-hidden"));
+
+    const updateScrollState = () => {
+      scrollFrame = null;
+      const currentY = Math.max(0, window.scrollY);
+      const delta = currentY - lastScrollY;
+      const nextDirection = delta > 0 ? 1 : delta < 0 ? -1 : scrollDirection;
+
+      if (nextDirection !== scrollDirection) {
+        scrollDirection = nextDirection;
+        directionStartY = lastScrollY;
+      }
+
+      const distanceInDirection = Math.abs(currentY - directionStartY);
+      if (currentY <= 4 || header.dataset.menuOpen === "true") {
+        header.removeAttribute("data-scroll-hidden");
+      } else if (nextDirection === 1 && currentY > header.offsetHeight && distanceInDirection >= 12) {
+        header.dataset.scrollHidden = "true";
+      } else if (nextDirection === -1 && distanceInDirection >= 8) {
+        header.removeAttribute("data-scroll-hidden");
+      }
+
+      lastScrollY = currentY;
+    };
+
+    window.addEventListener("scroll", () => {
+      if (scrollFrame === null) scrollFrame = window.requestAnimationFrame(updateScrollState);
+    }, { passive: true });
+
     const syncBreakpoint = () => setMenuOpen(false, false);
     if (mobileQuery.addEventListener) mobileQuery.addEventListener("change", syncBreakpoint);
     else mobileQuery.addListener?.(syncBreakpoint);

docs/component-inventory.md

@@ -17,7 +17,7 @@ The compiled contents of `theme.13.css` were not included in the supplied HTML.
 | Area | Source roles/classes | Meaning for implementations |
 | --- | --- | --- |
 | Page shell | `tm-page`, `tm-main`, `uk-container`, `uk-container-expand` | Full-width bands with centered content containers |
-| Header | `tm-header`, `tm-header-mobile`, `uk-navbar*`, `uk-logo`, `uk-sticky` | Desktop sticky navbar plus mobile replacement |
+| Header | `tm-header`, `tm-header-mobile`, `uk-navbar*`, `uk-logo`, `uk-sticky` | Sticky navbar that hides on downward scroll and reveals on upward scroll, plus mobile replacement |
 | Navigation | `uk-nav*`, `uk-navbar-dropdown`, `uk-drop`, `uk-offcanvas`, `uk-nav-accordion` | Dropdown/mega-menu and accessible mobile drawer behavior |
 | Sections | `uk-section-default`, `uk-section-primary`, `uk-section-muted`, `uk-section-large`, `uk-section-xlarge` | Semantic surface and spacing variants |
 | Layout | `uk-grid*`, `uk-width-*`, `uk-flex*`, `uk-tile*` | Responsive grids, widths, alignment, and matched tiles |

docs/footer.md

@@ -19,8 +19,8 @@ Together they form the required bottom footer assembly. They must remain adjacen
 | Directory container | `1200px` maximum width |
 | Directory grid | Four equal `270px` tracks with `40px` gaps |
 | Group heading | Montserrat 400, `16px/1.4`, uppercase, `2px` tracking, `20px` bottom gap |
-| Group link | Montserrat 400, `11px/1.4`, uppercase, `2px` tracking, `10px` sibling gap, `#2d2e33` |
-| Social controls | Four `36px` white circles, `20px` gaps, `#6c6d74` glyphs, `#e5e5e7` edge |
+| Group link | Montserrat 400, `11px/1.4`, uppercase, `2px` tracking, `5px` sibling gap, `#2d2e33` |
+| Social controls | Two `36px` white circles, `20px` gaps, `#6c6d74` glyphs, `#e5e5e7` edge |
 | Skyline slot | Desktop only, `270 × 180px`, `20px` top gap, `5px` radius, subdued shadow |
 | Copyright surface | `#303033`, `70px` block padding |
 | Copyright line | Raleway 400, `16px/1.6`; prefix and pipes 70%-white, links white |
@@ -67,12 +67,12 @@ This is a church-wide link directory. The presence of a project link does not ma
 
 ### Social Outreach
 
-- X/Twitter
-- Facebook
 - GitHub
 - Telegram
 
-The source also shows `/images/city-skyline-skyscrapers-top.jpg` beneath the social links on desktop. Its CSS slot is `270px × 180px`, with a `5px` radius, `20px` top margin, and subdued shadow; it is hidden below `960px`. The original image file was not supplied. `assets/footer/city-skyline-reference.png` is a correctly sized crop from the supplied footer screenshot, retained as an explicit reference/fallback rather than invented stock imagery.
+The historical source evidence includes X/Twitter and Facebook. The repository owner's current instruction supersedes that older footer content, so GitHub and Telegram are the canonical Social Outreach links.
+
+The source also shows `/images/city-skyline-skyscrapers-top.jpg` beneath the social links on desktop. The owner-supplied `1920px × 1280px` original is included at `assets/footer/city-skyline-skyscrapers-top.jpg`. Its CSS slot remains `270px × 180px`, with a `5px` radius, `20px` top margin, and subdued shadow; it is hidden below `960px`.
 
 ## Copyright footer
 

docs/header.md

@@ -36,6 +36,8 @@ The screenshot is a 1.25× capture; its device-pixel geometry is larger than the
 
 The supplied screenshot is the home page, so `Home` is active there. The reusable fragment intentionally has no hardcoded current item; the consuming page must add `aria-current="page"` and `.is-active` to its actual route.
 
+The header is visible when the page is at the top. Once the visitor scrolls down past the header, it slides out of view; scrolling upward reveals it again. Keep it visible while the mobile menu is open or keyboard focus is inside the header. The portable script applies small direction thresholds so minor trackpad or touch movement does not make the bar flicker.
+
 ## Canonical main-site order
 
 1. Home
@@ -53,7 +55,7 @@ The canonical main-site mega-menu is not a generic requirement for every satelli
 
 The source uses `tm-header-mobile uk-hidden@m`, a left menu toggle, centered logo, and a slide-mode off-canvas menu. Nested entries become an accordion. Implementations on other frameworks must preserve this behavior even when class names differ.
 
-The portable template uses `src/js/site-header.js` for open/close state, submenu state, Escape, focus containment, inert off-screen navigation, and breakpoint synchronization. Load the built script with `defer`.
+The portable template uses `src/js/site-header.js` for scroll-direction visibility, open/close state, submenu state, Escape, focus containment, inert off-screen navigation, and breakpoint synchronization. Load the built script with `defer`.
 
 ## Reusable markup
 

docs/source-inventory.md

@@ -10,12 +10,13 @@ This document distinguishes extracted facts from repository implementation decis
 | Supplied header HTML | Complete desktop navbar and mega-menu markup |
 | `assets/brand/logo.jpg` | Source logo, `288 × 77`, with source alt text `A True Christian Church` |
 | `assets/favicons/favicon.ico` | Supplied 16 × 16 browser icon |
+| `assets/footer/city-skyline-skyscrapers-top.jpg` | Owner-supplied original skyline image, `1920 × 1280`, used in the desktop directory footer |
 | `docs/reference/header-desktop.png` | Desktop header silhouette, spacing, colors, navigation presentation, and services subtitle |
 | `docs/reference/footer-desktop.png` | Directory footer and copyright footer composition |
 
 The supplied desktop header excerpt is retained in `docs/source/header-desktop-source.html` with trailing whitespace normalized for version control. Its stable static menu content is normalized in `src/data/main-site-navigation.json`. The global footer is retained as a whitespace-normalized semantic extract in `docs/source/footer-source-extract.html` and as canonical data in `src/data/site-chrome.json`.
 
-Protected source assets are checked byte-for-byte by `npm run check`; this prevents an automated edit from silently replacing the logo, favicon, or visual references.
+Protected source assets are checked byte-for-byte by `npm run check`; this prevents an automated edit from silently replacing the logo, favicon, skyline, or visual references.
 
 ## Exact references found in the page source
 

examples/style-guide.html

@@ -46,7 +46,7 @@ <h1>A True Christian Church</h1>
       <section class="tcc-footer-group"><h2>Church Info</h2><ul><li><a href="https://truechristian.church/history">History</a></li><li><a href="https://truechristian.church/brotherhood">Brotherhood</a></li><li><a href="https://truechristian.church/blog/">Blog</a></li><li><a href="https://truechristian.church/testimonies/">Testimonies</a></li><li><a href="https://truechristian.church/confession-of-faith">Confession of Faith</a></li><li><a href="https://truechristian.church/storehouse">Storehouse</a></li><li><a href="https://truechristian.church/privacy-policy">Privacy Policy</a></li><li><a href="https://truechristian.church/copyright">Copyright</a></li></ul></section>
       <section class="tcc-footer-group"><h2>Projects</h2><ul><li><a href="https://getBible.life/" target="_blank" rel="noopener">GETBIBLE</a></li><li><a href="https://www.loudvoice.org/" target="_blank" rel="noopener">Loudvoice</a></li><li><a href="https://shecares.life/">SHE Cares</a></li><li><a href="https://truechristian.church/trousseauchest">Trousseau Chest</a></li><li><a href="https://truechristian.church/whybible/">Why Bible</a></li><li><a href="https://truechristian.church/wefeargod/">we fear God</a></li><li><a href="https://truechristian.church/amana">Amana</a></li><li><a href="https://truechristian.church/mission">Mission (Namibia)</a></li></ul></section>
       <section class="tcc-footer-group"><h2>Welcome</h2><ul><li><a href="https://truechristian.church/comeandfollowjesus">Follow Jesus</a></li><li><a href="https://truechristian.church/services">Live Services</a></li><li><a href="https://truechristian.church/fellowships">Locations</a></li><li><a href="https://truechristian.church/events">Events</a></li><li><a href="https://truechristian.church/revival">Revival</a></li><li><a href="https://truechristian.church/telegram">Telegram</a></li><li><a href="https://truechristian.church/contact-us">Contact Us</a></li></ul></section>
-      <section class="tcc-footer-group tcc-footer-social"><h2>Social Outreach</h2><div class="tcc-footer-social__links"><a href="https://twitter.com/llewellynvdm" target="_blank" rel="noopener" aria-label="X / Twitter"><svg class="tcc-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231 5.451-6.231Zm-1.161 17.52h1.833L7.084 4.126H5.117L17.083 19.77Z"/></svg></a><a href="https://www.facebook.com/aTrueChristianChurch" target="_blank" rel="noopener" aria-label="Facebook"><svg class="tcc-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M13.5 22v-8h3l.5-3.5h-3.5V8.25c0-1 .28-1.75 1.8-1.75H17V3.4c-.29-.04-1.29-.13-2.45-.13-2.43 0-4.05 1.48-4.05 4.2v3.03H8V14h2.5v8h3Z"/></svg></a><a href="https://github.com/trueChristian" target="_blank" rel="noopener" aria-label="GitHub"><svg class="tcc-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 .7a11.3 11.3 0 0 0-3.57 22.02c.57.1.77-.25.77-.55v-2.16c-3.15.69-3.81-1.34-3.81-1.34-.51-1.31-1.26-1.66-1.26-1.66-1.03-.7.08-.69.08-.69 1.14.08 1.74 1.17 1.74 1.17 1.01 1.73 2.65 1.23 3.3.94.1-.73.39-1.23.72-1.51-2.51-.29-5.15-1.26-5.15-5.59 0-1.23.44-2.24 1.17-3.03-.12-.29-.51-1.44.11-2.99 0 0 .95-.3 3.11 1.16A10.8 10.8 0 0 1 12 6.09c.96 0 1.91.13 2.82.38 2.16-1.46 3.11-1.16 3.11-1.16.62 1.55.23 2.7.11 2.99.73.79 1.17 1.8 1.17 3.03 0 4.34-2.65 5.3-5.17 5.58.41.35.77 1.04.77 2.1v3.16c0 .3.21.66.78.55A11.3 11.3 0 0 0 12 .7Z"/></svg></a><a href="https://truechristian.church/telegram" target="_blank" rel="noopener" aria-label="Telegram"><svg class="tcc-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M23.91 3.79 20.3 20.82c-.27 1.2-.97 1.49-1.97.93l-5.5-4.05-2.65 2.55c-.29.29-.54.54-1.1.54l.39-5.6L19.67 5.98c.44-.39-.1-.6-.68-.21L6.39 13.7.96 12c-1.18-.37-1.2-1.18.25-1.75L22.43 2.1c.98-.36 1.84.24 1.48 1.69Z"/></svg></a></div><img src="../assets/footer/city-skyline-reference.png" width="270" height="180" alt=""></section>
+      <section class="tcc-footer-group tcc-footer-social"><h2>Social Outreach</h2><div class="tcc-footer-social__links"><a href="https://github.com/trueChristian" target="_blank" rel="noopener" aria-label="GitHub"><svg class="tcc-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 .7a11.3 11.3 0 0 0-3.57 22.02c.57.1.77-.25.77-.55v-2.16c-3.15.69-3.81-1.34-3.81-1.34-.51-1.31-1.26-1.66-1.26-1.66-1.03-.7.08-.69.08-.69 1.14.08 1.74 1.17 1.74 1.17 1.01 1.73 2.65 1.23 3.3.94.1-.73.39-1.23.72-1.51-2.51-.29-5.15-1.26-5.15-5.59 0-1.23.44-2.24 1.17-3.03-.12-.29-.51-1.44.11-2.99 0 0 .95-.3 3.11 1.16A10.8 10.8 0 0 1 12 6.09c.96 0 1.91.13 2.82.38 2.16-1.46 3.11-1.16 3.11-1.16.62 1.55.23 2.7.11 2.99.73.79 1.17 1.8 1.17 3.03 0 4.34-2.65 5.3-5.17 5.58.41.35.77 1.04.77 2.1v3.16c0 .3.21.66.78.55A11.3 11.3 0 0 0 12 .7Z"/></svg></a><a href="https://truechristian.church/telegram" target="_blank" rel="noopener" aria-label="Telegram"><svg class="tcc-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M23.91 3.79 20.3 20.82c-.27 1.2-.97 1.49-1.97.93l-5.5-4.05-2.65 2.55c-.29.29-.54.54-1.1.54l.39-5.6L19.67 5.98c.44-.39-.1-.6-.68-.21L6.39 13.7.96 12c-1.18-.37-1.2-1.18.25-1.75L22.43 2.1c.98-.36 1.84.24 1.48 1.69Z"/></svg></a></div><img src="../assets/footer/city-skyline-skyscrapers-top.jpg" width="270" height="180" alt=""></section>
     </div>
   </div>
   <footer class="tcc-footer-copyright" data-tcc-copyright-footer><div class="tcc-container" id="license"><span>Copyright © trueChristian.Church</span> <a href="https://truechristian.church/copyright">free distribution only</a> | <a href="https://truechristian.church/privacy-policy">Privacy Policy</a> | <a href="https://truechristian.church/mission/">Mission</a> | <a href="https://truechristian.church/revival/">Revival</a> | <a href="https://truechristian.church/wefeargod/">We Fear God</a> | <a href="https://truechristian.church/whybible/">Why we believe the Bible</a> | <a href="https://truechristian.church/trousseauchest/">Trousseau Chest</a></div></footer>