// cms-skin-daylight.jsx
// ─────────────────────────────────────────────────────────────────────────
// A SECOND skin: "Daylight Editorial".
//
// This file proves the platform's core promise — the same content document
// renders through an entirely different presentation with zero data changes.
// It honours the identical component contract as cms-skin.jsx:
// ({ content, theme, colors }) for each of the nine module types,
// reading the very same content fields (content.headline, content.projects[],
// content.team[], …). Only the *look* differs.
//
// Aesthetic: the deliberate opposite of "Editorial Noir". Where Noir is dark,
// cinematic and kinetic (condensed grotesk + monospace, film grain, full-bleed
// video, amber-on-black), Daylight is a bright print-monograph — warm paper,
// ink type, a high-contrast literary serif (Newsreader) paired with a clean
// grotesk (Spline Sans), hairline rules, big index numerals, and media shown
// as framed plates with captions beneath. Same accent colour, same data.
//
// Registered via CMS.defineSkin("daylight", …) at the foot of the file, so the
// admin's Skin selector lists it automatically. Load AFTER cms-skin.jsx.
// ─────────────────────────────────────────────────────────────────────────
const { useState, useEffect, useRef } = React;
// ── Palette + type tokens (the skin's own identity) ────────────────
const PAPER = "#F6F1E7"; // warm off-white
const PAPER2 = "#ECE5D7"; // deeper warm panel
const INK = "#262017"; // warm near-black
const INK_70 = "rgba(38,32,23,0.70)";
const INK_55 = "rgba(38,32,23,0.55)";
const INK_40 = "rgba(38,32,23,0.42)";
const HAIR = "rgba(38,32,23,0.16)";
const HAIR_SOFT = "rgba(38,32,23,0.09)";
const SERIF = "'Newsreader', Georgia, 'Times New Roman', serif";
const SANS = "'Spline Sans', system-ui, -apple-system, sans-serif";
// Accent tint helper — color-mix on the (hex) accent; modern browsers support it.
const tint = (accent, pct) => `color-mix(in oklab, ${accent} ${pct}%, transparent)`;
const onAccentInk = "#231E16"; // dark text that sits on an accent block
// ── Shared text helpers (re-implemented for this skin's scope) ─────
// Emphasise *asterisk-wrapped* spans — same authoring convention as Noir, so
// the exact same content lights up here, just in this skin's serif italic.
function dlAccented(text, accent) {
const parts = String(text == null ? "" : text).split(/(\*[^*\n]+\*)/g);
return parts.map((chunk, i) =>
/^\*[^*\n]+\*$/.test(chunk)
? {chunk.slice(1, -1)}
: {chunk}
);
}
function dlLines(text) {
const lines = String(text == null ? "" : text).split("\n");
return lines.map((ln, i) => (
{ln}{i < lines.length - 1 ?
: null}
));
}
function dlInitials(name) {
return String(name || "").trim().split(/\s+/).map((w) => w[0]).slice(0, 2).join("").toUpperCase() || "?";
}
function dlFocal(obj) {
const o = (obj && typeof obj === "object") ? obj : {};
return `${(typeof o.focalX === "number" ? o.focalX : 0.5) * 100}% ${(typeof o.focalY === "number" ? o.focalY : 0.5) * 100}%`;
}
function dlNum(i) { return String(i + 1).padStart(2, "0"); }
// ── Responsive hook ────────────────────────────────────────────────
function useDlViewport() {
const get = () => (typeof window !== "undefined" ? window.innerWidth : 1280);
const [w, setW] = useState(get);
useEffect(() => {
let raf = 0;
const onResize = () => { cancelAnimationFrame(raf); raf = requestAnimationFrame(() => setW(get())); };
window.addEventListener("resize", onResize);
return () => { window.removeEventListener("resize", onResize); cancelAnimationFrame(raf); };
}, []);
return { w, mobile: w <= 820, narrow: w <= 560 };
}
const dlPad = (narrow) => (narrow ? "84px 22px" : "132px 64px");
// A small uppercase tracked label (the daylight equivalent of Noir's mono eyebrow).
function DlKicker({ children, color, style }) {
if (!String(children || "").trim()) return null;
return (
{children}
);
}
// A thin rule with an accent tick at the left — recurring section divider.
function DlRule({ accent, style }) {
return (
);
}
// ── Wordmark (ink) with the trailing dot in accent ─────────────────
// Reuses the brand path; layers an accent-filled copy clipped to just the dot.
function DlWordmark({ height = 30, accent }) {
const VB_W = 161.26669, VB_H = 32.844387;
const aspect = VB_W / VB_H;
const CLIP_TOP = 98.25, CLIP_BOT = 94.2;
const draw = (fill, clip) => (
);
return (
{draw(INK, "none")}
{draw(accent, `polygon(${CLIP_TOP}% 0%, 110% 0%, 110% 100%, ${CLIP_BOT}% 100%)`)}
);
}
// ── Body background guard ──────────────────────────────────────────
// The global is dark (Noir's default). Whenever this skin is mounted,
// paint the page paper so overscroll / gaps never flash dark; restore on swap.
function useDlPaperBody() {
useEffect(() => {
const b = document.body.style;
const prevBg = b.background, prevColor = b.color;
b.background = PAPER; b.color = INK;
return () => { b.background = prevBg; b.color = prevColor; };
}, []);
}
// ── Nav ─────────────────────────────────────────────────────────────
function Nav({ content, theme, colors }) {
const [scrolled, setScrolled] = useState(false);
const { narrow } = useDlViewport();
useDlPaperBody();
useEffect(() => {
const h = () => setScrolled(window.scrollY > 60);
window.addEventListener("scroll", h, { passive: true });
return () => window.removeEventListener("scroll", h);
}, []);
return (
);
}
// ── Hero ────────────────────────────────────────────────────────────
// Editorial split: oversized serif headline on paper (left), a framed media
// "plate" (right) holding the showreel — contained, not full-bleed.
function Hero({ content, theme, colors }) {
const [visible, setVisible] = useState(false);
const { mobile, narrow } = useDlViewport();
useEffect(() => { const t = setTimeout(() => setVisible(true), 100); return () => clearTimeout(t); }, []);
const hw = Math.max(300, Math.min(640, theme.headlineWeight || 460));
const hasVideo = !!(content.videoUrl && String(content.videoUrl).trim());
const ease = "opacity 1s ease, transform 1s cubic-bezier(0.16,1,0.3,1)";
const rise = (d) => ({ opacity: visible ? 1 : 0, transform: visible ? "none" : "translateY(22px)", transition: ease, transitionDelay: `${d}ms` });
return (
{/* Left — type */}
{dlAccented(content.headline, colors.accent)}
{/* Right — framed media plate */}
( 01 ) Showreel
{new Date().getFullYear()}
{hasVideo ? (
Selected motion work, 2024–{String(new Date().getFullYear()).slice(2)}
);
}
// ── Ticker ──────────────────────────────────────────────────────────
function Ticker({ content, colors }) {
const items = content.items || [];
const repeated = [...items, ...items, ...items];
return (
{repeated.map((item, i) => (
{item}
))}
);
}
// ── Project lightbox — paper chrome, dark media stage ──────────────
function DlLightbox({ project, colors, onClose }) {
const hasVideo = !!(project.video && String(project.video).trim());
const coverUrl = ((project.cover && project.cover.url) || "").trim();
const focal = dlFocal(project.cover);
const details = Array.isArray(project.details) ? project.details.filter((d) => d && (d.item || d.value)) : [];
const gallery = Array.isArray(project.gallery) ? project.gallery.filter((g) => g && (g.url || "").trim()) : [];
const slides = [];
if (hasVideo) slides.push({ type: "video", url: project.video, poster: coverUrl });
gallery.forEach((g) => slides.push(g.type === "video"
? { type: "video", url: g.url, caption: g.caption || "" }
: { type: "image", url: g.url, caption: g.caption || "" }));
const count = slides.length;
const [idx, setIdx] = useState(0);
const clamp = (n) => Math.max(0, Math.min(count - 1, n));
const go = (n) => setIdx((c) => clamp(typeof n === "function" ? n(c) : n));
const videoRefs = useRef({});
const drag = useRef(null);
useEffect(() => {
const onKey = (e) => {
if (e.key === "Escape") onClose();
else if (e.key === "ArrowRight") go((c) => c + 1);
else if (e.key === "ArrowLeft") go((c) => c - 1);
};
window.addEventListener("keydown", onKey);
const prev = document.body.style.overflow; document.body.style.overflow = "hidden";
return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = prev; };
}, [onClose, count]);
useEffect(() => {
Object.entries(videoRefs.current).forEach(([k, v]) => { if (v && Number(k) !== idx) { try { v.pause(); } catch (e) {} } });
}, [idx]);
const onDown = (e) => { drag.current = { x: e.clientX, moved: 0 }; };
const onMove = (e) => { if (drag.current) drag.current.moved = e.clientX - drag.current.x; };
const onUp = () => { const d = drag.current; drag.current = null; if (!d) return; if (d.moved < -50) go((c) => c + 1); else if (d.moved > 50) go((c) => c - 1); };
const noGrab = (e) => e.preventDefault();
const arrow = (side, disabled) => ({
position: "absolute", top: "50%", [side]: 12, transform: "translateY(-50%)",
width: 44, height: 44, borderRadius: "50%", zIndex: 3,
display: count > 1 ? "flex" : "none", alignItems: "center", justifyContent: "center",
border: `1px solid rgba(246,241,231,0.5)`, background: "rgba(246,241,231,0.88)",
color: INK, fontSize: 22, lineHeight: 1, cursor: disabled ? "default" : "pointer",
opacity: disabled ? 0.3 : 1, transition: "opacity 0.2s",
});
return (
{project.title}
{[project.type, project.client, project.year].filter(Boolean).join(" · ")}
e.stopPropagation()} style={{ width: "min(1080px, 100%)", display: "flex", flexDirection: "column", gap: 16, paddingBottom: "clamp(12px, 5vh, 48px)" }}>
{count === 0 ? (
coverUrl ?
:
No media yet
) : (
{slides.map((s, i) => (
{s.type === "video" ? (
))}
)}
{count > 1 && (
{idx + 1} / {count}
)}
{count > 0 && (
{slides[idx] && slides[idx].type === "image" ? slides[idx].caption : ""}
)}
{count > 1 && (
{slides.map((s, i) => {
const thumb = s.type === "image" ? s.url : s.poster;
return (
);
})}
)}
{details.length > 0 && (
{details.map((d, i) => (
{d.item}
{d.value}
))}
)}
);
}
// ── Work — editorial plate grid, captions beneath ─────────────────
function parseRatio(str) {
const m = String(str || "3:2").split(/[:/]/).map(Number);
const n = (m[0] && m[1]) ? m[0] / m[1] : 1.5;
return n > 0 ? n : 1.5;
}
function WorkPlate({ project, index, colors, onOpen }) {
const [hovered, setHovered] = useState(false);
const [failed, setFailed] = useState(false);
const coverUrl = ((project.cover && project.cover.url) || "").trim();
const showCover = !!coverUrl && !failed;
const focal = dlFocal(project.cover);
const hasVideo = !!(project.video && String(project.video).trim());
const gallery = Array.isArray(project.gallery) ? project.gallery.filter((g) => g && (g.url || "").trim()) : [];
const details = Array.isArray(project.details) ? project.details.filter((d) => d && (d.item || d.value)) : [];
const openable = hasVideo || gallery.length > 0 || details.length > 0;
const open = () => { if (openable) onOpen(project); };
return (
setHovered(true)} onMouseLeave={() => setHovered(false)}
onClick={open} role={openable ? "button" : undefined} tabIndex={openable ? 0 : undefined}
onKeyDown={(e) => { if (openable && (e.key === "Enter" || e.key === " ")) { e.preventDefault(); open(); } }}
aria-label={openable ? `View ${project.title}` : undefined}
style={{ cursor: openable ? "pointer" : "default" }}
>
{showCover ? (
setFailed(true)}
style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: focal,
transform: hovered ? "scale(1.04)" : "scale(1)", transition: "transform 0.7s cubic-bezier(0.16,1,0.3,1)" }} />
) : (
<>
{String(project.type || "")}
add cover image
)}
{/* caption beneath, plate style */}
{dlNum(index)}
{project.title}
{project.year}
{[project.type, project.client].filter(Boolean).join(" · ")}
{content.eyebrow}
{content.heading}
{projects.map((p, i) => )}
{active && setActive(null)} />}
);
}
// ── About + Team ────────────────────────────────────────────────────
function DlProfileCard({ member, colors, onClose }) {
const url = ((member.headshot && member.headshot.url) || "").trim();
const focal = dlFocal(member.headshot);
const facts = Array.isArray(member.stats) ? member.stats.filter((s) => s && (s.item || s.value)) : [];
useEffect(() => {
const onKey = (e) => { if (e.key === "Escape") onClose(); };
window.addEventListener("keydown", onKey);
const prev = document.body.style.overflow; document.body.style.overflow = "hidden";
return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = prev; };
}, [onClose]);
return (
e.stopPropagation()} style={{
width: "min(680px, 100%)", display: "flex", flexWrap: "wrap", background: PAPER,
border: `1px solid ${HAIR}`, overflow: "hidden", position: "relative", boxShadow: "0 50px 120px -50px rgba(38,32,23,0.6)",
}}>
{url ?
:
{dlInitials(member.name)}
}
{member.name}
{member.title &&
{member.title}
}
{member.bio &&
{member.bio}
}
{facts.length > 0 && (
{facts.map((f, i) => (
{f.item}
{f.value}
))}
)}
);
}
function DlTeamMember({ member, colors, onOpen }) {
const [hovered, setHovered] = useState(false);
const url = ((member.headshot && member.headshot.url) || "").trim();
const focal = dlFocal(member.headshot);
return (
);
}
function About({ content, colors }) {
const [profile, setProfile] = useState(null);
const { narrow } = useDlViewport();
const team = Array.isArray(content.team) ? content.team.filter((m) => m && (m.name || (m.headshot && m.headshot.url))) : [];
const stats = Array.isArray(content.stats) ? content.stats : [];
return (
{content.eyebrow}
{dlAccented(content.lead, colors.accent)}
{content.body}
{team.length > 0 && (
The team
{team.map((m, i) =>
setProfile(m)} />)}
)}
{stats.length > 0 && (
{stats.map((s, i) => (
))}
)}
{profile && setProfile(null)} />}
);
}
// ── Services — numbered editorial index ────────────────────────────
const DL_SVC_ICONS = {
film: ,
camera: ,
clapper: ,
megaphone: ,
scissors: ,
sparkle: ,
globe: ,
play: ,
};
function DlSvcIcon({ name, size = 22 }) {
const g = DL_SVC_ICONS[name] || DL_SVC_ICONS.film;
return ;
}
function DlServiceRow({ item, index, colors, last }) {
const [hovered, setHovered] = useState(false);
const { mobile } = useDlViewport();
const imgUrl = ((item.image && item.image.url) || "").trim();
return (
setHovered(true)} onMouseLeave={() => setHovered(false)}
style={{
display: "grid", gridTemplateColumns: mobile ? "auto 1fr" : "auto auto 1fr auto", gap: mobile ? "4px 18px" : "0 36px",
alignItems: "start", padding: mobile ? "28px 0" : "38px 0", borderBottom: last ? "none" : `1px solid ${HAIR}`,
paddingLeft: hovered ? 12 : 0, transition: "padding-left 0.35s cubic-bezier(0.16,1,0.3,1)",
}}
>
{dlNum(index)}
{!mobile && (
{imgUrl ?
:
}
)}
{content.eyebrow}
{items.map((item, i) =>
)}
);
}
// ── Values — numbered principles ───────────────────────────────────
function DlValueRow({ value, colors, last }) {
const [hovered, setHovered] = useState(false);
const { mobile } = useDlViewport();
return (
setHovered(true)} onMouseLeave={() => setHovered(false)}
style={{
display: "grid", gridTemplateColumns: mobile ? "1fr" : "auto minmax(0,0.85fr) minmax(0,1.15fr)",
gap: mobile ? 14 : "clamp(28px,5vw,72px)", alignItems: "start", padding: mobile ? "34px 0" : "50px 0",
borderBottom: last ? "none" : `1px solid ${HAIR}`, paddingLeft: hovered ? 12 : 0, transition: "padding-left 0.35s cubic-bezier(0.16,1,0.3,1)",
}}
>
{value.index}
{value.label}
{value.title}
{value.body}
{content.eyebrow}
{content.heading}
);
}
// ── Contact ─────────────────────────────────────────────────────────
function DlObfuscatedEmail({ email, colors, narrow }) {
const safe = String(email || "");
const at = safe.indexOf("@");
const dom = at >= 0 ? safe.slice(at + 1) : "";
const dot = dom.lastIndexOf(".");
const user = at >= 0 ? safe.slice(0, at) : safe;
const host = dot >= 0 ? dom.slice(0, dot) : dom;
const tld = dot >= 0 ? dom.slice(dot + 1) : "";
const reveal = (e) => { const a = e.currentTarget; if (!a.getAttribute("href")) a.setAttribute("href", "mailto:" + safe); };
return (
{ reveal(e); e.currentTarget.style.transform = "translateY(-2px)"; e.currentTarget.style.opacity = "0.9"; }}
onMouseLeave={(e) => { e.currentTarget.style.transform = "none"; e.currentTarget.style.opacity = "1"; }}
onFocus={reveal} onTouchStart={reveal} onKeyDown={(e) => { if (e.key === "Enter") reveal(e); }}
style={{
display: "inline-block", padding: narrow ? "16px 34px" : "18px 46px", background: colors.accent, color: onAccentInk,
fontFamily: SANS, fontWeight: 600, fontSize: 16, letterSpacing: "0.04em", textDecoration: "none",
transition: "transform 0.2s, opacity 0.2s", cursor: "pointer",
}}>
{user}{host}{tld}
);
}
function Contact({ content, colors }) {
const { narrow } = useDlViewport();
return (
);
}
// ── Footer ──────────────────────────────────────────────────────────
function Footer({ content, colors }) {
const year = new Date().getFullYear();
const { narrow } = useDlViewport();
return (
);
}
// ── Register the skin ───────────────────────────────────────────────
window.CMS.defineSkin("daylight", {
label: "Daylight Editorial",
components: { nav: Nav, hero: Hero, ticker: Ticker, work: Work, about: About, services: Services, values: Values, contact: Contact, footer: Footer },
});