83 lines
2.6 KiB
JavaScript
83 lines
2.6 KiB
JavaScript
// SIENA — shared site behavior
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
initHeaderScroll();
|
|
initMobileNav();
|
|
initHeroReveal();
|
|
initForms();
|
|
});
|
|
|
|
/* Give the sticky header a hairline + shadow once the page scrolls. */
|
|
function initHeaderScroll() {
|
|
const header = document.querySelector('.site-header');
|
|
if (!header) return;
|
|
const setState = () => {
|
|
header.classList.toggle('is-scrolled', window.scrollY > 8);
|
|
};
|
|
setState();
|
|
window.addEventListener('scroll', setState, { passive: true });
|
|
}
|
|
|
|
/* Mobile nav toggle button. */
|
|
function initMobileNav() {
|
|
const toggle = document.querySelector('.nav-toggle');
|
|
const nav = document.querySelector('.main-nav');
|
|
if (!toggle || !nav) return;
|
|
|
|
toggle.addEventListener('click', () => {
|
|
const isOpen = nav.classList.toggle('is-open');
|
|
toggle.setAttribute('aria-expanded', String(isOpen));
|
|
document.body.style.overflow = isOpen ? 'hidden' : '';
|
|
});
|
|
|
|
nav.querySelectorAll('a').forEach((link) => {
|
|
link.addEventListener('click', () => {
|
|
nav.classList.remove('is-open');
|
|
toggle.setAttribute('aria-expanded', 'false');
|
|
document.body.style.overflow = '';
|
|
});
|
|
});
|
|
}
|
|
|
|
/* One orchestrated reveal for the hero on first paint, not per-scroll. */
|
|
function initHeroReveal() {
|
|
const hero = document.querySelector('.hero[data-reveal]');
|
|
if (!hero) return;
|
|
requestAnimationFrame(() => {
|
|
requestAnimationFrame(() => hero.classList.add('is-revealed'));
|
|
});
|
|
}
|
|
|
|
/* Support + lease inquiry forms: client-side confirmation only.
|
|
No backend is wired up — this simulates a submission and shows
|
|
the confirmation state so the page is demonstrable end to end. */
|
|
function initForms() {
|
|
document.querySelectorAll('form[data-inquiry-form]').forEach((form) => {
|
|
const status = form.querySelector('.form-status');
|
|
form.addEventListener('submit', (event) => {
|
|
event.preventDefault();
|
|
if (!form.checkValidity()) {
|
|
form.reportValidity();
|
|
return;
|
|
}
|
|
const submitBtn = form.querySelector('button[type="submit"]');
|
|
const originalLabel = submitBtn.textContent;
|
|
submitBtn.disabled = true;
|
|
submitBtn.textContent = 'Sending…';
|
|
|
|
window.setTimeout(() => {
|
|
form.reset();
|
|
submitBtn.disabled = false;
|
|
submitBtn.textContent = originalLabel;
|
|
if (status) {
|
|
status.textContent = form.dataset.successMessage ||
|
|
"Thank you — we've received your message and will be in touch shortly.";
|
|
status.classList.add('is-visible');
|
|
status.setAttribute('tabindex', '-1');
|
|
status.focus();
|
|
}
|
|
}, 650);
|
|
});
|
|
});
|
|
}
|