/* =====================================================================
Tweaks app — drives the 3 comparable design directions + refinements.
Renders only the Tweaks panel; it writes CSS variables / data-attributes
onto , so the otherwise-vanilla landing page reacts live.
===================================================================== */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"direction": "marfil",
"headFont": "auto",
"accent": ["#B5934E", "#927539", "#D8C28A"],
"heroShade": 8,
"ctaText": "Take the Quiz"
}/*EDITMODE-END*/;
const FONTS = {
cormorant: '"Cormorant Garamond", Georgia, serif',
fraunces: '"Fraunces", Georgia, serif',
playfair: '"Playfair Display", Georgia, serif',
ebgaramond:'"EB Garamond", Georgia, serif'
};
function applyTweaks(t) {
const el = document.documentElement;
el.dataset.direction = t.direction || 'marfil';
if (t.headFont && t.headFont !== 'auto') el.style.setProperty('--font-head', FONTS[t.headFont]);
else el.style.removeProperty('--font-head');
if (Array.isArray(t.accent)) {
el.style.setProperty('--gold', t.accent[0]);
el.style.setProperty('--gold-d', t.accent[1]);
el.style.setProperty('--gold-l', t.accent[2]);
}
el.style.setProperty('--hero-shade', ((t.heroShade || 0) / 100).toFixed(3));
const label = (t.ctaText || '').trim();
document.querySelectorAll('.js-cta-label').forEach(n => { if (label) n.textContent = label; });
}
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
React.useEffect(() => { applyTweaks(t); }, [t]);
return (
setTweak('direction', v)}
/>
setTweak('headFont', v)}
/>
setTweak('accent', v)}
/>
setTweak('heroShade', v)}
/>
setTweak('ctaText', v)}
/>
);
}
// Apply persisted/default tweaks immediately (before React mounts) so there's no flash.
applyTweaks(TWEAK_DEFAULTS);
ReactDOM.createRoot(document.getElementById('tweaks-root')).render();