/* ═══════════════════════════════════════════════
Camden Medicals — fusion design-language v1 LAYER
W1 · neutrals value-flip (navy-cast ink ramp + navy-alpha hairlines)
STAGED BEHIND A FLAG — DORMANT AT REST. This stylesheet is enqueued ONLY
when the fusion layer is active, i.e. when EITHER:
(1) wp_option `cm_fusion_v1` === '1' (operator flip; DEFAULT '0' = OFF), or
(2) an admin previews via `?cm_fusion_preview=1` (manage_options only).
Both paths add the body class `cm-fusion-v1` and enqueue this file AFTER
custom.css so the token re-points win the cascade. The guard + wiring live in
functions.php (search: cm_fusion_v1) and are UNCHANGED by W1.
AT REST (option '0', no preview param) this file is NOT enqueued and the
`cm-fusion-v1` body class is absent — the estate renders byte-identically.
Merging W1 therefore changes nothing for real users until the operator flips
the flag; rollback = set `cm_fusion_v1` back to '0'.
W1 SCOPE = COLOUR ONLY (CLS-impossible). It only RE-POINTS the six existing
neutral token VALUES to the W0a additive ramp defined in critical.css :root
(--cm-ink* / --cm-hairline*). It touches no fonts, box sizes, spacing, or
components (those are W0b / W2+). The old tokens are never deleted.
Spec of record: camden/design_language_fusion_2026_07_17.md §2.4 + §3.
Token substrate consumed here: assets/css/critical.css :root (W0a, PR #30).
═══════════════════════════════════════════════ */
/* ---------------------------------------------------------------------------
LIGHT-MODE ONLY — the guard is `html:not(.dark)`, deliberately narrower than
the bare `body.cm-fusion-v1` the W0a stub sketched. Reason: W0a harmonised
html.dark on a SHIFTED alpha ramp — in dark mode `--cm-border` is
rgba(255,179,0,.28) while `--cm-hairline` is rgba(255,179,0,.15), and
`--cm-border-light` is .15 vs `--cm-hairline-faint` .10. Because this layer
sets the token directly on (which overrides the value inherits
from html.dark), an unscoped re-point would LIGHTEN dark-mode borders — a
visible change. `html:not(.dark)` makes the whole block inert in dark mode,
so W0a's dark ramp is left exactly as-is ("dark untouched", spec §2.4).
The site is class-based dark: header.php adds `html.dark` ONLY on explicit
opt-in, light is the default, and there is no prefers-color-scheme path — so
`:not(.dark)` is a complete, reliable light-mode guard. (The ink tokens are
byte-identical in dark anyway; the hairlines are not, which is why the whole
block is light-scoped rather than partially.)
--------------------------------------------------------------------------- */
html:not(.dark) body.cm-fusion-v1 {
--cm-text: var(--cm-ink); /* was #111827 (critical.css :root L65) */
--cm-text-secondary: var(--cm-ink-2); /* was #4B5563 (L66) */
--cm-text-light: var(--cm-ink-3); /* was #6B7280 (L67) */
--cm-text-muted: var(--cm-ink-4); /* was #6B6F77 (L68) */
--cm-border: var(--cm-hairline); /* was #E5E7EB (L71) */
--cm-border-light: var(--cm-hairline-faint); /* was #F3F4F6 (L72) */
}
/* ═══════════════════════════════════════════════════════════════════════════
W2 · invariant card grammar + flat-hairline card + packshot shelf (PR feat/fusion-w2-cards)
Same flag, same preview, same body class as W0a/W1 — this block only matches
when `body.cm-fusion-v1` is present (flag '1' or admin ?cm_fusion_preview=1),
so AT REST none of it applies and the cards render exactly as today. (Per spec
§3 these could later split into a granular `cm_fusion_cards` flag for
independent production flipping; for now one flag = one preview.)
THE HARD CONSTRAINT — card BOX dimensions do not change. Every W2 rule below is
colour / border-colour / blend / font-weight / letter-spacing, or acts on a NEW
grammar node (the injected kicker + the empty evidence slot). NONE changes
width, height, aspect-ratio, grid-template-columns, or gap of a card or image:
• image aspect stays 4/5 (home .cm-product-img) and 1/1 (grid .cm-product-thumb-wrap);
• grid columns + gap are never referenced here;
• borders are colour re-points on the existing 1px border (width unchanged);
• box-shadow + mix-blend-mode are PAINT — they never reflow;
The ONLY dimensional edit to an existing box is the grid title's padding-top
(14px→4px), which simply MOVES the original image→text gap up so the new kicker
owns it — the card's text column then grows by exactly the one kicker line.
That kicker is server-rendered PHP (in the first paint, single-line via
nowrap+ellipsis), so it introduces ZERO runtime layout shift → CLS-neutral.
Spec: camden/design_language_fusion_2026_07_17.md §1 P5 · §2.6 · §3 (W2) · §4.
═══════════════════════════════════════════════════════════════════════════ */
/* ── P5 · line 1 : caps-whisper KICKER ──
The NEW grid/related/search kicker (injected by functions.php at
woocommerce_shop_loop_item_title, prio 9) is fully styled here. Single-line
(nowrap+ellipsis) ⇒ deterministic height. Colour uses the adaptive muted-ink
token, so it reads correctly in light AND dark. */
body.cm-fusion-v1 .cm-fusion-card__kicker {
display: block;
font-family: 'DM Sans', sans-serif;
font-size: 11px; /* matches the home-shelf .cm-product-cat kicker */
font-weight: 600;
letter-spacing: var(--cm-track-caps); /* P3 — the single caps-tracking token (.08em) */
text-transform: uppercase; /* caps happen in CSS ⇒ i18n-safe (no PHP strtoupper) */
color: var(--cm-ink-4); /* muted-ink whisper (defined light + dark) */
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Home Essentials shelf already ships a conforming kicker (.cm-product-cat) in
front-page.php — align ONLY its tracking to the P3 token + pin it to one line
so the grammar is invariant across surfaces. Font-size/weight/colour/margin
are left as-is (already a caps-whisper), so no box change beyond single-lining
an already-short category label. */
body.cm-fusion-v1 .cm-product-cat {
letter-spacing: var(--cm-track-caps);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Grid kicker column: its 14px top-padding REPRODUCES the exact image→text gap
the product title used to provide, and the title's top-padding is collapsed to
4px so the name snugs under the kicker. Net vertical change = +1 kicker line
(server-rendered ⇒ no CLS). Horizontal padding 16px matches the title/price. */
body.cm-fusion-v1 .woocommerce ul.products li.product .cm-fusion-card__kicker {
padding: 14px 16px 0 16px;
margin: 0;
}
body.cm-fusion-v1 .woocommerce ul.products li.product .woocommerce-loop-product__title {
padding-top: 4px; /* was 14px — the kicker now owns the image→text gap (grammar redistribution, not a card-size change) */
}
/* ── P5 · line 3 : price is DM Sans 500 (was 600) ──
Weight only — same font-size + line-height, short single-line price string ⇒
no reflow, no box change. Applies to grid + home shelf. */
body.cm-fusion-v1 .woocommerce ul.products li.product .price,
body.cm-fusion-v1 .cm-product-price {
font-weight: 500;
}
/* ── P5 · line 3 : evidence-chip SLOT (ships EMPTY) ──
No fabricated evidence content — the slot is structural only. While empty it
holds ZERO box (so it can never move the card); a later wave populates it. */
body.cm-fusion-v1 .cm-fusion-card__evidence:empty {
display: none;
}
body.cm-fusion-v1 .cm-fusion-card__evidence {
display: inline-flex;
align-items: center;
gap: var(--cm-space-2xs);
margin-top: var(--cm-space-2xs);
}
/* ── §2.6 · flat-hairline card (LIGHT-scoped) ──
Cards get the --cm-hairline-strong border + flat fill (fill already flat:
--cm-card-bg), with --cm-shadow-subtle appearing on hover ONLY. Border WIDTH is
unchanged (colour re-point of the existing 1px border); the hover shadow is
paint, never reflow; the existing ≤2px hover lift (translateY) is left as-is
(a compositor transform — CLS-neutral). Scoped html:not(.dark) exactly like
W1: dark already carries a defined gold-alpha hairline ramp (dark --cm-border
== --cm-hairline-strong == rgba(255,179,0,.28)) and a real dark hover shadow,
so re-pointing them would be a change with no upside — left untouched. */
html:not(.dark) body.cm-fusion-v1 .woocommerce ul.products li.product {
border-color: var(--cm-hairline-strong) !important; /* beats the base `border:1px solid …!important`; 1px width unchanged */
}
html:not(.dark) body.cm-fusion-v1 .woocommerce ul.products li.product:hover {
box-shadow: var(--cm-shadow-subtle); /* was --cm-shadow-card — paint only */
}
html:not(.dark) body.cm-fusion-v1 .cm-product-card {
border-color: var(--cm-hairline-strong);
}
html:not(.dark) body.cm-fusion-v1 .cm-product-card:hover {
border-color: var(--cm-hairline-strong);
box-shadow: var(--cm-shadow-subtle);
}
/* ── §4 Layer 1 · packshot shelf (the Essentials-shelf fix) ──
White-background packshots dissolve into a greige plinth instead of floating on
a white/cream field. LIGHT: media field = --cm-shelf (#F1F0EC greige) and the
packshot gets mix-blend-mode:multiply, so its pure-white floor multiplies
into the tint — an instant plinth, no reshoot. DARK EXCEPTION: multiply onto the
dark shelf (#0a1750) would sink the shot, so the media box keeps a FIXED WHITE
plate (--cm-fixed-white) and multiply-onto-white is a no-op ⇒ the shot shows.
CAVEAT (spec §4): multiply is applied to the standard product-image class — the
theme cannot per-image tell a pure-white JPEG from a transparent PNG. White-bg
JPEGs are correct (Camden's packshots are white-bg GMC-feed masters); a
transparent PNG with a baked shadow WOULD darken. Verify at the §3 eyeball
(mobile+desktop, light+dark). All of this is PAINT (background colour +
mix-blend-mode) — aspect-ratio and image sizing are untouched. */
/* Home Essentials shelf (.cm-product-img) — the actual white-on-white problem surface. */
html:not(.dark) body.cm-fusion-v1 .cm-product-img {
background: var(--cm-shelf); /* was --cm-bg (cream) — greige plinth */
}
html.dark body.cm-fusion-v1 .cm-product-img {
background: var(--cm-fixed-white); /* dark plate — multiply onto navy would sink the shot */
}
body.cm-fusion-v1 .cm-product-img img {
mix-blend-mode: multiply; /* light: dissolve white into greige · dark: no-op on white plate */
}
/* Shop grid / related / search (.cm-product-thumb-wrap already multiplies its
onto a --cm-fixed-white plate) — LIGHT only: swap that plate for the greige
shelf so the SAME existing multiply now dissolves white into the tint. Dark keeps
its current white plate untouched. */
html:not(.dark) body.cm-fusion-v1 .cm-product-thumb-wrap {
background: var(--cm-shelf); /* was --cm-fixed-white — light-mode plinth tint */
}
/* ═══════════════════════════════════════════════════════════════════════════
W5 · cart/checkout reassurance + org evidence-review mark (feat/fusion-w5-checkout)
Same flag / preview / body class as W0a/W1/W2 — matches only when
body.cm-fusion-v1 is present (flag '1' or admin ?cm_fusion_preview=1). AT REST
this file is not enqueued + the class is absent ⇒ cart + checkout render exactly
as today. The markup is injected in functions.php (search: Fusion W5) strictly
BELOW the flow: woocommerce_after_checkout_form / woocommerce_after_cart for the
row, and wp_footer (scoped is_cart()||is_checkout()) for the evidence mark.
THE HARD CONSTRAINT — ZERO layout churn on the payment flow. Every selector
below targets a NEW node that lives BELOW the order review / cart (the row) or
after (the mark). NOTHING here selects the order-review table, the
payment box, the place-order button, or any existing checkout/cart element, so
no existing box changes width, height, or position. The row is server-rendered
in the first paint ⇒ CLS-neutral. All values are tokens (no raw hex / ms /
cubic-bezier) and the block declares NO transition/animation at all. Adaptive
tokens (--cm-text*, --cm-hairline*, --cm-ink-3, --cm-clinical) resolve in both
light and dark, so — unlike W1/W2's token re-points — this block is not
light-scoped.
Spec: camden/design_language_fusion_2026_07_17.md §1 P6 · §3 (W5). See docs/design-system.md.
═══════════════════════════════════════════════════════════════════════════ */
/* ── Reassurance row — a NEW block appended below the cart/checkout flow ── */
body.cm-fusion-v1 .cm-fusion-reassure {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--cm-space-md);
max-width: var(--cm-container-reading); /* 720px reading column */
margin: var(--cm-space-lg) auto 0;
padding: var(--cm-space-md) var(--cm-space-sm);
border-top: 1px solid var(--cm-hairline);
}
body.cm-fusion-v1 .cm-fusion-reassure__item {
display: flex;
align-items: center;
gap: var(--cm-space-xs);
flex: 0 1 auto;
}
body.cm-fusion-v1 .cm-fusion-reassure__icon {
display: inline-flex;
flex: none;
color: var(--cm-clinical); /* P4 clinical hue — scarce trust accent */
}
body.cm-fusion-v1 .cm-fusion-reassure__text {
display: flex;
flex-direction: column;
line-height: var(--cm-leading-snug);
}
body.cm-fusion-v1 .cm-fusion-reassure__label {
font-family: 'DM Sans', sans-serif;
font-size: var(--cm-text-sm);
font-weight: 600;
color: var(--cm-text); /* fusion re-points this to --cm-ink in light */
}
body.cm-fusion-v1 .cm-fusion-reassure__sub {
font-family: 'DM Sans', sans-serif;
font-size: var(--cm-text-xs);
color: var(--cm-text-muted);
}
/* ── Org evidence-review mark — footer coda (after ), fine-print ── */
body.cm-fusion-v1 .cm-fusion-evidence-mark {
max-width: var(--cm-container-reading);
margin: 0 auto;
padding: var(--cm-space-md) var(--cm-space-sm);
text-align: center;
font-family: 'DM Sans', sans-serif;
font-size: var(--cm-text-xs);
line-height: var(--cm-leading-normal);
color: var(--cm-text-muted);
border-top: 1px solid var(--cm-hairline-faint);
}
body.cm-fusion-v1 .cm-fusion-evidence-mark__label {
display: block;
margin-bottom: var(--cm-space-2xs);
font-size: var(--cm-text-2xs);
font-weight: 600;
letter-spacing: var(--cm-track-caps); /* P3 — the single caps-tracking token */
text-transform: uppercase;
color: var(--cm-ink-3);
}
body.cm-fusion-v1 .cm-fusion-evidence-mark__body {
display: inline-block;
}
/* ═══════════════════════════════════════════════════════════════════════════
W4 · editorial-commerce embeds (P5 invariant card in prose + P6 evidence band)
(PR feat/fusion-w4-editorial)
Same flag / preview / body class as W0a/W1/W2 — every rule matches only under
body.cm-fusion-v1, so AT REST none of it applies (and the layer is not even
enqueued). The PHP (functions.php, W4-BLOCK) that emits the [cm_fusion_product]
shortcode + the archive rail early-returns when the flag is off, so the DOM is
byte-identical at rest; this stylesheet only paints the grammar when it exists.
NO NEW CARD BOX: the embeds reuse the exact home-shelf .cm-product-card grammar
(front-page.php) so the W2 card CSS above already styles kicker/name/price/
evidence-slot and the packshot shelf blend. The rail grid reuses .cm-products-grid
verbatim (4-up desktop / 2-up mobile, unchanged) — no column overrides here.
Everything below is colour / spacing / type only — no transform, no animation,
no transition (no raw ms/bezier) ⇒ motion validators = 0, and the rail is
server-rendered in first paint ⇒ CLS-neutral.
Spec: camden/design_language_fusion_2026_07_17.md §1 P5 · §1 P6 · §3 (W4) · §7.
═══════════════════════════════════════════════════════════════════════════ */
/* ── P5 · phrasing-safe name element (span variant, used by the prose shortcode) ──
The rail uses
; an in-prose embed uses so it
stays valid phrasing content inside a wpautop
. This mirrors the card
look 1:1 (custom.css .cm-product-body h3) so the grammar is invariant. */
body.cm-fusion-v1 .cm-product-body .cm-product-name {
display: block;
font-family: 'DM Sans', sans-serif;
font-size: 14px;
font-weight: 500;
color: var(--cm-text);
line-height: 1.45;
margin: 0 0 auto;
padding-bottom: 12px;
}
/* ── P5 · single-card prose embed wrapper ──
Constrains one invariant card to a readable pull-embed width inside editorial
prose (block-level span ⇒ valid inside a paragraph, no float churn). */
body.cm-fusion-v1 .cm-fusion-embed {
display: block;
max-width: 320px;
margin: var(--cm-space-md) 0;
}
/* ── The archive editorial rail — between the hero prose and the product grid ── */
body.cm-fusion-v1 .cm-fusion-editorial {
padding: var(--cm-space-lg) 0 0; /* sits under the hero prose; grid follows below */
}
body.cm-fusion-v1 .cm-fusion-editorial__eyebrow {
display: block;
margin-bottom: var(--cm-space-sm);
}
/* ── P6 · evidence band ──
SHIPS EMPTY (the honest default — authorised GB health claims are per-SKU and
belong on the PDP, not an aggregate archive). :empty ⇒ zero box, no reflow.
The populated styling below only ever paints once a compliance-passed source
fills cm_fusion_evidence_rows. All tokens are defined in BOTH themes. */
body.cm-fusion-v1 .cm-fusion-editorial__evidence:empty {
display: none;
}
body.cm-fusion-v1 .cm-fusion-editorial__evidence {
margin-top: var(--cm-space-lg);
padding: var(--cm-space-md);
background: var(--cm-clinical-wash); /* pale clinical wash (P4) */
border: 1px solid var(--cm-hairline);
border-radius: var(--cm-radius-sm);
}
body.cm-fusion-v1 .cm-fusion-evidence__stat {
margin: 0 0 var(--cm-space-sm);
}
body.cm-fusion-v1 .cm-fusion-evidence__stat:last-child {
margin-bottom: 0;
}
body.cm-fusion-v1 .cm-fusion-evidence__claim {
margin: 0;
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: var(--cm-text-md);
letter-spacing: var(--cm-track-display); /* P3 display tracking token */
line-height: 1.35;
color: var(--cm-ink);
}
body.cm-fusion-v1 .cm-fusion-evidence__claim sup {
color: var(--cm-clinical); /* clinical hue on the asterisk (P4) */
}
body.cm-fusion-v1 .cm-fusion-evidence__foot {
margin-top: var(--cm-space-xs);
font-family: 'DM Sans', sans-serif;
font-size: var(--cm-text-xs);
letter-spacing: 0; /* fine-print: zero tracking (P3) */
color: var(--cm-ink-4); /* muted fine-print ink */
}
/* ═══════════════════════════════════════════════════════════════════════════
W3 · PDP buy-box grammar (feat/fusion-w3-pdp)
Same flag / preview / body class as W0a/W1/W2/W5 — every rule below matches ONLY
under `body.cm-fusion-v1` (option '1' or admin ?cm_fusion_preview=1). AT REST this
file is not enqueued and the class is absent, so the PDP renders exactly as today.
INVISIBLE-AT-REST + CLS: every element these rules style is server-rendered into the
INITIAL HTML by the flag-gated functions.php hooks (kicker · evidence slot · the reused
W5 reassurance row · accordions). This stylesheet is a normal render-blocking
in (enqueued after camden-custom-css), so its layout is resolved at FIRST
paint — no rule here appears late, so none can shift the buy-box after load:
• kicker / reassurance / accordion summaries are server-rendered ⇒ no insertion shift;
• accordions are native collapsed-by-default ⇒ they never expand on load;
• the price change is a font-size/weight re-point on already-present text (see below).
ADD-TO-CART INTEGRITY: nothing here targets the add-to-cart