/* ════════════════════════════════════════════════════════════════════ Interactive "+" background — SHARED by the landing (index) + dashboard. A faint green glow sits UNDER a 22px "+" grid and lights up near the cursor; three concentric "raise" rings give the +'s a graduated float (a hair of size swell + a soft downward shadow) that tapers back to flat. Marks stay locked to the grid (no positional offset) so nothing doubles. --mx/--my (viewport px) are fed by bg-fx.js. NOTE: this is the exact same mechanic that was tuned on the dot version — only the glyph changed from a dot to a "+". Sizes are expressed as the "+" arm-length per ring (base 4px → 5.2px at the peak). HOST PAGE REQUIREMENT: put the page's canvas colour on and make transparent, so this fixed z-index:-1 layer shows through: html { background: ; } body { background-color: transparent; } Uses only global --pc-* tokens (tokens.css), so it is page-agnostic. ════════════════════════════════════════════════════════════════════ */ .bg-fx { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; --mx: -9999px; /* off-screen until bg-fx.js sees the first mouse move */ --my: -9999px; } .bg-fx > div { position: absolute; inset: 0; } /* faint green glow — UNDER the +'s, a soft halo revealed at the cursor */ .bg-fx-glow { z-index: 1; background: radial-gradient(circle 150px at var(--mx) var(--my), var(--pc-accent) 0%, rgba(185, 243, 40, 0.05) 45%, transparent 72%); opacity: 0.18; /* TUNABLE — keep it very faint */ transition: opacity 0.4s ease; } /* base "+" grid (4px arms, --pc-grid-dot) */ .bg-fx-dots { z-index: 2; background-image: url("data:image/svg+xml;utf8,"); background-size: 22px 22px; } /* raise rings: same "+" glyph on the same grid (no offset → no doubling). Toward the cursor the arms grow a hair and the +'s gain a soft downward shadow so they read as floating; the three rings (near/mid/far) form a graduated mound that tapers back to flat with distance. (You can swap the drop-shadow for a small offset dot-shadow later — same mechanic.) */ .bg-fx-raise { background-size: 22px 22px; } .bg-fx-raise-far { z-index: 3; background-image: url("data:image/svg+xml;utf8,"); opacity: 0.7; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05)); -webkit-mask-image: radial-gradient(circle 140px at var(--mx) var(--my), #000 0%, transparent 72%); mask-image: radial-gradient(circle 140px at var(--mx) var(--my), #000 0%, transparent 72%); } .bg-fx-raise-mid { z-index: 4; background-image: url("data:image/svg+xml;utf8,"); opacity: 0.85; filter: drop-shadow(0 1.5px 1.4px rgba(0, 0, 0, 0.08)); -webkit-mask-image: radial-gradient(circle 85px at var(--mx) var(--my), #000 0%, transparent 68%); mask-image: radial-gradient(circle 85px at var(--mx) var(--my), #000 0%, transparent 68%); } .bg-fx-raise-near { z-index: 5; background-image: url("data:image/svg+xml;utf8,"); opacity: 1; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.11)); -webkit-mask-image: radial-gradient(circle 45px at var(--mx) var(--my), #000 0%, transparent 65%); mask-image: radial-gradient(circle 45px at var(--mx) var(--my), #000 0%, transparent 65%); } /* Flatten on touch / narrow (no cursor to track). */ @media (max-width: 900px), (pointer: coarse) { .bg-fx-glow, .bg-fx-raise { display: none; } }