// main.jsx — assembles the page, audit modal, scroll progress, tweaks
const {useState,useEffect,useRef} = React;
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"displayFont": "Bricolage Grotesque",
"driftColor": "#c4502e",
"agreedColor": "#2f8f63",
"motion": 100,
"density": "regular",
"texture": true
}/*EDITMODE-END*/;
/* fonts that can be swapped in as the display face */
const FONT_STACKS = {
"Bricolage Grotesque": '"Bricolage Grotesque",Georgia,serif',
"Instrument Serif": '"Instrument Serif",Georgia,serif',
"Space Grotesk": '"Space Grotesk",system-ui,sans-serif',
};
function injectFonts(){
if(document.getElementById("tweak-fonts")) return;
const l=document.createElement("link");
l.id="tweak-fonts"; l.rel="stylesheet";
l.href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Space+Grotesk:wght@400;500;600;700&display=swap";
document.head.appendChild(l);
}
/* ---------------------------------------------------------------- AUDIT MODAL */
function AuditModal({open,onClose}){
const [sent,setSent]=useState(false);
const {t}=useLang();
useEffect(()=>{ if(open){setSent(false);document.body.style.overflow="hidden";}
else document.body.style.overflow=""; },[open]);
if(!open) return null;
return (
e.stopPropagation()} className="card" style={{maxWidth:520,width:"100%",
padding:"clamp(26px,4vw,40px)",boxShadow:"0 60px 120px -50px rgba(0,0,0,.6)"}}>
{!sent ? <>
{t("modal.kicker")}
{t("modal.title")}
{t("modal.intro")}
:
{t("modal.doneHeading")}
{t("modal.doneBody")}
}
);
}
function Field({label,...rest}){
const inputId = React.useId();
return ;
}
/* ---------------------------------------------------------------- SCROLL PROGRESS */
function ScrollProgress(){
const ref=useRef(null);
useEffect(()=>{
const on=()=>{
const h=document.documentElement;
const p=h.scrollTop/(h.scrollHeight-h.clientHeight||1);
if(ref.current) ref.current.style.transform=`scaleX(${p})`;
};
on(); window.addEventListener("scroll",on,{passive:true});
return()=>window.removeEventListener("scroll",on);
},[]);
return ;
}
/* ---------------------------------------------------------------- LANG SWITCH */
function LangSwitch(){
const {lang,setLang}=useLang();
return (
{LOCALES.map(({code,flag,label})=>{
const active=lang===code;
return (
);
})}
);
}
/* ---------------------------------------------------------------- APP */
function App(){
const [t,setTweak]=useTweaks(TWEAK_DEFAULTS);
const [auditOpen,setAuditOpen]=useState(false);
const openAudit=e=>{ if(e&&e.preventDefault)e.preventDefault(); setAuditOpen(true); };
const [lang,setLangState]=useState(()=>localStorage.getItem("lang")||"en");
const setLang=(l)=>{ setLangState(l); localStorage.setItem("lang",l); };
const langT=(key)=>window.t(lang,key);
const langCtx={lang,setLang,t:langT};
useEffect(()=>{injectFonts();},[]);
useEffect(()=>{
const r=document.documentElement.style;
r.setProperty("--display",FONT_STACKS[t.displayFont]||FONT_STACKS["Bricolage Grotesque"]);
r.setProperty("--drift",t.driftColor);
r.setProperty("--drift-soft",t.driftColor+"1f");
r.setProperty("--agreed",t.agreedColor);
r.setProperty("--agreed-soft",t.agreedColor+"1f");
r.setProperty("--motion",(t.motion/100).toFixed(2));
r.setProperty("--density",t.density==="compact"?"0.8":t.density==="comfy"?"1.18":"1");
document.querySelectorAll(".texgrid").forEach(el=>el.style.opacity=t.texture?"":"0");
},[t]);
return (
Skip to main content
);
}
/* responsive rules injected as a real