/* ============================================================
Hara — Peptide Sweep (regulatory toggle)
Admin flips a single Firestore flag (pages/visibility.peptideSweep);
js/data/page-visibility.js (SPA) and js/peptide-sweep.js (static pages)
mirror it onto . Everything below
is attribute-driven so the whole site swaps text + imagery instantly,
both directions, with no re-render.
SAFE DEFAULT = swept/clean. If the attribute is absent or "true" (cold
load, JS failure, Firestore unreachable), the clean state shows and no
peptide wording / bottle imagery is visible. Only an explicit
data-peptide-sweep="false" reveals the originals.
============================================================ */
/* --- Per-brand leaf used to replace bottle imagery --- */
:root,
body[data-brand="clinic"],
.lp[data-palette="clinic"] {
--sweep-leaf: url('../assets/accent-tile.svg'); /* taupe mark */
}
body[data-brand="wellness"],
.lp[data-palette="wellness"] {
--sweep-leaf: url('../assets/accent-tile-wellness.svg'); /* olive mark */
}
/* ------------------------------------------------------------
1. TEXT VARIANTS
Wrap swappable copy in …
… (helper: js/utils/sweep.js).
revert restores the element's natural display (inline / block / li).
------------------------------------------------------------ */
.sweep-original { display: none; }
body[data-peptide-sweep="false"] .sweep-original { display: revert; }
body[data-peptide-sweep="false"] .sweep-clean { display: none; }
/* ------------------------------------------------------------
2. SERVICES HERO CONSTELLATION
Hide the floating bottles when swept; the halo emblem, orbital
rings and leaf pattern remain and already fill the hero.
------------------------------------------------------------ */
.elixir-slot { display: none; }
body[data-peptide-sweep="false"] .elixir-slot { display: block; }
/* ------------------------------------------------------------
3. SERVICE NOTCH-CIRCLES (Firestore-driven imgs)
service-card.js emits two imgs for bottle assets; show the leaf
when swept, the original bottle when not. Keep them block so the
circle layout is preserved.
------------------------------------------------------------ */
.service-card__image--orig { display: none; }
.service-card__image--leaf { display: block; }
body[data-peptide-sweep="false"] .service-card__image--orig { display: block; }
body[data-peptide-sweep="false"] .service-card__image--leaf { display: none; }
/* ------------------------------------------------------------
4. CARD BACKGROUND IMAGERY (bottle -> sized-up leaf accent)
Bottle cards are tagged [data-sweep-img]. Each rule restates the
component's own aura layer so the gem + glow are untouched; only
the product-image layer swaps. Unswept restores the inline bottle.
------------------------------------------------------------ */
/* featured.html landing cards (.lc-card) */
.lc-card[data-sweep-img] {
background-image:
radial-gradient(ellipse 62% 90px at 50% 62px, var(--lc-aura) 0%, transparent 72%),
var(--sweep-leaf);
background-size: auto, auto 92px;
background-position: center top, center 20px;
}
body[data-peptide-sweep="false"] .lc-card[data-sweep-img] {
background-image:
radial-gradient(ellipse 62% 90px at 50% 62px, var(--lc-aura) 0%, transparent 72%),
var(--lc-card-img, none);
background-size: auto, auto 84px;
background-position: center top, center 22px;
}
/* SPA signature panel cards (.signature__card) */
.signature__card[data-sweep-img] {
background-image:
radial-gradient(ellipse 62% 90px at 50% 62px, var(--aura) 0%, transparent 72%),
var(--sweep-leaf);
background-size: auto, auto 92px;
background-position: center top, center 20px;
}
body[data-peptide-sweep="false"] .signature__card[data-sweep-img] {
background-image:
radial-gradient(ellipse 62% 90px at 50% 62px, var(--aura) 0%, transparent 72%),
var(--item-img, none);
background-size: auto, auto 84px;
background-position: center top, center 22px;
}
/* Nav flyout thumbnails (.ff-tile__art, 44x44) */
.ff-tile[data-sweep-img] .ff-tile__art {
background-image:
radial-gradient(circle at 50% 45%, rgba(196, 176, 120, 0.20), transparent 70%),
var(--sweep-leaf);
background-size: auto, auto 30px;
background-position: center, center;
}
body[data-peptide-sweep="false"] .ff-tile[data-sweep-img] .ff-tile__art {
background-image:
radial-gradient(circle at 50% 45%, rgba(196, 176, 120, 0.20), transparent 70%),
var(--item-img);
background-size: auto, auto 32px;
background-position: center, center;
}