/* lawandeconomics.ch — v4 ============================================================ 1. Tokens & thème 2. Helpers (PlusPattern, ArtPattern, icônes) 3. AuroraBackground 4. ContentContext (charge /content.json) 5. Header (logo, nav, search, theme, finder) 6. Hero 7. Categories 8. Filters (style Linear) 9. Publications + PubCard (style InfoCard hover) 10. Manifeste 11. Footer 12. Modales : CarouselViewer, FinderExplorer (Arbre + Colonnes) 13. App ============================================================ */ const { useState, useEffect, useRef, useMemo, useCallback, createContext, useContext } = React; /* ============================================================ 1. TOKENS ============================================================ */ const PALETTE = { fiscalite: { base: "#dc2626", soft: "#fef2f2", dark: "#f87171" }, // 20 CHF international: { base: "#ea8a1f", soft: "#fef7ec", dark: "#fbbf24" }, // 10 CHF politiques: { base: "#16a34a", soft: "#f0fdf4", dark: "#4ade80" }, // 50 CHF economie: { base: "#2563eb", soft: "#eff6ff", dark: "#60a5fa" }, // 100 CHF droit: { base: "#92400e", soft: "#fef3c7", dark: "#d97706" }, // 200 CHF arbitrage: { base: "#7c3aed", soft: "#f5f3ff", dark: "#a78bfa" }, // 1000 CHF }; const CATEGORIES = [ { key: "fiscalite", label: "Fiscalité", icon: "fiscalite" }, { key: "international", label: "International", icon: "international" }, { key: "economie", label: "Économie", icon: "economie" }, { key: "politiques", label: "Politiques publiques", icon: "politiques" }, { key: "droit", label: "Droit", icon: "droit" }, { key: "arbitrage", label: "Arbitrage", icon: "arbitrage" }, ]; const CAT_BY_KEY = Object.fromEntries(CATEGORIES.map(c => [c.key, c])); const colorOf = (key, isDark) => isDark ? PALETTE[key]?.dark : PALETTE[key]?.base; const LIGHT = { paper: "#fafaf7", surface: "#ffffff", surface2: "#f4f4f0", gutter: "#ededea", ink: "#0e0e12", inkSoft: "#52525b", inkMute: "#a1a1aa", line: "#e5e5e1", lineSoft: "#efefec", accent: "#4f46e5", accentSoft: "#eef2ff", shadow: "0 1px 2px rgba(15,15,20,.04), 0 8px 24px rgba(15,15,20,.06)", shadowHi: "0 2px 4px rgba(15,15,20,.06), 0 24px 60px rgba(15,15,20,.13)", isDark: false, // aurora colors aurora1: "#dbeafe", aurora2: "#fef3c7", aurora3: "#ede9fe", }; const DARK = { paper: "#0a0a0e", surface: "#101015", surface2: "#16161d", gutter: "#06060a", ink: "#ececf0", inkSoft: "#a1a1aa", inkMute: "#5e5e68", line: "#26262e", lineSoft: "#1a1a22", accent: "#818cf8", accentSoft: "#1c1d2e", shadow: "0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.4)", shadowHi: "0 2px 6px rgba(0,0,0,.5), 0 28px 72px rgba(0,0,0,.6)", isDark: true, aurora1: "#1e1b4b", aurora2: "#3b0764", aurora3: "#0c4a6e", }; 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`, }; const R = { sm: 4, md: 6, lg: 8, xl: 12 }; /* ============================================================ 2. HELPERS — patterns & icônes ============================================================ */ function PlusPattern({ density = 14, opacity = 0.06, color = "#000" }) { const id = `plus-${density}-${color.replace("#","")}-${(opacity*100)|0}`; return ( ); } /* 4 motifs de gravure simples pour fallback (concept sans image) */ function ArtPattern({ variant = 0, color, opacity = 0.7 }) { const v = variant % 4; if (v === 0) return ( {Array.from({length:9}, (_,i) => ( ))} ); if (v === 1) return ( {Array.from({length:14}, (_,i) => ( ))} ); if (v === 2) return ( {Array.from({length:8}, (_,i) => ( ))} ); return ( {Array.from({length:5}, (_,i) => ( ))} ); } function CategoryIcon({ kind, color, animated }) { const sw = 1.3; const style = { transition: "transform 420ms cubic-bezier(.34,1.4,.64,1)", transformOrigin: "center" }; if (kind === "fiscalite") { const dots = []; for (let y=0; y<3; y++) for (let x=0; x<5; x++) { dots.push(); } return {dots}; } if (kind === "economie") return ( ); if (kind === "droit") return ( ); if (kind === "international") return ( ); if (kind === "politiques") { const dots = []; for (let y=0; y<3; y++) for (let x=0; x<3; x++) { dots.push(); } return {dots}; } if (kind === "arbitrage") return ( ); return null; } function FolderIcon({ size = 16, color = "currentColor", filled = false }) { return ( ); } function FileIcon({ size = 14, color }) { return ( ); } /* ============================================================ 3. AURORA BACKGROUND — radiaux flous animés très subtils ============================================================ */ function AuroraBackground({ t }) { const opacity = t.isDark ? 0.5 : 0.55; return (
); } /* ============================================================ 4. CONTEXTE CONTENU ============================================================ */ 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, categoryLabel: CAT_BY_KEY[it.category]?.label || it.category, })); const byCat = {}; for (const it of items) (byCat[it.category] = byCat[it.category] || []).push(it); 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: {}, _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}; } /* ============================================================ 5. HEADER ============================================================ */ function ThemeToggler({ isDark, onToggle, t }) { return ( ); } function Header({ t, isDark, onToggleTheme, onOpenFinder, onScrollTo }) { const iconBtn = { background: "transparent", border: 0, borderLeft: `1px solid ${t.line}`, width: 52, color: t.ink, display: "flex", alignItems: "center", justifyContent: "center" }; return (
); } /* ============================================================ 6. HERO ============================================================ */ function FeaturedCard({ item, t, idx, total, hasMultiple }) { const color = colorOf(item.category, t.isDark); const hasImg = item.images && item.images.length > 0; return (
{item.categoryLabel} {hasMultiple && ( {String(idx+1).padStart(2,"0")} / {String(total).padStart(2,"0")} )}

{item.title}

{item.summary && (

{item.summary}

)}
{hasImg ? ( ) : (
)}
{hasImg ? `${item.images.length} slides` : "Concept"} Carrousel ↗
); } function HeroEmptyState({ t }) { return (
Bibliothèque vide
Aucun concept publié pour l'instant. Ajoutez un dossier dans{" "} public/content/{" "} puis rebuild.
); } function Hero({ t, isDark }) { const { items, ready } = useContent(); return (
{/* Panneau décoratif droit — lignes rayonnantes style gravure */}
{/* Fondu gauche */}
{/* Gradient wash accent */}
{/* Lignes rayonnantes — esthétique gravure banknote */} {Array.from({length: 52}, (_, i) => { const a = (i / 52) * Math.PI * 2; const x1 = Math.cos(a) * 28, y1 = Math.sin(a) * 28; const x2 = Math.cos(a) * 380, y2 = Math.sin(a) * 380; return ; })} {[55, 100, 160, 230, 310].map(r => ( ))} {/* Grain */}
{/* Contenu */}
Plateforme académique · 2026

Idée complexe,
expliquer facilement.

Des notions clés du droit, de l'économie et de la fiscalité expliquées en carrousels visuels et interactifs. Six familles thématiques, des centaines de concepts.

); } const navBtn = (t) => ({ width: 38, height: 30, background: "transparent", border: 0, display: "flex", alignItems: "center", justifyContent: "center", color: t.ink, }); const Stat = ({ label, value, t }) => (
{label} {value}
); /* ============================================================ 7. 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; const color = colorOf(c.key, t.isDark); return ( setHoverKey(c.key)} onMouseLeave={() => setHoverKey(null)} className="cat-tile" style={{ padding: "40px 24px 32px", textDecoration: "none", color: t.ink, borderRight: i < CATEGORIES.length-1 ? `1px solid ${t.line}` : 0, display: "flex", flexDirection: "column", gap: 22, position: "relative", overflow: "hidden", background: hovered ? t.surface : "transparent", transition: "background 280ms ease", }}>
{c.label}
{ready ? (count > 0 ? `${count} concept${count > 1 ? "s" : ""}` : "0 concept") : "—"}
); })}
); } /* ============================================================ 8. FILTRES (style Linear) ============================================================ */ function Filters({ t, filter, setFilter, items }) { const allCount = items.length; return (
setFilter("all")} t={t} label="Toutes" color={t.ink} count={allCount}/> {CATEGORIES.map(c => { const cnt = items.filter(it => it.category === c.key).length; if (cnt === 0) return null; return ( setFilter(c.key)} t={t} label={c.label} color={colorOf(c.key, t.isDark)} count={cnt}/> ); })}
); } function FilterChip({ active, onClick, t, label, color, count }) { return ( ); } /* ============================================================ 9. PUBLICATIONS — InfoCard-style hover (height + image fan) ============================================================ */ function PubCard({ item, t, onOpen, animDelay = 0 }) { const [hover, setHover] = useState(false); const color = colorOf(item.category, t.isDark); const hasImg = item.images && item.images.length > 0; const previews = hasImg ? item.images.slice(0, 3) : []; // height expansion const baseHeight = 320; const expHeight = hasImg ? 380 : 320; return (
); } function PubsEmpty({ t }) { return (
Aucune publication

Pour publier un concept, créez un dossier dans{" "} public/content/[catégorie]/[slug]/ {" "} avec un meta.json{" "} et vos images, puis exécutez npm run build:content.

); } function Publications({ t, onOpenItem }) { const { items, ready } = useContent(); const [filter, setFilter] = useState("all"); const list = filter === "all" ? items : items.filter(it => it.category === filter); return (
Bibliothèque

Publications

{ready && items.length > 0 && ( )}
{!ready ? null : list.length === 0 ? ( ) : list.map((p, i) => ( ))}
); } /* ============================================================ 10. 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 format
carrousel ?

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}

))}
); } /* ============================================================ 11. 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. Notions clés du droit et de l'économie expliquées en carrousels visuels, en appui à la recherche doctorale.

{["linkedin","instagram","x","mail"].map(k => )}
{FOOTER_COLS.map((col, ci) => (
{col.label}
))}
© 2026 LAWANDECONOMICS.CH — GENÈVE, SUISSE LICENCE CC BY-NC 4.0
); } function SocialIcon({ kind, t }) { const wrap = (svg) => {svg}; if (kind === "linkedin") return wrap(); if (kind === "instagram") return wrap(); if (kind === "x") return wrap(); return wrap(); } /* ============================================================ 12. MODALES ============================================================ */ 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.surface, color: t.ink, border: `1px solid ${t.line}`, borderRadius: R.xl, boxShadow: "0 30px 90px rgba(0,0,0,.45)", display: "flex", flexDirection: "column", overflow: "hidden", animation: "modalIn 380ms cubic-bezier(.34,1.2,.64,1) both", }}>{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 hasImg = total > 0; const color = colorOf(item.category, t.isDark); return (
{item.categoryLabel} · {item.title.replace(/\n/g, " ")}
{hasImg ? ( ) : (
Carrousel à venir — ajoutez des images dans{" "} public/content/{item.category}/{[...(item.topicPath||[]), item.slug].join("/")}/
)} {hasImg && total > 1 && ( <> )}
{hasImg && (
{String(idx+1).padStart(2,"0")} / {String(total).padStart(2,"0")}
{imgs.map((_, i) => (
← → · ESC
)} ); } const carouArrow = (t, side) => ({ position: "absolute", [side]: 22, top: "50%", transform: "translateY(-50%)", width: 42, height: 42, background: t.surface, border: `1px solid ${t.line}`, borderRadius: "50%", color: t.ink, display: "flex", alignItems: "center", justifyContent: "center", }); /* ---------- Finder Explorer (Tree + Columns) ---------- */ const trafficDot = (color, passive=false) => ({ width: 10, height: 10, borderRadius: "50%", background: color, border: 0, padding: 0, cursor: passive ? "default" : "pointer", flexShrink: 0, }); function ViewToggle({ active, onClick, t, label, icon }) { return ( ); } function FinderExplorer({ open, onClose, onOpenItem, t }) { const { tree, items, ready } = useContent(); const [view, setView] = useState("tree"); const [selectedId, setSelectedId] = useState(null); const [path, setPath] = useState([]); useEffect(() => { if (open) { setSelectedId(null); setPath([]); } }, [open]); const selectedConcept = useMemo(() => { if (!selectedId) return null; return items.find(it => it.id === selectedId) || null; }, [selectedId, items]); const breadcrumb = path.length ? path.map(p => p.charAt(0).toUpperCase() + p.slice(1).replace(/-/g, " ")).join(" / ") : null; return ( {/* Barre titre style macOS — trafic lights uniquement ici */}
{/* Traffic lights */}
{/* Breadcrumb centré */}
lawandeconomics{breadcrumb ? " / " + breadcrumb : ""}
{/* Toggle vue */}
setView("tree")} t={t} label="Arbre" icon={ }/> setView("columns")} t={t} label="Colonnes" icon={ }/>
{/* Corps */}
{view === "tree" ? ( ) : ( )} { onOpenItem(c); onClose(); }}/>
); } /* Tree view */ function TreeView({ t, tree, selectedId, setSelectedId }) { return (
explorer
{CATEGORIES.map((c, idx) => ( ))}
); } function TreeNode({ name, node, category, depth, t, selectedId, setSelectedId, defaultOpen, isConcept = false, concept = null, isLast = false, parentConnectors = [] }) { const [open, setOpen] = useState(!!defaultOpen); const [hover, setHover] = useState(false); const color = colorOf(category, t.isDark); const children = node?._children || {}; const childKeys = Object.keys(children).sort((a, b) => { const ac = children[a]._concept ? 1 : 0, bc = children[b]._concept ? 1 : 0; return ac !== bc ? ac - bc : a.localeCompare(b); }); const hasChildren = childKeys.length > 0; const active = isConcept && selectedId === concept?.id; const INDENT = 14, BASE = 8; return (
{/* Enfants */} {!isConcept && hasChildren && (
{childKeys.map((k, idx) => { const child = children[k]; const childIsConcept = !!child._concept; const childIsLast = idx === childKeys.length - 1; const childName = childIsConcept ? child._concept.title.replace(/\n/g, " ") : k.charAt(0).toUpperCase() + k.slice(1).replace(/-/g, " "); return ( ); })}
)}
); } /* Columns view */ function ColumnsView({ t, tree, items, selectedId, setSelectedId, path, setPath }) { const buildEntries = useCallback((node, catKey) => { const children = node?._children || {}; return Object.values(children).map(child => { const isConcept = !!child._concept; const hasSubTopics = !isConcept && Object.values(child._children || {}).some(c => !c._concept); return { key: child._key, label: isConcept ? child._concept.title.replace(/\n/g, " ") : child._key.charAt(0).toUpperCase() + child._key.slice(1).replace(/-/g, " "), type: isConcept ? "concept" : "topic", category: catKey, concept: child._concept || null, hasSubTopics, childCount: isConcept ? 0 : Object.keys(child._children || {}).length, }; }).sort((a, b) => { if (a.type !== b.type) return a.type === "topic" ? -1 : 1; return a.label.localeCompare(b.label); }); }, []); const columns = useMemo(() => { const cols = []; cols.push({ title: "Catégories", entries: CATEGORIES.map(c => ({ key: c.key, label: c.label, type: "category", category: c.key, count: items.filter(it => it.category === c.key).length, hasSubTopics: true, concept: null, })), }); let node = tree; for (let depth = 0; depth < path.length; depth++) { const seg = path[depth]; if (!node[seg]) break; const catKey = path[0]; const entries = buildEntries(node[seg], catKey); if (entries.length > 0) { const hasFolders = entries.some(e => e.type === "topic"); cols.push({ title: depth === 0 ? "Sujets" : (hasFolders ? "Sous-thèmes" : "Concepts"), entries }); } node = node[seg]._children || {}; } return cols; }, [tree, path, items, buildEntries]); const onClickEntry = (depth, entry) => { if (entry.type === "concept") { setSelectedId(entry.concept.id); return; // Ne pas étendre le chemin pour les concepts } const newPath = [...path.slice(0, depth), entry.key]; setSelectedId(null); setPath(newPath); }; return (
{columns.map((col, depth) => ( onClickEntry(depth, entry)}/> ))}
); } function FinderColumn({ col, t, depth, selectedKey, onClick }) { return (
{col.title}
{col.entries.length === 0 ? (
Aucun élément.
) : col.entries.map(e => { const active = e.key === selectedKey; const color = colorOf(e.category, t.isDark); return ( ); })}
); } function FinderPreview({ t, concept, onOpen }) { if (!concept) return (
Sélectionnez un concept
); const color = colorOf(concept.category, t.isDark); const imgs = concept.images || []; return (
{/* Catégorie */}
{CAT_BY_KEY[concept.category]?.label}
{/* Titre */}

{concept.title}

{/* Résumé */} {concept.summary && (

{concept.summary}

)} {/* Aperçu image */}
{imgs.length > 0 ? ( ) : (
)}
{/* Miniatures si plusieurs slides */} {imgs.length > 1 && (
{imgs.length} slides
{imgs.slice(0, 8).map((src, i) => (
))}
)} {/* CTA */}
); } /* ============================================================ 13. APP ============================================================ */ function App() { const [isDark, setIsDark] = useState(() => typeof window !== "undefined" && 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(14px)} to {opacity:1; transform:translateY(0)} } @keyframes fadeInUp { from {opacity:0; transform: translateY(8px) scale(.99)} 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)} } @keyframes pulse { 0%,100% {opacity:1; transform: scale(1)} 50% {opacity:.5; transform: scale(1.15)} } @keyframes auroraFloat1 { 0%,100% {transform: translate(0,0) scale(1)} 50% {transform: translate(8vw, 6vh) scale(1.1)} } @keyframes auroraFloat2 { 0%,100% {transform: translate(0,0) scale(1)} 50% {transform: translate(-6vw, -4vh) scale(1.08)} } @keyframes auroraFloat3 { 0%,100% {transform: translate(0,0) scale(1)} 50% {transform: translate(-5vw, 5vh) scale(1.05)} } @keyframes hBlob1 { 0%,100% {transform: translate(0,0) scale(1)} 50% {transform: translate(-4%, 7%) scale(1.07)} } @keyframes hBlob2 { 0%,100% {transform: translate(0,0) scale(1)} 50% {transform: translate(5%, -5%) scale(1.05)} } @keyframes orbPulse { 0%,100% {opacity:0.75; transform:scale(1)} 50% {opacity:1; transform:scale(1.14)} } @keyframes orbRing { 0% {transform:scale(1)} 100% {transform:scale(1.07)} } 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.surface}; border-color:${t.ink}; } .carou-arrow[disabled] { opacity:.25; cursor:not-allowed; } .x-btn:hover { background:${t.ink}; color:${t.surface}; border-color:${t.ink}; } .soc:hover { opacity:1 !important; color:${t.accent}; border-color:${t.accent}; } .footer-link:hover { opacity:1 !important; color:${t.accent}; } .finder-row:hover:not([data-active="true"]) { background:${t.lineSoft} !important; } @media (max-width: 980px) { .pub-card { font-size: inherit; } } `; return (
setIsDark(d => !d)} onOpenFinder={() => setFinderOpen(true)}/>
setOpenItem(null)} t={t}/> setFinderOpen(false)} onOpenItem={setOpenItem} t={t}/>
); } ReactDOM.createRoot(document.getElementById("root")).render();