/** * Bitnnock "Living Ledger" sitewide background. * A scroll-linked animated particle network (drifting dots, distance- * based connecting lines, and traveling energy packets, all drawn on * a ) that lives behind every page's content - home, dashboard, * wallet, trade room, marketplace, auth, KYC, support, settings, and * every other page rendered through the shared frontend layout. * * This system originally also included a perspective floor grid, * drifting blurred orbs, straight light beams, and a winding SVG * "circuit" path with rings/pulsing nodes. Each was removed after * review: the grid and beams read as generic "AI-generated template" * cliches, orbs muddied the pure black backdrop with a gold wash, * and the circuit's curved lines drew the same "stray diagonal line * crossing empty black space" complaint as the beams. Their rules are * kept as `display: none` rather than deleted so the markup in every * template doesn't need to change. * * Nothing about the existing design is changed: every card, panel, and * piece of content keeps its exact black background, spacing, and * styling. This file only (a) draws the animation inside the * .bn-market-flow wrapper added around @yield('content') in * frontend.blade.php, and (b) makes each page's own outer content * shell transparent so that animation is visible behind it, exactly * the way the original black canvas looked before - just alive now * instead of flat. Individual cards/panels inside each page are * untouched and keep their own solid black background. */ .bn-market-flow { --bn-flow-progress: 0; --bn-flow-ring-scale: 0.88; position: relative; /* * No isolation:isolate here. Bootstrap opens some modals in place * (data-bs-toggle) while their backdrop is appended to ; an * isolated wrapper would trap those modals (z-index 1055) below the * body-level backdrop (z-index 1050), leaving them dimmed and * unusable. The animated .bn-market-flow__visual layer creates its * own stacking context via z-index, so the blend/front effect is * unaffected by dropping isolation. * * overflow-x:clip stays: the orbs intentionally hang past the left and * right edges, and without clipping they would widen the page and * cause horizontal scrolling on mobile. overflow-y must stay visible * (not clip/hidden) - this element is also a flex child (see * `flex: 1 0 auto` below for .pw-home), and per the flexbox spec a * flex item's automatic minimum size collapses to 0 whenever its * overflow is anything other than visible. With overflow-y:clip that * collapse let this wrapper shrink to the viewport height instead of * growing to fit its real content, silently clipping away every * section past the first screen. Splitting the axes keeps the * horizontal clipping while restoring correct content-based height. */ overflow-x: clip; overflow-y: visible; background: #13100d; } .bn-market-flow::before, .bn-market-flow::after { content: ""; position: absolute; z-index: 0; right: 0; left: 0; height: 240px; pointer-events: none; } .bn-market-flow::before { top: 0; /* * Shortened from a 240px fade so the nav bar - which sits fixed * directly over this exact region on every page - shows the * animation immediately instead of only after scrolling past the * old, taller fade zone. */ height: 64px; background: linear-gradient(180deg, #13100d, transparent); } .bn-market-flow::after { bottom: 0; background: linear-gradient(0deg, #13100d, transparent); } .bn-market-flow__visual { /* * Raised from z-index:0 so this whole layer (a stacking-context unit, * since it's positioned with its own z-index) paints in front of the * yielded content sections instead of behind them - the canvas * particle network then blends on top of cards via mix-blend-mode * instead of being fully hidden behind their solid backgrounds. */ position: sticky; z-index: 6; top: 0; width: 100%; height: 100svh; margin-bottom: -100svh; overflow: hidden; pointer-events: none; /* No tinted wash - the backdrop stays pure black; only the drawn particles and connections carry color. */ background: none; } .bn-market-flow__visual::before, .bn-market-flow__visual::after { content: ""; position: absolute; /* z-index:7 (not 1) so these still paint on top of .bn-market-flow__canvas (z-index:6, both compared inside this element's own local stacking context) now that the canvas paints an opaque fill - see the canvas rule below. At the old z-index:1 they'd otherwise be silently buried under that opaque fill instead of layering over it like they always visually have. */ z-index: 7; pointer-events: none; } .bn-market-flow__visual::before { inset: 8% 0; /* The pair of vertical accent lines this used to draw at 8%/92% (via a 90deg gradient) read as a stray hairline seam that didn't blend into the page - the same "stray line crossing empty space" complaint that already got the beams/circuit/grid removed above. Only that 90deg layer is dropped; the 180deg horizontal glow band stays. */ background: linear-gradient(180deg, transparent, rgba(236, 232, 224, 0.025) 50%, transparent); mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent); } .bn-market-flow__visual::after { top: 50%; left: 50%; width: min(78vw, 920px); aspect-ratio: 1; border: 1px solid rgba(236, 196, 108, 0.06); border-radius: 50%; /* Halo shadows removed - they added a diffuse gold tint to the black backdrop. The thin ring outline stays. */ transform: translate(-50%, -50%) scale(var(--bn-flow-ring-scale)); opacity: 0.72; } .bn-market-flow__grid { /* Removed: a receding perspective floor grid reads as a generic, "AI-generated tech background" cliché rather than a bespoke effect. The particle network carries the scene on its own. Element is kept (rather than removed from every template) so nothing needs to change beyond this one rule. */ display: none; } .bn-market-flow__canvas { position: absolute; z-index: 6; inset: 0; width: 100%; height: 100%; /* * Opaque now (was opacity:0.35 + mix-blend-mode:screen) - painting its * own wallpaper-tone fill instead of staying a faint see-through sheet. * This canvas sits BEHIND every section/app shell (those are all * z-index:7 - custom.css' [data-pw-section] rule and the .pw-app/ * .p2p-dash/.wlf-auth/etc. rule below - vs. this element's z-index:6), * so unlike the footer/drawer copies just below - which sit IN FRONT of * real, readable text and must stay see-through - this one can safely * BE the backdrop rather than a separate hazy layer floating on top of * a same-colored parent. That's also what makes the particles read as * more present ("more to the front") without touching a single alpha * value in the JS: they were always drawn at these exact colors/alphas, * just multiplied down by the old 0.35 container opacity afterward - * removing that multiplier (and the screen blend, which would otherwise * double-lighten this fill against the identical #13100d showing * through .bn-market-flow around it - screen(c,c) is noticeably * brighter than c, which would read as a seam) is the entire effect. */ opacity: 1; mix-blend-mode: normal; background: radial-gradient(ellipse 90% 55% at 50% 0%, rgba(236, 196, 108, 0.05), transparent 65%), #13100d; pointer-events: none; /* Soft edge falloff (not a hard vignette box-shadow) - fades the canvas's own alpha near the frame edges so the scene reads as a lit, receding 3D space instead of a flat tile of dots, without touching the shared markup this canvas is embedded in across half a dozen layouts. Still safe now that the fill is opaque: what's revealed underneath at the faded edge is .bn-market-flow's own identical #13100d, so the fade reads only as the particles/gradient dimming, never as a color seam. */ mask-image: radial-gradient(120% 100% at 50% 42%, #000 62%, rgba(0, 0, 0, 0.78) 100%); -webkit-mask-image: radial-gradient(120% 100% at 50% 42%, #000 62%, rgba(0, 0, 0, 0.78) 100%); } /* * Footer/drawer copies sit IN FRONT of real, readable content (footer * links/copyright, drawer nav - see each variant's own rule further * below), not behind a matching-tone wallpaper, so the original * translucent/screen-blended treatment has to stay here or an opaque * canvas would black out the text underneath it. Two classes outranks * the bare element selector above regardless of source order, so this * reliably wins for just these two cases. */ .bn-market-flow--footer .bn-market-flow__canvas, .bn-market-flow--drawer .bn-market-flow__canvas { background: transparent; opacity: 0.35; mix-blend-mode: screen; } .bn-market-flow__orb { /* Removed: the blurred orbs painted large diffuse gold clouds across the backdrop. Background stays black now; only the crisp canvas particles remain. */ display: none; } .bn-market-flow__orb--one { top: 3%; left: -22%; background: #ecc46c; transform: translate3d(var(--bn-flow-orb-one-x), var(--bn-flow-orb-one-y), 0); animation: bnFlowOrbOne 16s ease-in-out infinite alternate; } .bn-market-flow__orb--two { right: -26%; bottom: -5%; background: #b4834a; transform: translate3d(var(--bn-flow-orb-two-x), var(--bn-flow-orb-two-y), 0); animation: bnFlowOrbTwo 19s ease-in-out infinite alternate; } .bn-market-flow__beam { /* Removed: a lone thin diagonal line reads as a stray artifact rather than a deliberate effect, especially in the empty stretches between sections where nothing else is on screen to give it context. */ display: none; } .bn-market-flow__circuit { /* Removed: the winding ghost/live/rail paths plus their ring and node markers read as thin stray diagonal lines wherever they cross a plain black section - the same complaint as the light beams, just curved instead of straight. The particle canvas (drifting dots, connections, and traveling energy packets) is now the entire visual on its own. */ display: none; } /* * Reveal the animation through the homepage section wrappers. These * selectors intentionally match the ones already forcing a solid * black background in custom.css (same specificity, same #live-terminal * exclusion), and this file loads after custom.css, so this simply * wins the tie and swaps that black fill for the animated one behind * it. Nothing about spacing, borders, radius, or hover states changes, * and every inner card/panel inside these sections keeps its own solid * black background exactly as before. */ .pw-home [data-pw-section]:not(#live-terminal), .pw-home [data-pw-section]:not(#buy-sell):not(#live-terminal), .pw-home #buy-sell { background: transparent !important; background-image: none !important; } /* * Section 9's two graphics (the "Data Not Collected" phone screenshot and * the faceid_v3 scan gif) are legacy template exports flattened onto a * solid opaque #000 canvas, not a real transparent one - confirmed by * inspecting both files' pixels, which sample as pure (0,0,0) outside * their subject with alpha 255 throughout. Section-9 used to be an opaque * homepage "floating slab" section painted with --bn-panel-gradient * (#1c1712 - a shade lighter than the #13100d page tone, so cards read as * raised above the page). Sitting inside that, the graphics' flat * true-black canvas read as a hard rectangle instead of blending into * the panel like every other panel did. * * The phone screenshot (a static PNG) is fixed permanently at the asset * level: every pixel that was pure background has been replaced with a * flat fill color, baked directly into the file (originally * max(pixel, #1c1712) per channel - the exact result `mix-blend-mode: * lighten` against the section's old opaque panel tone would have * produced; re-baked to a flat #13100d fill - see note below the rule - * once section-9 itself went transparent). The flat black canvas around * the card is now literally that fill color with real opaque pixels; the * subject (card grey, white/blue text and icon) was always brighter than * the fill on every channel, so exact-color-match replacement leaves it * untouched. This is intentionally NOT done with a runtime blend mode - * it was found to occasionally repaint back to solid black when * interacting with the hero's Spline