// AR Ventures — site // ───────────────────────────────────────────────────────────────────────────── // Editorial, restrained presentation for a long-standing real-estate equity // fund. All theme values are driven by CSS custom properties on so the // Tweaks panel can swap palettes/accent live. const { useEffect, useMemo, useState } = React; // ── Palettes ──────────────────────────────────────────────────────────────── // Each palette is [bg, paper, ink]. Accent is independent so the same accent // can ride across the three base palettes. const PALETTES = { cream: { bg: "#F4F0E8", paper: "#FBF8F1", ink: "#1A1815" }, ivory: { bg: "#EFEBE0", paper: "#F7F2E5", ink: "#1D1C18" }, fog: { bg: "#ECECE8", paper: "#F5F5F1", ink: "#151719" }, ink: { bg: "#15140F", paper: "#1F1D17", ink: "#F0EBDC" }, }; const ACCENTS = { oxblood: "oklch(0.42 0.085 25)", navy: "oklch(0.40 0.075 255)", forest: "oklch(0.42 0.07 155)", rust: "oklch(0.55 0.10 50)", }; const PALETTE_OPTIONS = [ ["#F7F6F2", "#15171C", "#FCFBF7"], // bone (default) ["#F4F0E8", "#1A1815", "#FBF8F1"], // cream ["#ECECE8", "#151719", "#F5F5F1"], // fog ["#15140F", "#F0EBDC", "#1F1D17"], // ink ]; const PALETTE_NAMES = ["bone", "cream", "fog", "ink"]; const ACCENT_OPTIONS = ["#243A6B", "#7A2B22", "#2C4A35", "#A26431"]; const ACCENT_NAMES = ["navy", "oxblood", "forest", "rust"]; // ── Content ───────────────────────────────────────────────────────────────── // Single source — easier to tweak than chasing markup. Keep this honest: no // invented numbers. The user supplied 1970 + seven states; everything else is // either qualitative or marked as a representative placeholder. const TENETS = [ { n: "01", title: "Patience over pace.", body: "We hold assets through cycles. Our average ownership period is measured in decades, not quarters — a discipline that lets us pass on deals our peers chase.", }, { n: "02", title: "Conservative leverage.", body: "Capital structures are built to survive the bottom of any cycle. We underwrite to durable cash flow first; appreciation is a consequence, not a thesis.", }, { n: "03", title: "Aligned partners, on the ground.", body: "Every investment is co-underwritten with a local operator who shares meaningful equity. We invest our own capital alongside every commitment we make.", }, ]; const FOOTPRINT = [ { idx: "I", name: "Salt Lake City, Utah", meta: "Headquarters · 1970", hq: true }, { idx: "II", name: "California", meta: "Multifamily · Office" }, { idx: "III", name: "Texas", meta: "Industrial · Multifamily" }, { idx: "IV", name: "Idaho", meta: "Mixed-Use · Land" }, { idx: "V", name: "Missouri", meta: "Multifamily · Retail" }, { idx: "VI", name: "Arkansas", meta: "Retail · Industrial" }, { idx: "VII", name: "New York", meta: "Office · Mixed-Use" }, ]; // Representative holdings reference removed — Holdings section deleted. // ── App ───────────────────────────────────────────────────────────────────── const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "palette": ["#F7F6F2", "#15171C", "#FCFBF7"], "accent": "#243A6B", "headline": "italic", "showMonogram": true }/*EDITMODE-END*/; function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); // Apply theme as CSS variables on so styles.css stays declarative. useEffect(() => { const root = document.documentElement; const [bg, ink, paper] = t.palette; root.style.setProperty("--bg", bg); root.style.setProperty("--ink", ink); root.style.setProperty("--paper", paper); root.style.setProperty("--accent", t.accent); // Derived ink alphas — recompute so they read on whichever ink the // current palette uses (light ink on dark bg needs different alphas). const isDarkBg = bg.toLowerCase() < "#888888"; // crude but fine for our 4 swatches const inkRgb = hexToRgb(ink); const setAlpha = (name, a) => root.style.setProperty(name, `rgba(${inkRgb}, ${a})`); setAlpha("--ink-2", isDarkBg ? 0.72 : 0.66); setAlpha("--ink-3", isDarkBg ? 0.45 : 0.4); setAlpha("--rule", isDarkBg ? 0.2 : 0.14); setAlpha("--rule-soft", isDarkBg ? 0.12 : 0.08); }, [t.palette, t.accent]); return ( <>