// Editorial Agency Profile.
// Full-width ledger → contained 4:5 hero → bio → contact rail → stats sheet →
// justified portfolio gallery (click to enlarge, video plays) → footer.
if (typeof document !== "undefined" && !document.getElementById("profile-polish-css")) {
const s = document.createElement("style");
s.id = "profile-polish-css";
s.textContent = `
.cl-profile {
overflow-x: clip;
text-wrap: pretty;
}
.cl-contact-rail,
.cl-stats-triad {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cl-contact-link {
min-width: 0;
}
.cl-clickable:focus-visible,
.cl-footer a:focus-visible {
outline: 1px solid var(--fg);
outline-offset: 5px;
}
.cl-empty {
min-height: 240px;
display: grid;
place-items: center;
border: 1px solid var(--rule);
background: linear-gradient(135deg, rgba(243,239,233,0.055), rgba(243,239,233,0.018));
}
@media (max-width: 860px) {
.cl-ledger,
.cl-stats-grid,
.cl-footer-grid {
grid-template-columns: 1fr !important;
}
.cl-stats-triad {
grid-template-columns: 1fr;
}
.cl-ledger-cell,
.cl-footer-grid {
justify-content: flex-start !important;
}
.cl-split-hero {
grid-template-columns: 1fr !important;
min-height: 0 !important;
}
.cl-split-copy {
border-right: 0 !important;
border-bottom: 1px solid var(--rule) !important;
}
.cl-stat-row {
grid-template-columns: minmax(92px, 34%) 1fr !important;
gap: 12px !important;
}
.cl-stat-row > span:last-child {
grid-column: 2;
}
.cl-contact-rail {
grid-template-columns: 1fr;
}
.cl-section-head {
align-items: flex-start !important;
flex-direction: column !important;
}
.cl-gallery-row {
flex-direction: column !important;
}
.cl-gallery-row figure {
width: 100% !important;
height: auto !important;
flex-basis: auto !important;
}
.cl-gallery-row .mi {
height: auto !important;
}
.cl-grid-strict {
grid-template-columns: 1fr 1fr !important;
}
}
@media (max-width: 560px) {
.cl-name-lockup {
font-size: clamp(48px, 17vw, 82px) !important;
}
.cl-hero-vitals {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 8px !important;
text-align: center !important;
}
}
`;
document.head.appendChild(s);
}
function splitProse(value) {
return String(value || "")
.replace(/\r\n?/g, "\n")
.split(/\n{2,}|(?<=\.)\s+(?=[A-Z])/)
.map((paragraph) => paragraph.replace(/\s+/g, " ").trim())
.filter(Boolean);
}
function ClProse({ text, italic = false, quote = false }) {
const paragraphs = splitProse(text);
if (!paragraphs.length) return null;
return (
<>
{paragraphs.map((paragraph, index) => (
{quote && index === 0 ? "“" : ""}{paragraph}{quote && index === paragraphs.length - 1 ? "”" : ""}
))}
);
}
function ProfileClinical({ model, tweaks }) {
const rootRef = React.useRef(null);
React.useEffect(() => { applyTheme(rootRef.current, tweaks); }, [tweaks]);
const { hero, gallery, statsDensity, mediaCount } = tweaks;
const allMedia = Array.isArray(model.media) ? model.media : [];
const media = allMedia.slice(0, mediaCount);
const heroItem = media[0];
const rest = media.slice(1);
const allStats = Array.isArray(model.stats) ? model.stats : [];
const stats = statsDensity === "minimal"
? allStats.filter((s) =>
["Age", "Height", "Cup size", "Dress", "Shoe", "Hair", "Eyes",
"Based in", "Availability", "Travel"]
.includes(s.k))
: allStats;
// ── Lightbox state — keyed off the FULL media list (incl. hero) so
// clicking the hero also opens it as item 0. ──
const lb = useLightbox(media);
return (
{tweaks?.showLedger !== false && }
{hero === "masthead" ? (
lb.open(0)}/>
) : hero === "split" ? (
lb.open(0)}/>
) : (
lb.open(0)}/>
)}
lb.open(restIdx + 1)}
/>
);
}
// ─── Top ledger ────────────────────────────────────────────────────────
function ClHeaderLedger({ model }) {
return (
Talent
{model.firstName} {model.lastName}
Index
042 / 300
File
EV-42 · R 26.05
);
}
function ClLedgerCell({ children, right }) {
return (
{children}
);
}
function ClLK({ children }) { return {children} ; }
function ClLV({ children }) { return {children} ; }
// ─── Hero: contained 4:5 portrait, name overlay (DEFAULT) ──────────────
//
// The frame is width-bounded by the viewport height, so the actual rendered
// card stays 4:5 instead of stretching wide when the page shell is short.
function ClHeroOverlay({ model, item, onOpen }) {
// Pull a handful of vitals from the stats array so the bottom strip
// shows real values from the registration form (no labels — the values
// alone read as model vitals in context).
const valueOf = (k) => model.stats.find((s) => s.k === k)?.v;
const age = valueOf("Age");
const basedIn = valueOf("Based in");
const height = valueOf("Height");
return (
{
if (event.key === "Enter" || event.key === " ") {
event.preventDefault();
onOpen();
}
}}
role="button"
tabIndex={0}
aria-label={`Open ${model.firstName} ${model.lastName || ""} hero image`}
className="cl-clickable cl-front-hero-card"
style={{
position:"relative",
width:"min(100%, 70vh, 900px)",
aspectRatio:"4 / 5",
margin:"0 auto",
overflow:"hidden",
background:"#1a1816",
cursor:"zoom-in",
}}
>
{/* Subtle bottom vignette so name + meta stay legible */}
{/* Name — lower-centre */}
{model.firstName.toUpperCase()}
{model.lastName.toUpperCase()}
{/* Bottom vitals strip — age · based in · height */}
{age}
{basedIn}
{height}
);
}
// ─── Hero: Masthead (name big above contained image) ───────────────────
function ClHeroMasthead({ model, item, onOpen }) {
return (
{model.firstName.toUpperCase()}
{model.lastName.toUpperCase()}
{
if (event.key === "Enter" || event.key === " ") {
event.preventDefault();
onOpen();
}
}}
role="button"
tabIndex={0}
aria-label={`Open ${model.firstName} ${model.lastName || ""} hero image`}
className="cl-clickable"
style={{
aspectRatio:"4 / 5", maxHeight:"calc(100vh - 200px)",
margin:"0 auto", overflow:"hidden", background:"#1a1816",
cursor:"zoom-in",
}}>
);
}
// ─── Hero: Split ───────────────────────────────────────────────────────
function ClHeroSplit({ model, item, stats, onOpen }) {
return (
File R-26.05 · 042 · {model.city}
{model.firstName.toUpperCase()}
{model.lastName.toUpperCase()}
{stats.slice(0, 8).map((s) => (
{s.k}
{s.v}
))}
{
if (event.key === "Enter" || event.key === " ") {
event.preventDefault();
onOpen();
}
}}
role="button"
tabIndex={0}
aria-label={`Open ${model.firstName} ${model.lastName || ""} hero image`}
className="cl-clickable"
style={{ height:"100%", overflow:"hidden", cursor:"zoom-in" }}
>
);
}
// ─── Stats sheet ───────────────────────────────────────────────────────
const PHYSICAL_STATS = ["Age", "Height", "Hair", "Eyes", "Breasts", "Cup size", "Dress", "Shoe", "Marks"];
const BACKGROUND_STATS = ["Nationality", "Based in", "Languages", "Travel", "Availability"];
function statByKey(stats, key) {
const found = stats.find((item) => String(item.k || "").toLowerCase() === key.toLowerCase());
return found || { k: key, v: "N/A", sub: "" };
}
function ClStatsSheet({ stats, model }) {
return (
{PHYSICAL_STATS.map((key) => {
const s = statByKey(stats, key);
return ;
})}
{BACKGROUND_STATS.map((key) => {
const s = statByKey(stats, key);
return ;
})}
);
}
function ClStatsGroup({ title, children }) {
return (
{title}
{children}
);
}
function ClStatRow({ k, v, sub }) {
return (
{k}
{v || "N/A"}
{sub ? {sub} : null}
);
}
function ClPriceTable({ rows, from }) {
const cleanRows = Array.isArray(rows) ? rows.filter((row) => row && (row.incall || row.outcall)) : [];
return (
Pricing Table
{from || ""}
{cleanRows.length ? (
Incall
Outcall
{cleanRows.map((row) => (
{row.label}
{row.incall || "N/A"}
{row.outcall || "N/A"}
))}
) : (
)}
);
}
function ClServicesList({ services }) {
const items = Array.isArray(services) ? services.filter(Boolean) : [];
const preview = items.slice(0, 9);
const remaining = Math.max(0, items.length - preview.length);
return (
{items.length ? (
{preview.map((service) => (
{service}
))}
{remaining ? (
+ {remaining} more
) : null}
) : null}
);
}
// ─── Section head ──────────────────────────────────────────────────────
function ClSectionHead({ num, label, right }) {
return (
— {num}
{label}
{right && (
{right}
)}
);
}
// ─── Bio ──────────────────────────────────────────────────────────────
function ClBio({ model }) {
return (
Biography
— {model.firstName} {model.lastName}
);
}
function ClContactRail({ model }) {
const contact = model.contact || {};
const phone = contact.phoneCompact || "447919787899";
const email = contact.email || "info@elara-intl.com";
const telegram = contact.telegramUrl || "https://t.me/elaralondon";
const message = `Hello Elara, I would like to ask about ${model.firstName}.`;
const subject = `Elara enquiry: ${model.firstName}`;
const links = [
{ label:"WhatsApp", href:`https://wa.me/${phone}?text=${encodeURIComponent(message)}` },
{ label:"Telegram", href:telegram },
{ label:"Email", href:`mailto:${email}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(message)}` },
];
return (
);
}
// ─── Personality (free text from registration form) ────────────────────
// Visually distinct from Bio: italic, narrower column, smaller scale —
// reads as a personal note rather than the professional artist statement.
function ClPersonality({ model }) {
if (!model.personality) return null;
return (
);
}
// ─── Gallery ───────────────────────────────────────────────────────────
function ClGallery({ items, layout, onOpen }) {
const videoCount = items.filter((it) => it.kind === "video").length;
const right = videoCount
? `${items.length} works · ${videoCount} ${videoCount === 1 ? "film" : "films"}`
: `${items.length} works`;
return (
{!items.length ? :
layout === "cinematic" ? :
}
);
}
function ClEmptyPortfolio() {
return (
Gallery pending review
);
}
function ClJustified({ items, onOpen }) {
const ref = React.useRef(null);
const width = useElementWidth(ref);
const target = items.length <= 4 ? 620
: items.length <= 7 ? 520
: items.length <= 11 ? 440 : 380;
const gap = 8;
// Tag each item with its index so it survives justifyRows's spread-clones
// — the lightbox needs the rest-index back when a tile is clicked.
const tagged = React.useMemo(
() => items.map((it, idx) => ({ ...it, _idx: idx })),
[items],
);
const rows = width > 0 ? justifyRows(tagged, width, target, gap, 1.4) : [];
return (
{rows.map((row, ri) => (
{row.items.map((it) => (
onOpen(it._idx)}
/>
))}
))}
{items.map((it, idx) => (
onOpen(idx)}
/>
))}
);
}
function ClCinematic({ items, onOpen }) {
return (
{items.map((it, idx) => (
onOpen(idx)}
/>
))}
);
}
// One figure. Either justified ({w, h}), strict grid (aspect + crop), or
// cinematic (full = full width, natural aspect).
function GalleryFig({ item, w, h, aspect, crop, full, onOpen }) {
const styleProps = full
? { width:"100%" }
: aspect
? { aspectRatio: aspect }
: { width: w, height: h, flex: `0 0 ${w}px` };
return (
{
if (event.key === "Enter" || event.key === " ") {
event.preventDefault();
onOpen();
}
}}
role="button"
tabIndex={0}
aria-label={`Open portfolio image ${String(item.i).padStart(2, "0")}`}
className="cl-clickable"
style={{
margin:0, position:"relative", overflow:"hidden",
background:"#1a1816", cursor:"zoom-in",
...styleProps,
}}
>
);
}
// Number-only caption — top-right corner, faint mono pill.
function ClImageNumber({ n }) {
return (
{String(n).padStart(2, "0")}
);
}
// ─── Footer — just the credit line ─────────────────────────────────────
function ClFooter({ model }) {
return (
);
}
Object.assign(window, { ProfileClinical });