/* ============================================================================ HERO MOLECULE PATTERN - On Top Labs --------------------------------------------------------------------------- Brandon, 2026-07-28: "add a very well designed aesthetic molecule pattern with low transparency to every hero image besides the home page rather than this ai slop animation." Replaces the drifting canvas field (assets/js/molbg.js) on the 25 section headers with a STATIC, drawn pattern. Nothing animates and nothing is random: the previous version scattered generated structures at random positions every load, which is exactly what read as generated filler. WHAT IT IS (see the REDESIGNED note further down before changing any of it) A brand-tinted wash carrying two soft blooms, with a single fine hexagonal lattice - the flat-topped six-ring grid of fused carbocycles - masked so it gathers in the empty side of the band and never sits under the copy. The colour supplies the depth; the lattice is texture only. WHY SVG-IN-CSS AND NOT A CANVAS · zero JavaScript, zero per-frame cost, nothing to pause on scroll · resolution independent - crisp on any DPR, no canvas re-raster on resize · it cannot drift out of alignment or clip a shape at the band edge, which were both failure modes of the animated version ⚠️ Geometry note: the tile is 56 x 96.99. That height is 56 x sqrt(3) and is NOT arbitrary - a hexagonal lattice only tiles seamlessly at that ratio. If the width changes, the height must be recomputed as width x 1.7320508, or a visible seam appears every repeat. Opacity is intentionally very low (the brief said low transparency, i.e. barely-there). These sit UNDER headline copy; anything stronger competes. ========================================================================== */ /* The canvas the old animation drew into. Kept in the markup on 25 pages, so it is hidden here rather than stripped from every file - and molbg.js is unlinked, so nothing draws into it either way. */ .mol-section > canvas.mol-bg { display:none !important; } .mol-section { position:relative; overflow:hidden; isolation:isolate; } /* --------------------------------------------------------------------------- REDESIGNED 2026-07-28 (Brandon: "these backgrounds are ugly"). What was wrong with the first version, so it is not rebuilt the same way: 1. TWO motifs at once - a large hex lattice AND a dot field - at .13/.16. Two patterns competing over the same area is what read as clutter. There is now ONE texture. 2. The lattice was drawn at 168px, so hexagons were object-sized: you saw individual shapes rather than a surface. It is now 112px and thin-stroked, which reads as paper texture rather than as drawn hexagons. 3. 🔴 The masks put the pattern DENSEST AT THE TOP LEFT - exactly where the breadcrumb, eyebrow and headline sit. The texture was competing with the type it was supposed to sit behind. Both masks now fade the pattern AWAY from the copy column and let it gather in the empty right side. 4. The band was flat single-colour, so the only depth in it came from the pattern. It now carries a soft brand wash and two blooms, which means the colour does the work and the texture can drop to a whisper. --------------------------------------------------------------------------- */ /* the ground: a brand-tinted wash rather than one flat lavender */ .mol-section { background:linear-gradient(122deg,#f8faff 0%,#f4f7ff 38%,#f3f2ff 72%,#f7f5ff 100%); } /* layer 1: colour depth. Two soft blooms on the brand ramp - periwinkle drawn toward the copy side, violet gathering right - so the band has dimension before any pattern is applied. */ .mol-section::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background: radial-gradient(900px 420px at 6% 8%, rgba(99,102,241,.10), transparent 66%), radial-gradient(760px 460px at 92% 96%, rgba(124,58,237,.09), transparent 64%), radial-gradient(620px 300px at 78% 4%, rgba(59,130,246,.08), transparent 62%); } /* layer 2: the texture. One fine hexagonal lattice, masked to clear the copy column entirely and gather toward the outer right. */ .mol-section::after { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image:url("data:image/svg+xml;utf8,\ \ \ \ \ \ \ "); /* ⚠️ 112 x 194 keeps the sqrt(3) ratio (112 x 1.7320508 = 193.99). Change the width and the height MUST be recomputed or a seam appears every repeat. */ background-size:112px 194px; /* Clears the copy outright, then ramps up toward the right edge. ⚠️ The 52% start is measured, not guessed: the display headline on these banners runs to ~73% of the band width, so the obvious-looking 38% put texture behind the second half of every heading. Verify against the widest headline on the set (Affiliate program) if this is ever retuned. */ -webkit-mask-image:linear-gradient(96deg, transparent 0%, transparent 52%, rgba(0,0,0,.38) 76%, rgba(0,0,0,.9) 100%); mask-image:linear-gradient(96deg, transparent 0%, transparent 52%, rgba(0,0,0,.38) 76%, rgba(0,0,0,.9) 100%); opacity:.11; } /* content must sit above both layers */ .mol-section > .wrap, .mol-section > .wrap-wide, .mol-section > * { position:relative; z-index:1; } /* On a narrow screen the copy fills the band, so the pattern is pulled back further rather than sitting directly behind the headline. */ @media (max-width:760px) { /* the copy fills the whole band at this width, so there is no empty right side for the lattice to gather in - it is pulled back to almost nothing and the blooms carry the band on their own */ .mol-section::after { opacity:.05; background-size:84px 145.5px; } } /* Nothing here animates, so there is no reduced-motion branch to write - which is itself part of the point of replacing the canvas. */