/* funnel-system.css — "Black-Card" funnel visual system * ===================================================== * Reusable across every funnel niche (coaching, wedding, …). Niche differences * come from --accent (set inline per face) + config copy — never new CSS. * * Editorial dark luxury: φ spacing, serif display + sans body, gold hairlines, * gradient-mesh glow, SVG motifs. No ASCII/emoji art — all graphics are CSS/SVG. * code-style.md: class-based state only; no inline style overrides on re-render. */ :root { --phi: 1.618; --bg: #08070a; --bg-2: #0d0c11; --card: rgba(20, 18, 24, 0.72); --card-hi: rgba(28, 25, 32, 0.9); --line: rgba(255, 255, 255, 0.08); --line-gold: rgba(200, 162, 75, 0.32); --accent: #c8a24b; /* overridable per niche */ --accent-soft: rgba(200, 162, 75, 0.14); --text: rgba(244, 240, 233, 0.92); --muted: rgba(244, 240, 233, 0.46); --faint: rgba(244, 240, 233, 0.26); --ok: #6bbf8a; --warn: #d9a441; --err: #d96a6a; --serif: 'Cormorant Garamond', 'Playfair Display', ui-serif, Georgia, 'Times New Roman', serif; --sans: 'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --sp1: 8px; --sp2: 13px; --sp3: 21px; --sp4: 34px; --sp5: 55px; --sp6: 89px; --maxw: 1120px; } /* Light theme — editorial "ivory card". Toggled via [data-theme="light"] on . * Only tokens change; every component inherits — no per-component light rules. */ :root[data-theme="light"] { --bg: #f6f3ec; --bg-2: #efe9dd; --card: rgba(255, 253, 248, 0.86); --card-hi: rgba(255, 255, 255, 0.96); --line: rgba(40, 32, 18, 0.12); --line-gold: rgba(168, 130, 44, 0.4); --accent: #9a7421; --accent-soft: rgba(154, 116, 33, 0.12); --text: rgba(38, 32, 22, 0.94); --muted: rgba(38, 32, 22, 0.56); --faint: rgba(38, 32, 22, 0.34); } :root[data-theme="light"] .btn-primary { color: #fffdf8; } :root[data-theme="light"] .rail-step.done .rail-node, :root[data-theme="light"] .slot.sel, :root[data-theme="light"] .kind.sel { color: #fffdf8; } :root[data-theme="light"] .bp-metric .v { color: var(--text); } * { box-sizing: border-box; margin: 0; padding: 0; } html { transition: background .3s ease; } body { background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; } /* Ambient gradient mesh — pure CSS, GPU-cheap (no animation on paint path) */ .fx-mesh { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 50% at 78% 8%, var(--accent-soft), transparent 60%), radial-gradient(50% 45% at 12% 22%, rgba(120, 110, 200, 0.08), transparent 62%), radial-gradient(70% 60% at 50% 110%, rgba(200, 162, 75, 0.06), transparent 70%), linear-gradient(180deg, var(--bg), var(--bg-2)); } /* ── Topbar ─────────────────────────────────────────────────────────────── */ .tb { position: sticky; top: 0; z-index: 40; height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--sp4); background: rgba(8, 7, 10, 0.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .tb-brand { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 20px; letter-spacing: .01em; } .tb-brand .mark { width: 22px; height: 22px; display: block; color: var(--accent); } .tb-right { display: flex; align-items: center; gap: var(--sp3); } .tb-chip { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding: 5px 12px; border: 1px solid var(--line-gold); border-radius: 999px; } .tb-dot { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: var(--muted); } .tb-dot i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); display: block; } .tb-dot.online i { background: var(--ok); box-shadow: 0 0 8px var(--ok); } .tb-dot.offline i { background: var(--err); } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} } .tb-dot.probing i { background: var(--warn); animation: pulse 1.3s infinite; } .theme-tog { display: inline-grid; place-items: center; width: 34px; height: 34px; cursor: pointer; border: 1px solid var(--line-gold); border-radius: 999px; background: transparent; color: var(--muted); transition: color .2s, border-color .2s, background .2s; } .theme-tog:hover { color: var(--accent); background: var(--accent-soft); } .theme-tog svg { width: 16px; height: 16px; } .theme-tog .ico-sun { display: none; } :root[data-theme="light"] .theme-tog .ico-sun { display: block; } :root[data-theme="light"] .theme-tog .ico-moon { display: none; } /* ── Hero ───────────────────────────────────────────────────────────────── */ .hero { position: relative; max-width: var(--maxw); margin: 0 auto; padding: var(--sp6) var(--sp4) var(--sp5); display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp5); align-items: center; } .hero-eyebrow { font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--sp3); } .hero h1 { font-family: var(--serif); font-weight: 500; font-size: 58px; line-height: 1.04; letter-spacing: -0.01em; margin-bottom: var(--sp3); } .hero h1 .em { color: var(--accent); font-style: italic; } .hero p.sub { font-size: 18px; color: var(--muted); max-width: 30em; margin-bottom: var(--sp4); } .hero-art { position: relative; display: flex; align-items: center; justify-content: center; } .hero-art svg { width: 100%; max-width: 360px; height: auto; } .spin-slow { transform-origin: center; animation: spin 60s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .trust { display: flex; gap: var(--sp4); margin-top: var(--sp4); color: var(--faint); font-size: 12px; letter-spacing: .04em; } .trust b { color: var(--text); font-weight: 600; } /* ── Buttons ────────────────────────────────────────────────────────────── */ .btn { font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: .02em; padding: 14px 26px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; transition: transform .14s ease, box-shadow .2s ease, background .2s ease; -webkit-user-select: none; user-select: none; } .btn-primary { color: #1a1505; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 62%, #fff), var(--accent)); box-shadow: 0 6px 22px color-mix(in srgb, var(--accent) 32%, transparent); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 42%, transparent); } .btn-ghost { color: var(--text); background: transparent; border-color: var(--line-gold); } .btn-ghost:hover { background: var(--accent-soft); } .btn:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; } /* ── Funnel shell + stage rail ──────────────────────────────────────────── */ .funnel { max-width: 760px; margin: 0 auto var(--sp6); padding: 0 var(--sp4); } .rail { display: flex; align-items: center; justify-content: center; gap: 0; margin: var(--sp4) 0 var(--sp5); } .rail-step { display: flex; align-items: center; gap: 10px; } .rail-node { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-gold); display: grid; place-items: center; color: var(--muted); font-size: 12px; flex-shrink: 0; background: var(--bg-2); transition: all .3s ease; } .rail-node svg { width: 14px; height: 14px; opacity: 0; transition: opacity .3s; } .rail-label { font-size: 12px; color: var(--faint); white-space: nowrap; } .rail-link { width: 30px; height: 1px; background: var(--line); margin: 0 10px; } .rail-step.active .rail-node { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } .rail-step.active .rail-label { color: var(--text); } .rail-step.done .rail-node { background: var(--accent); border-color: var(--accent); color: #1a1505; } .rail-step.done .rail-node .num { display: none; } .rail-step.done .rail-node svg { opacity: 1; } .rail-step.done .rail-label { color: var(--muted); } @media (max-width: 680px) { .rail-label { display: none; } .rail-link { width: 18px; } } /* ── Step panels ────────────────────────────────────────────────────────── */ .step { display: none; } .step.active { display: block; animation: rise .4s cubic-bezier(.2,.7,.2,1); } @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .panel { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: var(--sp5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 24px 60px rgba(0,0,0,0.4); } .panel-kick { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--sp1); } .panel h2 { font-family: var(--serif); font-weight: 500; font-size: 34px; line-height: 1.1; margin-bottom: var(--sp2); } .panel .lede { color: var(--muted); margin-bottom: var(--sp4); } /* ── Forms ──────────────────────────────────────────────────────────────── */ .field { margin-bottom: var(--sp3); } .field label { display: block; font-size: 12px; letter-spacing: .04em; color: var(--muted); margin-bottom: 7px; } .field input, .field select { width: 100%; font-family: var(--sans); font-size: 15px; color: var(--text); background: rgba(0,0,0,0.3); border: 1px solid var(--line); border-radius: 10px; padding: 13px 14px; transition: border-color .2s, box-shadow .2s; } .field input:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp3); } .step-actions { display: flex; gap: var(--sp2); margin-top: var(--sp4); align-items: center; } .step-actions.ctr { justify-content: center; } .step-err { color: var(--err); font-size: 13px; min-height: 18px; margin-top: var(--sp1); } /* ── Blueprint (interactive projection) ─────────────────────────────────── */ .bp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp4); align-items: start; } .bp-controls .field { margin-bottom: var(--sp3); } .bp-range { width: 100%; accent-color: var(--accent); } .bp-rangeval { float: right; color: var(--accent); font-variant-numeric: tabular-nums; } .bp-out { background: linear-gradient(180deg, rgba(200,162,75,0.08), transparent); border: 1px solid var(--line-gold); border-radius: 14px; padding: var(--sp4); } .bp-metric { margin-bottom: var(--sp3); } .bp-metric .k { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .bp-metric .v { font-family: var(--serif); font-size: 40px; color: var(--text); line-height: 1; font-variant-numeric: tabular-nums; } .bp-metric.gap .v { color: var(--accent); } @media (max-width: 680px) { .bp-grid { grid-template-columns: 1fr; } .field-row { grid-template-columns: 1fr; } .hero { grid-template-columns: 1fr; } .hero h1 { font-size: 42px; } } /* ── Mood board (designer collections) ──────────────────────────────────── */ .mb-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp3); } .mb-count { font-size: 13px; color: var(--accent); font-weight: 600; } #moodboard { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp2); } .mb-card { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; cursor: pointer; background: var(--card); transition: border-color .2s, transform .14s, box-shadow .2s; } .mb-card:hover { transform: translateY(-2px); border-color: var(--line-gold); box-shadow: 0 12px 30px rgba(0,0,0,.18); } .mb-card.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); } .mb-art { position: relative; aspect-ratio: 4/5; display: grid; place-items: center; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent); } .mb-gown { width: 56%; height: 80%; filter: drop-shadow(0 6px 12px rgba(0,0,0,.18)); } .mb-heart { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; color: var(--muted); transition: color .2s, transform .2s; } .mb-card.sel .mb-heart { color: var(--accent); fill: var(--accent); transform: scale(1.15); } .mb-card.sel .mb-heart path { fill: var(--accent); } .mb-meta { padding: 11px 13px 13px; } .mb-designer { font-family: var(--serif); font-size: 17px; line-height: 1.1; } .mb-line { font-size: 11px; color: var(--muted); text-transform: capitalize; margin-top: 2px; } .mb-sw { display: flex; gap: 4px; margin-top: 9px; } .mb-sw span { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line); } /* ── Calendar (native booking) ──────────────────────────────────────────── */ .kinds { display: flex; gap: var(--sp2); margin-bottom: var(--sp4); flex-wrap: wrap; } .kind { flex: 1; min-width: 180px; text-align: left; padding: var(--sp3); border-radius: 12px; border: 1px solid var(--line); background: rgba(0,0,0,0.25); cursor: pointer; transition: all .2s; } .kind:hover { border-color: var(--line-gold); } .kind.sel { border-color: var(--accent); background: var(--accent-soft); } .kind .kt { font-weight: 600; margin-bottom: 3px; } .kind .kd { font-size: 12px; color: var(--muted); } .kind.locked { opacity: .45; cursor: not-allowed; } .cal { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: var(--sp1); max-height: 280px; overflow-y: auto; padding-right: 4px; } .slot { padding: 11px 8px; border-radius: 9px; border: 1px solid var(--line); background: rgba(0,0,0,0.25); font-size: 13px; cursor: pointer; text-align: center; transition: all .15s; font-variant-numeric: tabular-nums; } .slot:hover { border-color: var(--accent); color: var(--accent); } .slot.sel { background: var(--accent); color: #1a1505; border-color: var(--accent); font-weight: 600; } .slot .day { display: block; font-size: 11px; color: var(--faint); margin-bottom: 2px; } .slot.sel .day { color: rgba(26,21,5,0.7); } /* ── States: loading / empty / receipt ──────────────────────────────────── */ .loading { display: flex; align-items: center; gap: 12px; color: var(--muted); padding: var(--sp4); justify-content: center; } .spinner { width: 18px; height: 18px; border: 2px solid var(--line-gold); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; } .empty { text-align: center; color: var(--faint); padding: var(--sp5); } .empty svg { width: 40px; height: 40px; color: var(--line-gold); margin-bottom: var(--sp2); } .receipt { text-align: center; } .receipt .seal { width: 78px; height: 78px; margin: 0 auto var(--sp3); color: var(--accent); } .receipt h2 { margin-bottom: var(--sp2); } .receipt .det { display: inline-grid; grid-template-columns: auto auto; gap: 8px 22px; text-align: left; margin: var(--sp3) auto; color: var(--muted); font-size: 14px; } .receipt .det b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; } /* ── Tier ladder ────────────────────────────────────────────────────────── */ .tiers { max-width: var(--maxw); margin: 0 auto var(--sp6); padding: 0 var(--sp4); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp2); } .tier { border: 1px solid var(--line); border-radius: 14px; padding: var(--sp3); background: var(--card); } .tier .tl { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; } .tier .tn { font-family: var(--serif); font-size: 22px; margin-bottom: 6px; } .tier .tb { font-size: 13px; color: var(--muted); } @media (max-width: 760px) { .tiers { grid-template-columns: 1fr 1fr; } } /* ── Footer ─────────────────────────────────────────────────────────────── */ .foot { text-align: center; padding: var(--sp4); color: var(--faint); font-size: 12px; border-top: 1px solid var(--line); } .foot a { color: var(--muted); text-decoration: none; border-bottom: 1px dotted var(--line-gold); } .foot a:hover { color: var(--accent); } /* ── SaaS purchase step (plans) — pricing tiles, billing toggle, credits ────── * Rendered by funnel-app.js renderPlans() from cfg.pricing. Shared by every * SaaS face; palette tokens (--accent/--card/--line) come from the face skin. */ #plans { display: flex; flex-direction: column; gap: var(--sp3); } .plan-trial { text-align: center; padding: var(--sp4); border-radius: 16px; background: linear-gradient(160deg, var(--accent-soft), transparent), var(--card-hi); border: 1px solid var(--line-gold); box-shadow: 0 20px 60px color-mix(in srgb, var(--accent) 16%, transparent); } .plan-trial-k { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--sp1); } .plan-trial-h { font-family: var(--sans); font-weight: 700; font-size: 24px; letter-spacing: -.01em; margin-bottom: 4px; } .plan-trial-sub { color: var(--muted); margin-bottom: var(--sp3); } .bill-tog { display: inline-flex; align-self: center; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); } .bill-opt { font: inherit; font-size: 13px; padding: 7px 16px; border-radius: 999px; border: 0; background: transparent; color: var(--muted); cursor: pointer; } .bill-opt.on { background: var(--accent); color: #042234; font-weight: 700; } .plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp3); } .plan-grid--credits { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .plan { position: relative; display: flex; flex-direction: column; gap: 10px; padding: var(--sp4) var(--sp3); border-radius: 16px; background: var(--card); border: 1px solid var(--line); } .plan--featured { border-color: var(--accent); box-shadow: 0 16px 50px color-mix(in srgb, var(--accent) 18%, transparent); } .plan-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: #042234; background: var(--accent); padding: 3px 12px; border-radius: 999px; white-space: nowrap; } .plan-name { font-family: var(--sans); font-weight: 700; font-size: 18px; } .plan-price { display: flex; align-items: baseline; gap: 4px; } .plan-price .amt { font-family: var(--sans); font-weight: 800; font-size: 34px; letter-spacing: -.02em; } .plan-price .per { color: var(--muted); font-size: 14px; } .plan-blurb { color: var(--muted); font-size: 14px; } .plan-feats { list-style: none; margin: 4px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; } .plan-feats li { position: relative; padding-left: 22px; font-size: 13.5px; color: var(--text); } .plan-feats li::before { content: ""; position: absolute; left: 4px; top: 6px; width: 10px; height: 6px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); } .plan .btn { margin-top: auto; width: 100%; } .plan-sub-h { text-align: center; color: var(--muted); font-size: 13px; letter-spacing: .04em; margin-top: var(--sp2); } .plan-note { text-align: center; color: var(--faint); font-size: 11px; margin-top: var(--sp1); } /* Purchase receipt (confirmed step, SaaS variant) */ .receipt .det .rc-amt { color: var(--accent); } /* ── ADDITIVE — conversion & relationship hooks (template-standard) ────────── * Neutral defaults for the opt-in CX elements populated by funnel-app.js from * cfg.conversion (+ hero.cta_note / hero.trust_chips built by boutique-render). * New classes only — faces without the hooks are untouched; skins re-voice. */ .rail-note { font-size: 13px; color: var(--muted); text-align: center; margin-bottom: var(--sp2); } .rail-note:empty { display: none; } .cap-note { font-size: 13px; color: var(--muted); margin-top: var(--sp2); } .cap-note:empty { display: none; } .plans-hi { color: var(--accent); font-weight: 600; } .plans-hi:empty { display: none; } .plans-proof:empty { display: none; } .plans-proof { border-top: 1px solid var(--line); margin-top: var(--sp4); padding-top: var(--sp3); } .plans-proof .q { font-style: italic; line-height: 1.5; max-width: 60ch; } .plans-proof .who { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-top: var(--sp1); } #plans { transition: opacity .15s ease; } #plans.plans--swap { opacity: .25; } .next-steps-h { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin: var(--sp4) 0 var(--sp2); } .next-steps { list-style: none; counter-reset: ns; margin: 0 auto; padding: 0; text-align: left; max-width: 34em; } .next-steps li { counter-increment: ns; position: relative; padding: var(--sp1) 0 var(--sp1) 42px; border-bottom: 1px solid var(--line); line-height: 1.5; } .next-steps li::before { content: counter(ns); position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: var(--accent); border: 1px solid var(--line); border-radius: 999px; } .hero-cta-note { font-size: 13px; color: var(--muted); margin-top: var(--sp2); } .hero-trust { display: flex; flex-wrap: wrap; gap: var(--sp2); margin-top: var(--sp3); } .hero-trust .chip { font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 5px 13px; white-space: nowrap; } /* ── Hero benefit bullets (L13, additive) — container .hero-benefits, bullet * .hero-benefit. Fibonacci ramp: sub→benefits 21px, within-list 13px, * benefits→CTA 34px. `.hero p.sub` already carries margin-bottom: var(--sp4) * (34px, untouched above) — margin-top here is calc(sp3 - sp4) = 21 - 34 = * -13px so the two adjoining margins collapse down to the target 21px * without editing the existing .hero p.sub rule. */ .hero-benefits { list-style: none; margin-top: calc(var(--sp3) - var(--sp4)); margin-bottom: var(--sp4); padding: 0; display: flex; flex-direction: column; gap: var(--sp2); } .hero-benefit { position: relative; padding-left: 24px; font-size: 15px; line-height: 1.5; color: color-mix(in srgb, var(--text) 55%, var(--muted) 45%); } .hero-benefit::before { content: ""; position: absolute; left: 2px; top: 5px; width: 10px; height: 6px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); } /* ── Motif animation engine (L14, additive) — ONE shared keyframe set, slow * breathing glow/drift, driven entirely by --motif-amp/--motif-dur so every * face tunes it (or leaves it) without a second keyframe block anywhere. * Wrapped wholesale in prefers-reduced-motion:no-preference — reduced-motion * users get a fully static .hero-art svg, no JS check needed. */ @media (prefers-reduced-motion: no-preference) { .hero-art svg { --motif-amp: 6px; --motif-dur: 9s; animation: motif-breathe var(--motif-dur) ease-in-out infinite; } @keyframes motif-breathe { 0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 0 transparent); } 50% { transform: translateY(calc(var(--motif-amp) * -1)) scale(1.015); filter: drop-shadow(0 0 18px color-mix(in srgb, var(--accent) 32%, transparent)); } } } /* ── Hero art accent halo (additive) — .hero-art already has position:relative * above; this ::before adds a per-funnel glow sized off --accent so each * product's art lights its own color without a new custom property. */ .hero-art::before { content: ""; position: absolute; inset: -12%; background: radial-gradient(60% 60% at 50% 50%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 72%); z-index: -1; pointer-events: none; }