/* FERRO-GATES — HERO FORM FITTER v14
JS ONLY.
WPCode:
- Code Type: JavaScript Snippet
- Auto Insert: Site Wide Footer
- Location: Frontend only
IMPORTANT:
Disable/delete all previous hero/form adaptive snippets and CSS patches first.
*/(function () {
'use strict';var state = {
initialized: false,
lastViewportKey: '',
resizeTimer: 0
};function qs(selector, root) {
return (root || document).querySelector(selector);
}function qsa(selector, root) {
return Array.prototype.slice.call((root || document).querySelectorAll(selector));
}function important(el, prop, value) {
if (!el) return;
el.style.setProperty(prop, value, 'important');
}function importantMany(elements, styles) {
elements.forEach(function (el) {
Object.keys(styles).forEach(function (prop) {
important(el, prop, styles[prop]);
});
});
}function getHero() {
return qs('body.home .hero.fg-home-hero') || qs('body.home .fg-home-hero') || qs('body.home .hero');
}function getFormParts(hero) {
if (!hero) return null;var wrap = qs('.hero__form', hero);
if (!wrap) return null;var card = qs('.feedback-form', wrap) || (wrap.classList.contains('feedback-form') ? wrap : wrap);
var form = qs('.wpcf7-form', card) || qs('form', card);return {
wrap: wrap,
card: card,
form: form,
title: qs('.feedback-title', card),
subtitle: qs('.feedback-subtitle', card),
trust: qs('.fg-form-trust', card),
groups: qsa('.form-group', card),
submitWrap: qs('.form-submit', card),
turnstile: qs('.wpcf7-turnstile', card),
inputs: qsa('input:not([type="submit"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select', card),
textareas: qsa('textarea', card),
submits: qsa('input[type="submit"], .wpcf7-submit', card),
hidden: qsa('.hidden-fields-container, .screen-reader-response', card),
spinner: qs('.wpcf7-spinner', card),
response: qs('.wpcf7-response-output', card)
};
}function viewportKey() {
var w = window.innerWidth || document.documentElement.clientWidth || 0;
var h = window.innerHeight || document.documentElement.clientHeight || 0;
return Math.round(w / 20) + 'x' + Math.round(h / 20);
}function getAvailableHeight(hero, wrap) {
var vh = window.innerHeight || document.documentElement.clientHeight || 0;
var heroRect = hero.getBoundingClientRect();
var wrapRect = wrap.getBoundingClientRect();/*
Available visual space inside the dark hero, from form top to hero bottom.
If old CSS made hero shorter than the screen, this still uses the real hero bottom.
*/
var available = heroRect.bottom - wrapRect.top - 18;/*
Safety fallback: if current CSS gives a broken/too-small hero,
still allow a realistic target so the form does not become microscopic.
*/
var fallback = vh - wrapRect.top - 32;return Math.max(360, Math.min(Math.max(available, fallback), 760));
}function baseReset(parts) {
var wrap = parts.wrap;
var card = parts.card;important(wrap, 'box-sizing', 'border-box');
important(wrap, 'align-self', 'start');
important(wrap, 'justify-self', 'end');
important(wrap, 'display', 'block');
important(wrap, 'width', '390px');
important(wrap, 'max-width', '390px');
important(wrap, 'min-width', '0');
important(wrap, 'height', 'auto');
important(wrap, 'min-height', '0');
important(wrap, 'max-height', 'none');
important(wrap, 'margin', '0');
important(wrap, 'padding', '0');
important(wrap, 'overflow', 'visible');
important(wrap, 'background', 'transparent');
important(wrap, 'border', '0');
important(wrap, 'box-shadow', 'none');
important(wrap, 'transform', 'none');important(card, 'box-sizing', 'border-box');
important(card, 'display', 'block');
important(card, 'width', '390px');
important(card, 'max-width', '390px');
important(card, 'height', 'auto');
important(card, 'min-height', '0');
important(card, 'max-height', 'none');
important(card, 'margin', '0');
important(card, 'padding', '22px 24px 24px');
important(card, 'overflow', 'hidden');
important(card, 'background', 'rgba(241, 244, 248, 0.98)');
important(card, 'border', '1px solid rgba(206, 214, 224, 0.95)');
important(card, 'border-radius', '24px');
important(card, 'box-shadow', '0 20px 50px rgba(0, 0, 0, 0.22)');
important(card, 'transform', 'none');
important(card, 'transform-origin', 'top right');if (parts.form) {
important(parts.form, 'box-sizing', 'border-box');
important(parts.form, 'display', 'block');
important(parts.form, 'width', '100%');
important(parts.form, 'max-width', '100%');
important(parts.form, 'height', 'auto');
important(parts.form, 'min-height', '0');
important(parts.form, 'max-height', 'none');
important(parts.form, 'margin', '0');
important(parts.form, 'padding', '0');
important(parts.form, 'overflow', 'visible');
}qsa('*', card).forEach(function (el) {
important(el, 'box-sizing', 'border-box');
});importantMany(parts.hidden, {
display: 'none'
});importantMany(parts.groups, {
display: 'block',
width: '100%',
maxWidth: '100%',
margin: '0 0 11px',
padding: '0'
});if (parts.submitWrap) {
important(parts.submitWrap, 'display', 'block');
important(parts.submitWrap, 'width', '100%');
important(parts.submitWrap, 'max-width', '100%');
important(parts.submitWrap, 'margin', '0');
important(parts.submitWrap, 'padding', '0');
}if (parts.turnstile) {
important(parts.turnstile, 'display', 'block');
important(parts.turnstile, 'width', '100%');
important(parts.turnstile, 'margin', '0 0 11px');
important(parts.turnstile, 'padding', '0');
}if (parts.title) {
important(parts.title, 'display', 'block');
important(parts.title, 'margin', '0 0 8px');
important(parts.title, 'font-size', '23px');
important(parts.title, 'line-height', '1.12');
important(parts.title, 'font-weight', '900');
important(parts.title, 'letter-spacing', '-0.025em');
important(parts.title, 'text-align', 'left');
important(parts.title, 'color', '#071225');
}if (parts.subtitle) {
important(parts.subtitle, 'display', 'block');
important(parts.subtitle, 'margin', '0 0 13px');
important(parts.subtitle, 'font-size', '13.5px');
important(parts.subtitle, 'line-height', '1.35');
important(parts.subtitle, 'font-weight', '650');
important(parts.subtitle, 'text-align', 'left');
important(parts.subtitle, 'color', '#52627a');
}if (parts.trust) {
important(parts.trust, 'display', 'block');
important(parts.trust, 'width', '100%');
important(parts.trust, 'margin', '0 0 12px');
important(parts.trust, 'padding', '11px 13px');
important(parts.trust, 'font-size', '12.5px');
important(parts.trust, 'line-height', '1.32');
important(parts.trust, 'font-weight', '850');
important(parts.trust, 'text-align', 'left');
important(parts.trust, 'color', '#17401f');
important(parts.trust, 'background', '#eef9ea');
important(parts.trust, 'border', '1px solid #cfe8c8');
important(parts.trust, 'border-radius', '12px');
}importantMany(parts.inputs, {
display: 'block',
width: '100%',
maxWidth: '100%',
minHeight: '48px',
height: '48px',
margin: '0',
padding: '10px 14px',
color: '#111827',
background: '#fff',
border: '1px solid #d1d5db',
borderRadius: '11px',
boxShadow: 'none',
outline: 'none',
opacity: '1',
fontSize: '15px',
lineHeight: '1.25'
});importantMany(parts.textareas, {
display: 'block',
width: '100%',
maxWidth: '100%',
minHeight: '92px',
height: '92px',
maxHeight: '92px',
margin: '0',
padding: '11px 14px',
color: '#111827',
background: '#fff',
border: '1px solid #d1d5db',
borderRadius: '11px',
boxShadow: 'none',
outline: 'none',
opacity: '1',
fontSize: '15px',
lineHeight: '1.35',
resize: 'none'
});importantMany(parts.submits, {
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
width: '100%',
minHeight: '50px',
height: '50px',
margin: '0',
padding: '0 20px',
color: '#fff',
background: '#d62d2d',
border: '1px solid #d62d2d',
borderRadius: '999px',
boxShadow: 'none',
fontSize: '12px',
lineHeight: '1',
fontWeight: '900',
letterSpacing: '0.025em',
textTransform: 'uppercase',
textAlign: 'center',
cursor: 'pointer'
});if (parts.spinner) {
important(parts.spinner, 'display', 'block');
important(parts.spinner, 'margin', '7px auto 0');
}if (parts.response) {
important(parts.response, 'display', 'block');
important(parts.response, 'width', '100%');
important(parts.response, 'max-width', '100%');
important(parts.response, 'margin', '8px 0 0');
important(parts.response, 'padding', '9px 10px');
important(parts.response, 'border-radius', '10px');
important(parts.response, 'font-size', '12.5px');
important(parts.response, 'line-height', '1.35');
}
}function applyProfile(parts, profile) {
var card = parts.card;if (profile === 'normal') {
return;
}if (profile === 'compact') {
important(card, 'width', '370px');
important(card, 'max-width', '370px');
important(parts.wrap, 'width', '370px');
important(parts.wrap, 'max-width', '370px');
important(card, 'padding', '17px 19px 19px');
important(card, 'border-radius', '21px');if (parts.title) {
important(parts.title, 'margin', '0 0 6px');
important(parts.title, 'font-size', '20px');
important(parts.title, 'line-height', '1.1');
}if (parts.subtitle) {
important(parts.subtitle, 'margin', '0 0 9px');
important(parts.subtitle, 'font-size', '12px');
important(parts.subtitle, 'line-height', '1.3');
}if (parts.trust) {
important(parts.trust, 'margin', '0 0 9px');
important(parts.trust, 'padding', '8px 10px');
important(parts.trust, 'font-size', '11.5px');
important(parts.trust, 'line-height', '1.24');
important(parts.trust, 'border-radius', '10px');
}importantMany(parts.groups, { margin: '0 0 8px' });
if (parts.turnstile) important(parts.turnstile, 'margin', '0 0 8px');importantMany(parts.inputs, {
minHeight: '41px',
height: '41px',
padding: '8px 11px',
fontSize: '14px',
borderRadius: '10px'
});importantMany(parts.textareas, {
minHeight: '66px',
height: '66px',
maxHeight: '66px',
padding: '8px 11px',
fontSize: '14px',
borderRadius: '10px'
});importantMany(parts.submits, {
minHeight: '41px',
height: '41px',
fontSize: '11.2px'
});return;
}if (profile === 'tight') {
applyProfile(parts, 'compact');important(card, 'width', '360px');
important(card, 'max-width', '360px');
important(parts.wrap, 'width', '360px');
important(parts.wrap, 'max-width', '360px');
important(card, 'padding', '14px 16px 16px');if (parts.title) {
important(parts.title, 'font-size', '18px');
important(parts.title, 'margin', '0 0 5px');
}if (parts.subtitle) {
important(parts.subtitle, 'display', 'none');
}if (parts.trust) {
important(parts.trust, 'margin', '0 0 7px');
important(parts.trust, 'padding', '7px 9px');
important(parts.trust, 'font-size', '11px');
important(parts.trust, 'line-height', '1.2');
}importantMany(parts.groups, { margin: '0 0 7px' });
if (parts.turnstile) important(parts.turnstile, 'margin', '0 0 7px');importantMany(parts.inputs, {
minHeight: '38px',
height: '38px',
padding: '7px 10px',
fontSize: '13.5px'
});importantMany(parts.textareas, {
minHeight: '52px',
height: '52px',
maxHeight: '52px',
padding: '8px 10px',
fontSize: '13.5px'
});importantMany(parts.submits, {
minHeight: '38px',
height: '38px'
});return;
}
}function fitHeroForm(force) {
var hero = getHero();if (!hero) return;var vw = window.innerWidth || document.documentElement.clientWidth || 0;if (vw <= 1024) {
// On tablet/mobile, do not force desktop fitting.
return;
}var key = viewportKey();if (!force && state.initialized && key === state.lastViewportKey) {
return;
}var parts = getFormParts(hero);
if (!parts) return;state.initialized = true;
state.lastViewportKey = key;baseReset(parts);var available = getAvailableHeight(hero, parts.wrap);var profile = 'normal';if (available < 570) {
profile = 'tight';
} else if (available < 650) {
profile = 'compact';
}applyProfile(parts, profile);/*
Last-resort scale:
We only use it if compact/tight still does not fit.
The wrapper gets matching visual height, so the top area does not get broken.
*/
var cardHeight = parts.card.getBoundingClientRect().height;if (cardHeight > available) {
var scale = Math.max(0.84, Math.min(1, available / cardHeight));important(parts.card, 'transform-origin', 'top right');
important(parts.card, 'transform', 'scale(' + scale.toFixed(3) + ')');
important(parts.wrap, 'height', Math.ceil(cardHeight * scale) + 'px');
} else {
important(parts.card, 'transform', 'none');
important(parts.wrap, 'height', 'auto');
}parts.wrap.setAttribute('data-fg-form-fit', profile);
}function schedule(force, delay) {
window.clearTimeout(state.resizeTimer);
state.resizeTimer = window.setTimeout(function () {
fitHeroForm(!!force);
}, typeof delay === 'number' ? delay : 60);
}function init() {
fitHeroForm(true);
}if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}window.addEventListener('load', function () {
schedule(false, 80);
}, { passive: true });window.addEventListener('resize', function () {
schedule(true, 180);
}, { passive: true });window.addEventListener('orientationchange', function () {
schedule(true, 350);
}, { passive: true });
})(); 
