/* lawandeconomics.ch — v3
============================================================
Sections:
1. Tokens & thème
2. Helpers visuels (PlusPattern, EngravingArt, icônes)
3. ContentContext (charge /content.json)
4. Header + ThemeToggler
5. Hero (carte vedette en rotation)
6. Categories
7. Publications + PubCard avec hover en éventail
8. Manifeste
9. Footer
10. Modales: CarouselViewer, FinderExplorer
11. App
============================================================ */
const { useState, useEffect, useRef, useMemo, useCallback,
createContext, useContext } = React;
/* ============================================================
1. TOKENS — design system
============================================================ */
const PALETTE = {
fiscalite: "#e85d5d", // 20 CHF
international:"#d4a23a", // 10 CHF
economie: "#6a8fd9", // 100 CHF
politiques: "#6fa97c", // 50 CHF
droit: "#a07a55", // 200 CHF
arbitrage: "#8b6fb8", // 1000 CHF
};
const CATEGORIES = [
{ key: "fiscalite", label: "Fiscalité", color: PALETTE.fiscalite, icon: "fiscalite" },
{ key: "international", label: "International", color: PALETTE.international, icon: "international" },
{ key: "economie", label: "Économie", color: PALETTE.economie, icon: "economie" },
{ key: "politiques", label: "Politiques publiques", color: PALETTE.politiques, icon: "politiques" },
{ key: "droit", label: "Droit", color: PALETTE.droit, icon: "droit" },
{ key: "arbitrage", label: "Arbitrage", color: PALETTE.arbitrage, icon: "arbitrage" },
];
const CAT_BY_KEY = Object.fromEntries(CATEGORIES.map(c => [c.key, c]));
const LIGHT = {
paper: "#ffffff",
paper2: "#fafaf7",
gutter: "#f4f4f1",
ink: "#15151a",
inkSoft: "#56565d",
inkMute: "#9a9aa0",
line: "#e8e8ea",
lineSoft: "#f0f0f1",
accent: "#4a4fb5",
accentSoft: "#eaebf7",
shadow: "0 1px 2px rgba(20,20,30,.04), 0 8px 24px rgba(20,20,30,.06)",
shadowHi: "0 2px 4px rgba(20,20,30,.06), 0 18px 50px rgba(20,20,30,.12)",
};
const DARK = {
paper: "#0e0e12",
paper2: "#13131a",
gutter: "#08080b",
ink: "#e7e7ee",
inkSoft: "#a8a8b2",
inkMute: "#6a6a74",
line: "#22222b",
lineSoft: "#1a1a22",
accent: "#8287e2",
accentSoft: "#1c1d2e",
shadow: "0 1px 2px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.4)",
shadowHi: "0 2px 6px rgba(0,0,0,.6), 0 24px 60px rgba(0,0,0,.55)",
};
const TYPE = {
serif: `"Fraunces", "Times New Roman", Georgia, serif`,
sans: `"Inter", "Helvetica Neue", Helvetica, Arial, sans-serif`,
mono: `"JetBrains Mono", ui-monospace, "SF Mono", monospace`,
};
/* ============================================================
2. HELPERS VISUELS
============================================================ */
function PlusPattern({ density = 9, opacity = 0.07, color }) {
const id = `plus-${density}-${color.replace("#","")}-${opacity*100|0}`;
return (
);
}
/* Petit cross icon (croix suisse stylisée) */
function CrossMark({ size = 8, color, opacity = 0.5 }) {
return (
);
}
/* Engraving art - 11 variantes, utilisé en fallback pour les cartes sans images */
function EngravingArt({ variant = 0, color }) {
const c = color;
const uid = `${variant}-${color.replace("#","")}-${Math.random().toString(36).slice(2,7)}`;
const v = variant % 11;
if (v === 0) return (
{Array.from({length:36}, (_,i) =>
{Array.from({length:36}, (_,i) =>
);
if (v === 1) return (
{Array.from({length:8}, (_,i) => (
))}
{Array.from({length:14}, (_,i) => {
const a = (i/14)*Math.PI*2;
return
);
if (v === 2) return (
{Array.from({length:16}, (_,i) => [
,
])}
);
if (v === 3) return (
);
if (v === 4) return (
{Array.from({length:6}, (_,i) => (
))}
);
if (v === 5) return (
);
if (v === 6) return (
{Array.from({length:32}, (_,i) =>
{Array.from({length:32}, (_,i) =>
);
if (v === 7) return (
{Array.from({length:20}, (_,i) => (
))}
);
if (v === 8) return (
))}
);
if (v === 9) return (
);
return ( /* v === 10 */
);
}
/* Icônes de catégorie en SVG fait main */
function CategoryIcon({ kind, color, animated }) {
const sw = 1.2;
const baseStyle = {
transition: "transform 420ms cubic-bezier(.34,1.4,.64,1)",
transformOrigin: "center",
transform: animated ? "scale(1.06)" : "scale(1)",
};
if (kind === "fiscalite") {
const dots = [];
for (let y = 0; y < 4; y++)
for (let x = 0; x < 6; x++) dots.push(
{dots} ;
}
if (kind === "economie") return (
);
if (kind === "droit") return (
);
if (kind === "international") return (
);
if (kind === "politiques") {
const dots = [];
for (let y = 0; y < 4; y++)
for (let x = 0; x < 4; x++) dots.push(
{dots} ;
}
if (kind === "arbitrage") return (
);
return null;
}
/* ============================================================
3. CONTEXTE CONTENU — charge content.json
============================================================ */
const ContentCtx = createContext({ items: [], byCat: {}, tree: {}, ready: false });
function useContent() { return useContext(ContentCtx); }
function ContentProvider({ children }) {
const [state, setState] = useState({ items: [], byCat: {}, tree: {}, ready: false });
useEffect(() => {
let alive = true;
fetch("/content.json", { cache: "no-cache" })
.then(r => r.ok ? r.json() : { items: [] })
.catch(() => ({ items: [] }))
.then(json => {
if (!alive) return;
const items = (json.items || []).map(it => ({
...it,
color: CAT_BY_KEY[it.category]?.color || "#999",
categoryLabel: CAT_BY_KEY[it.category]?.label || it.category,
}));
const byCat = {};
for (const it of items) (byCat[it.category] = byCat[it.category] || []).push(it);
// build folder tree for finder
const tree = {};
for (const it of items) {
let node = tree;
const parts = [it.category, ...(it.topicPath || []), it.slug];
parts.forEach((p, idx) => {
node[p] = node[p] || { _children: {}, _items: [], _key: p };
if (idx === parts.length - 1) {
node[p]._concept = it;
}
node = node[p]._children;
});
}
setState({ items, byCat, tree, ready: true });
});
return () => { alive = false; };
}, []);
return {children} ;
}
/* ============================================================
4. HEADER + ThemeToggler
============================================================ */
function ThemeToggler({ isDark, onToggle, t }) {
return (
);
}
function FolderIcon({ size = 18 }) {
return (
);
}
function Header({ t, isDark, onToggleTheme, onOpenFinder }) {
return (
{["Concepts", "Thématiques", "À propos", "Ressources"].map(n => (
{n}
))}
);
}
const iconBtn = (t, leftBorder=false) => ({
background: "transparent", border: 0,
borderLeft: `1px solid ${t.line}`,
cursor: "pointer", color: t.ink,
display: "flex", alignItems: "center", justifyContent: "center",
});
/* ============================================================
5. HERO — carte vedette en rotation + cartes en peeking
============================================================ */
function HeroFeaturedCard({ item, t, slideIdx, total }) {
return (
{item.categoryLabel}
{String(slideIdx + 1).padStart(2, "0")}
{item.title}
{item.summary}
{item.images && item.images.length > 0 ? (
) : (
)}
{String(slideIdx + 1).padStart(2,"0")} / {String(total).padStart(2,"0")}
Carrousel · {item.imageCount || 0} slides
);
}
function HeroPeekStack({ items, activeIdx, t }) {
return (
{items.slice(0, 4).map((it, i) => {
if (i === 0) return null; // 1ère est la grosse carte
const offset = i * 14;
const opacity = 1 - i * 0.18;
return (
{String(i+1).padStart(2,"0")}
);
})}
Law and Economics
Idée complexe,
expliquer{" "}
facilement.
Des notions clés de droit, d'économie et de fiscalité expliquées en carrousels visuels et interactifs.
Six familles, des centaines de concepts.
{/* compteur en bas */}
{ready ? `${items.length} CONCEPTS` : "CHARGEMENT…"}
6 THÉMATIQUES
FR · 2026
{/* RIGHT — carte vedette + peeking */}
setPaused(true)} onMouseLeave={() => setPaused(false)}
style={{ padding: "60px 56px 40px", position: "relative", display: "flex", flexDirection: "column" }}>
{/* Controls */}
{featured.map((_, i) => (
setIdx(i)} aria-label={`Slide ${i+1}`} style={{
width: i === idx ? 28 : 12, height: 2,
background: i === idx ? t.ink : t.line, border: 0, cursor: "pointer", padding: 0,
transition: "width 240ms cubic-bezier(.4,0,.2,1), background 200ms",
}}/>
))}
next(-1)} className="nav-btn" style={navBtn(t)} aria-label="Précédent">
next(1)} className="nav-btn" style={{...navBtn(t), borderLeft:`1px solid ${t.line}`}} aria-label="Suivant">
);
}
const navBtn = (t) => ({
width: 40, height: 32, background: "transparent", border: 0, cursor: "pointer",
display: "flex", alignItems: "center", justifyContent: "center", color: t.ink,
transition: "background 160ms",
});
/* ============================================================
6. CATEGORIES
============================================================ */
function Categories({ t }) {
const { byCat, ready } = useContent();
const [hoverKey, setHoverKey] = useState(null);
return (
{CATEGORIES.map((c, i) => {
const count = byCat[c.key]?.length || 0;
const hovered = hoverKey === c.key;
return (
setHoverKey(c.key)} onMouseLeave={() => setHoverKey(null)}
className="cat-tile"
style={{
padding: "44px 26px 36px", textDecoration: "none", color: t.ink,
borderRight: i < CATEGORIES.length - 1 ? `1px solid ${t.line}` : 0,
display: "flex", flexDirection: "column", gap: 24,
position: "relative", overflow: "hidden",
background: hovered ? t.paper : "transparent",
transition: "background 280ms ease",
}}>
{c.label}
{ready ? `${count} concept${count > 1 ? "s" : ""}` : "—"}
{/* barre colorée en bas qui grandit */}
{/* motif croix subtil au survol */}
);
})}
);
}
/* ============================================================
7. PUBLICATIONS — carte avec hover en éventail
============================================================ */
function PubCard({ item, t, onOpen }) {
const [hover, setHover] = useState(false);
const hasImages = item.images && item.images.length > 0;
const previews = hasImages ? item.images.slice(0, 3) : [];
return (
onOpen(item)}
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}
className="pub-card"
style={{
textAlign: "left", cursor: "pointer", color: t.ink,
background: t.paper,
border: `1px solid ${hover ? t.ink : t.line}`,
borderTop: `2px solid ${item.color}`,
padding: "24px 26px 56px",
display: "flex", flexDirection: "column", gap: 12,
minHeight: 380, position: "relative",
boxShadow: hover ? t.shadowHi : t.shadow,
transform: hover ? "translateY(-2px)" : "translateY(0)",
transition: "transform 320ms cubic-bezier(.4,0,.2,1), border-color 200ms, box-shadow 320ms",
fontFamily: TYPE.sans, font: "inherit",
overflow: "hidden",
}}>
{item.categoryLabel}
{item.title}
{item.summary}
{/* zone visuelle : engraving fallback OU stack d'images au hover */}
{/* l'art par défaut, fade out au hover si on a des images */}
{/* fan-out des images au hover */}
{hasImages && (
{previews.map((src, i) => {
const center = (previews.length - 1) / 2;
const offset = i - center;
const rot = hover ? offset * 5 : 0;
const tx = hover ? offset * 18 : 0;
const ty = hover ? -Math.abs(offset) * 4 - 6 : 0;
const sc = hover ? 1 - Math.abs(offset) * 0.025 : 1;
return (
);
})}
)}
{item.imageCount ? `${item.imageCount} slides` : "Concept"}
);
}
/* contenu de fallback si content.json absent / vide */
const FALLBACK_PUBS = [
{ id:"droit/force-majeure", category:"droit", slug:"force-majeure", title:"Force majeure", summary:"Un événement imprévisible qui exonère une partie de ses obligations.", artVariant:0 },
{ id:"economie/cout-opportunite", category:"economie", slug:"cout-opportunite", title:"Coût d'opportunité", summary:"La valeur de la meilleure alternative à laquelle on renonce.", artVariant:1 },
{ id:"fiscalite/prix-transfert", category:"fiscalite", slug:"prix-transfert", title:"Prix de transfert", summary:"Fixation des prix dans les transactions entre sociétés d'un même groupe.", artVariant:2 },
{ id:"arbitrage/nation-favorisee", category:"arbitrage", slug:"nation-favorisee", title:"Clause de la nation\nla plus favorisée", summary:"Accorder à un partenaire le même avantage qu'à tout autre.", artVariant:3 },
{ id:"droit/personnalite-juridique", category:"droit", slug:"personnalite-juridique", title:"Personnalité juridique", summary:"Aptitude à être titulaire de droits et d'obligations.", artVariant:4 },
{ id:"international/beps-14", category:"international", slug:"beps-14", title:"BEPS — Action 14", summary:"Améliorer le règlement des différends entre États.", artVariant:5 },
{ id:"fiscalite/double-imposition", category:"fiscalite", slug:"double-imposition", title:"Convention de\ndouble imposition", summary:"Accord bilatéral pour éviter qu'un revenu soit imposé deux fois.", artVariant:6 },
{ id:"politiques/subsidiarite", category:"politiques", slug:"subsidiarite", title:"Principe de subsidiarité", summary:"Ne déléguer à un niveau supérieur que ce qu'il fait mieux.", artVariant:7 },
];
function Publications({ t, onOpenItem }) {
const { items, ready } = useContent();
const [filter, setFilter] = useState("all");
const list = useMemo(() => {
const src = items.length ? items : FALLBACK_PUBS.map(p => ({
...p, color: PALETTE[p.category], categoryLabel: CAT_BY_KEY[p.category].label,
}));
return filter === "all" ? src : src.filter(it => it.category === filter);
}, [items, filter]);
return (
Bibliothèque
Dernières publications.
setFilter("all")} t={t} label="Toutes" color={t.ink} count={items.length || FALLBACK_PUBS.length}/>
{CATEGORIES.map(c => (
setFilter(c.key)} t={t}
label={c.label} color={c.color}/>
))}
{list.map((p, i) => (
))}
);
}
function FilterChip({ active, onClick, t, label, color, count }) {
return (
{label}
{count != null && {count} }
);
}
/* ============================================================
8. MANIFESTE
============================================================ */
const MANIFESTE_POINTS = [
{ num: "01", title: "Densité visuelle", body: "Une diapositive condense ce qu'un long article dilue. La cognition spatiale fait le reste — une image vaut mille mots de doctrine." },
{ num: "02", title: "Mémorisation accrue", body: "Le format séquentiel mobilise la mémoire de travail bien mieux qu'un texte continu. Une notion par slide, ancrée par le visuel." },
{ num: "03", title: "Référence rapide", body: "Chaque fiche est une unité atomique citable, partageable, archivable. Pas de scroll fatigue, pas de contenu dilué." },
{ num: "04", title: "Rigueur académique", body: "Sources primaires citées, doctrine référencée, jurisprudence indexée. Le fond sans le format blog." },
];
function Manifeste({ t }) {
return (
Manifeste
Pourquoi le formatcarrousel ?
Les longs articles ne sont plus lus. Les fiches visuelles, oui. Le format carrousel impose la rigueur :
une idée par slide, une source par citation, une notion par fiche.
« La densité visuelle est l'arme moderne de la doctrine. »
{MANIFESTE_POINTS.map((pt, i) => (
{pt.num} —
{pt.title}
{pt.body}
))}
);
}
/* ============================================================
9. FOOTER
============================================================ */
const FOOTER_COLS = [
{ label: "Thématiques", links: ["Fiscalité internationale", "Arbitrage & MAP", "Analyse économique du droit", "Droit international", "Politiques publiques", "Droit suisse"] },
{ label: "Ressources", links: ["Index des concepts", "Bibliographie", "Citations & DOI", "Publications LinkedIn", "Glossaire"] },
{ label: "À propos", links: ["Le projet", "Recherche doctorale", "Méthodologie", "Contact", "Mentions légales", "Licence CC BY-NC 4.0"] },
];
function Footer({ t }) {
return (
lawandeconomics.ch
Plateforme de vulgarisation juridique et économique. Des notions clés du droit et de l'économie
expliquées en carrousels visuels, en appui à la recherche doctorale.
{FOOTER_COLS.map((col, ci) => (
{col.label}
{col.links.map((lnk, li) => (
{lnk}
))}
))}
© 2026 LAWANDECONOMICS.CH — GENÈVE, SUISSE
LICENCE CC BY-NC 4.0
);
}
function SocialIcon({ kind, ink }) {
const wrap = (svg) => {svg} ;
if (kind === "linkedin") return wrap(
);
if (kind === "instagram") return wrap(
);
if (kind === "x") return wrap(
);
return wrap(
);
}
/* ============================================================
10. MODALES — CarouselViewer + FinderExplorer
============================================================ */
function Modal({ open, onClose, t, children, maxWidth = 1200 }) {
useEffect(() => {
if (!open) return;
const onKey = (e) => { if (e.key === "Escape") onClose(); };
document.addEventListener("keydown", onKey);
document.body.style.overflow = "hidden";
return () => { document.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
}, [open, onClose]);
if (!open) return null;
return (
e.stopPropagation()} style={{
width: "100%", maxWidth, maxHeight: "92vh",
background: t.paper, color: t.ink,
border: `1px solid ${t.line}`,
boxShadow: "0 24px 80px rgba(0,0,0,.4)",
display: "flex", flexDirection: "column",
animation: "modalIn 360ms cubic-bezier(.34,1.2,.64,1) both",
overflow: "hidden",
}}>
{children}
);
}
function CarouselViewer({ open, item, onClose, t }) {
const [idx, setIdx] = useState(0);
useEffect(() => { setIdx(0); }, [item?.id]);
useEffect(() => {
if (!open || !item) return;
const onKey = (e) => {
if (e.key === "ArrowLeft") setIdx(i => Math.max(0, i-1));
if (e.key === "ArrowRight") setIdx(i => Math.min((item.images?.length||1)-1, i+1));
};
document.addEventListener("keydown", onKey);
return () => document.removeEventListener("keydown", onKey);
}, [open, item]);
if (!item) return null;
const imgs = item.images || [];
const total = imgs.length;
const hasImages = total > 0;
return (
{item.categoryLabel}
·
{item.title.replace(/\n/g, " ")}
{hasImages ? (
) : (
Carrousel à venir — ajoutez des images dans
public/content/{item.category}/{item.slug}/
)}
{hasImages && total > 1 && (
<>
setIdx(i => Math.max(0, i-1))} disabled={idx === 0}
className="carou-arrow" style={carouArrow(t, "left")} aria-label="Précédent">
setIdx(i => Math.min(total-1, i+1))} disabled={idx === total-1}
className="carou-arrow" style={carouArrow(t, "right")} aria-label="Suivant">
)}
{String(idx+1).padStart(2,"0")} / {String(total).padStart(2,"0")}
{imgs.map((_, i) => (
setIdx(i)} aria-label={`Slide ${i+1}`} style={{
width: i === idx ? 24 : 10, height: 2,
background: i === idx ? t.ink : t.line, border: 0, cursor: "pointer", padding: 0,
transition: "width 220ms",
}}/>
))}
← → Naviguer · ESC Fermer
)}
);
}
const carouArrow = (t, side) => ({
position: "absolute", [side]: 24, top: "50%", transform: "translateY(-50%)",
width: 44, height: 44, background: t.paper, border: `1px solid ${t.line}`,
color: t.ink, cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center",
transition: "all 200ms",
});
/* --- Finder explorer (3 colonnes Apple-style) --- */
function FinderExplorer({ open, onClose, onOpenItem, t }) {
const { tree, items } = useContent();
// path = chemin courant dans l'arbre, ex ["fiscalite", "conventions"]
const [path, setPath] = useState([]);
useEffect(() => { if (open) setPath([]); }, [open]);
// Build columns from path
const columns = useMemo(() => {
const cols = [];
// Root column = catégories
const rootEntries = CATEGORIES.map(c => ({
key: c.key, label: c.label, color: c.color, type: "category",
count: (items.filter(it => it.category === c.key).length),
}));
cols.push({ title: "Catégories", entries: rootEntries });
// Walk path
let node = tree;
for (let depth = 0; depth < path.length; depth++) {
const seg = path[depth];
if (!node[seg]) break;
const children = node[seg]._children || {};
const entries = Object.values(children).map(child => {
const isConcept = !!child._concept;
return {
key: child._key,
label: isConcept ? child._concept.title.replace(/\n/g," ") : child._key.charAt(0).toUpperCase()+child._key.slice(1).replace(/-/g," "),
color: CAT_BY_KEY[path[0]]?.color || t.ink,
type: isConcept ? "concept" : "topic",
concept: child._concept,
count: isConcept ? 0 : Object.keys(child._children || {}).length,
};
}).sort((a,b) => (a.type === "topic" ? -1 : 1) - (b.type === "topic" ? -1 : 1) || a.label.localeCompare(b.label));
cols.push({ title: depth === 0 ? "Sujets" : "Sous-thèmes", entries });
node = children;
}
return cols;
}, [tree, path, items, t.ink]);
const selectedConcept = useMemo(() => {
let node = tree;
for (const seg of path) {
if (!node[seg]) return null;
if (node[seg]._concept && path.indexOf(seg) === path.length-1) {
return node[seg]._concept;
}
node = node[seg]._children;
}
return null;
}, [tree, path]);
const onClickEntry = (depth, entry) => {
const newPath = [...path.slice(0, depth), entry.key];
if (entry.type === "concept") {
onOpenItem(entry.concept);
onClose();
return;
}
setPath(newPath);
};
return (
{/* Bar du haut style Finder */}
lawandeconomics{path.length ? " / " + path.join(" / ") : ""}
setPath(p => p.slice(0, -1))} disabled={path.length === 0}
style={navBtn(t)} aria-label="Retour">
{/* Columns */}
{columns.map((col, depth) => (
onClickEntry(depth, entry)}/>
))}
{/* Aperçu détail */}
{ onOpenItem(c); onClose(); }}/>
);
}
const trafficDot = (color, passive=false) => ({
width: 12, height: 12, borderRadius: 6, background: color,
border: 0, padding: 0, cursor: passive ? "default" : "pointer",
});
function FinderColumn({ col, t, depth, selectedKey, onClick }) {
return (
{col.title}
{col.entries.length === 0 ? (
Vide.
) : col.entries.map(e => {
const active = e.key === selectedKey;
return (
onClick(e)}
className="finder-row"
style={{
width: "100%", textAlign: "left", border: 0, cursor: "pointer",
padding: "10px 14px", display: "flex", alignItems: "center", gap: 10,
background: active ? t.accent : "transparent",
color: active ? "#fff" : t.ink, fontSize: 13, fontFamily: TYPE.sans,
borderBottom: `1px solid ${t.lineSoft}`,
transition: "background 140ms",
}}>
{e.type === "category" || e.type === "topic" ? (
) : (
)}
{e.label}
{e.count > 0 && (
{e.count}
)}
{(e.type === "category" || e.type === "topic") && (
)}
);
})}
);
}
function FileIconColored({ color, size = 14 }) {
return (
);
}
function FinderPreview({ t, concept, onOpen }) {
if (!concept) return (
Sélectionnez un concept pour afficher son aperçu.
);
const c = concept;
const color = CAT_BY_KEY[c.category]?.color || t.ink;
const imgs = c.images || [];
return (
{CAT_BY_KEY[c.category]?.label}
{c.title}
{c.summary}
{imgs.length > 0 ? (
) : (
)}
{imgs.length > 1 && (
{imgs.length} slides
{imgs.slice(0, 8).map((src, i) => (
))}
)}
onOpen(c)} style={{
background: t.ink, color: t.paper, border: 0, padding: "12px 20px",
fontSize: 10.5, letterSpacing: "0.22em", textTransform: "uppercase", fontWeight: 600,
cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 12,
}}>
Ouvrir le carrousel
);
}
/* ============================================================
11. APP
============================================================ */
function App() {
const [isDark, setIsDark] = useState(() =>
window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
);
const t = isDark ? DARK : LIGHT;
const [openItem, setOpenItem] = useState(null);
const [finderOpen, setFinderOpen] = useState(false);
const css = `
@keyframes fadeIn { from {opacity:0} to {opacity:1} }
@keyframes fadeUp { from {opacity:0; transform: translateY(8px)} to {opacity:1; transform:translateY(0)} }
@keyframes lineUp { from {opacity:0; transform: translateY(14px)} to {opacity:1; transform:translateY(0)} }
@keyframes barIn { from {transform:scaleX(0)} to {transform:scaleX(1)} }
@keyframes cardIn { from {opacity:0; transform: translateY(16px)} to {opacity:1; transform:translateY(0)} }
@keyframes heroIn { from {opacity:0; transform: translateY(8px) scale(.98)} to {opacity:1; transform: translateY(0) scale(1)} }
@keyframes modalIn { from {opacity:0; transform: translateY(20px) scale(.98)} to {opacity:1; transform: translateY(0) scale(1)} }
body, section, header, footer, nav, div, a, p, h1, h2, h3, span, button {
transition: background-color 380ms, border-color 380ms, color 380ms;
}
.nav-link::after {
content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0;
background:${t.accent}; transition: width 280ms cubic-bezier(.4,0,.2,1);
}
.nav-link:hover { color:${t.accent}; }
.nav-link:hover::after { width:100%; }
a:hover .logo-line { transform: scaleX(1) !important; }
.hdr-icon { transition: background 200ms, color 200ms; }
.hdr-icon:hover { background:${t.lineSoft}; color:${t.accent}; }
.nav-btn:hover { background:${t.lineSoft}; }
.nav-btn[disabled] { opacity:.3; cursor:not-allowed; }
.cta-primary .cta-arrow { transition: transform 240ms cubic-bezier(.4,0,.2,1); }
.cta-primary:hover .cta-arrow { transform: translateX(6px); }
.cta-secondary { transition: background 200ms; }
.cta-secondary:hover { background:${t.lineSoft}; }
.filter-chip:hover { border-color:${t.ink} !important; }
.carou-arrow:hover:not([disabled]) { background:${t.ink}; color:${t.paper}; border-color:${t.ink}; }
.carou-arrow[disabled] { opacity:.25; cursor:not-allowed; }
.x-btn:hover { background:${t.ink}; color:${t.paper}; border-color:${t.ink}; }
.soc:hover { opacity:1 !important; color:${t.accent}; }
.footer-link:hover { opacity:1 !important; color:${t.accent}; }
.finder-row:hover:not(:disabled) {
background: ${t.lineSoft};
}
`;
return (
setIsDark(d => !d)}
onOpenFinder={() => setFinderOpen(true)}/>
setOpenItem(null)} t={t}/>
setFinderOpen(false)}
onOpenItem={setOpenItem} t={t}/>
);
}
ReactDOM.createRoot(document.getElementById("root")).render( 
) : (