(function(){
/* global React */
// CCC — "First Monday." campaign.
// Companion campaign to the launch kit. Different rhetorical move:
// recovery as a WEEKLY RITUAL, not an announcement. Eight Mondays, set
// as a counted, numbered series. Artifacts (day-timer, notebook, phone,
// paperback) used at feature scale. Greenhouse photograph used full-bleed.
// One billboard format (3:1) introduced as a new surface.
const C = {
inkwell: "#1C492C",
vellum: "#F4F0C2",
sage: "#AFCC75",
oxblood: "#4B781C",
charcoal: "#22382A"
};
const FONT_DISPLAY = `"Frank Ruhl Libre", "Tiempos Headline", Georgia, serif`;
const FONT_BODY = `"Inter", "Söhne", "GT America", -apple-system, sans-serif`;
const FONT_MONO = `"JetBrains Mono", ui-monospace, "SF Mono", monospace`;
// ─── Tally ────────────────────────────────────────────────────────────────
function Tally({ size = 24, color = "currentColor", strokeWidth = 2.4 }) {
const w = size * 1.6;
return (
);
}
function Mono({ children, color = C.charcoal, size = 10, style = {} }) {
return (
{children}
);
}
function Rule({ color = "currentColor", thickness = 1, style = {} }) {
return ;
}
// Wavy oxblood underline — reusable; sits absolutely positioned beneath text.
function WavyUnder({ color = C.oxblood, thickness = 4, bottom = -8 }) {
return (
);
}
// ─────────────────────────────────────────────────────────────────────────
// 1. CAMPAIGN ANCHOR — "First Monday." manifesto poster (8.5×11, Vellum)
// ─────────────────────────────────────────────────────────────────────────
// Shared scannable QR — implemented in lib-brand-system.jsx (CCC_QRCode).
// Renders the website QR on print pieces; quiet placeholder if missing.
function QRCode(props) {
const Impl = window.CCC_QRCode;
if (!Impl) return ;
return ;
}
function Manifesto() {
return (
Chances. Choices. Change.
Manifesto · 2026
First
Monday.
Recovery is not a story arc.
It's a Monday.
And then another Monday.
And then another.
Eight Mondays is what we offer. Not a reinvention, not a program with a finish line — a series of Monday evenings. You show up. You write the week down. You cross things off. You come back the next Monday.
The Field Guide
for{" "}
staying sober
Eight chapters. One per Monday. Read it together, in an understanding room.
cccrecovery.caCohort 01 · June 1
);
}
// ─────────────────────────────────────────────────────────────────────────
// 10. INDEX CARD — landscape 1200×630, the campaign's table of contents
// ─────────────────────────────────────────────────────────────────────────
function IndexCard() {
const rows = [
["I", "First Monday.", "the manifesto"],
["II", "I've been there.", "Debra's portrait"],
["III", "Eight Mondays.", "the cohort"],
["IV", "Cross one thing off.", "the day-timer"],
["V", "Make it a list.", "the F.E.A.R. notebook"],
["VI", "Hi. It's Monday.", "the phone call"],
["VII", "A field guide.", "the paperback"]];
return (
Chances. Choices. Change.
First Monday.
Cohort 01 · begins June 1, 2026
cccrecovery.ca
The seven moves
{rows.map(([n, head, sub], i) =>
{n}
{head}
{sub}
)}
);
}
// ─────────────────────────────────────────────────────────────────────────
// CANVAS COMPOSITION
// ─────────────────────────────────────────────────────────────────────────
function App() {
const { DesignCanvas, DCSection, DCArtboard } = window;
return (
);
}
// ─────────────────────────────────────────────────────────────────────────
// 11. BILLBOARD — EVERGREEN (1800×600, Vellum)
// Same dimensions as the cohort billboard; brand-anchor message,
// no dates, no tuition. Use on transit signs / outdoor when no
// cohort is in market — the wordmark, the promise, the contact.
// ─────────────────────────────────────────────────────────────────────────
function BillboardEvergreen() {
return (
{/* LEFT — monumental headline */}
A peer-led recovery program · Toronto
Recovery{" "}
is possible.
Chances. Choices. Changes.
{/* RIGHT — meta block */}
You're worth it.
Eight Mondays. A small group. Honest conversation about the work of staying sober — led by Debra King, with lived experience and the language to match.
cccrecovery.ca(289) 207-2617
);
}
// ─────────────────────────────────────────────────────────────────────────
// 12. CAR MAGNET — BUMPER STRIP (1200×300, 4:1, Vellum)
// Standard 12 × 3 in bumper magnet. Three columns: brand mark · message
// · contact. Designed to read at speed from one car-length back.
// ─────────────────────────────────────────────────────────────────────────
function CarMagnetBumper() {
return (
{/* LEFT — brand mark */}
Chances. Choices. Changes.
{/* CENTER — message */}
Recovery
is possible.
You're worth it.
{/* RIGHT — contact */}
cccrecovery.ca
(289) 207-2617
Peer-led · Toronto
{/* FAR RIGHT — scannable QR */}
);
}
// ─────────────────────────────────────────────────────────────────────────
// 13. CAR MAGNET — SQUARE DOOR (1200×1200, 12 × 12 in, Inkwell)
// Larger door / tailgate magnet. Bold inkwell field with the wordmark
// set monumentally — reads like a license-plate medallion. Evergreen.
// ─────────────────────────────────────────────────────────────────────────
function CarMagnetSquare() {
return (
{/* bottom-anchored gradient for legibility */}
{/* top-left tally + tag — pinned on a small inkwell chip so they stay legible against the photo */}
{/* Bold oxblood "FIELD GUIDE" label, centered to artboard, -42° tilt (counter-clockwise) */}