(function () { var w = window, d = document; if (w.__fsRuntime) { w.__fsRuntime.scan(); return; } var reduce = !!(w.matchMedia && w.matchMedia('(prefers-reduced-motion: reduce)').matches); var scenes = [], raf = 0, last = 0; function hex(v, f) { return /^#[0-9a-fA-F]{6}$/.test(v || '') ? v : f; } function rgb(h) { return [parseInt(h.slice(1, 3), 16), parseInt(h.slice(3, 5), 16), parseInt(h.slice(5, 7), 16)]; } function seeded(s) { return function () { s = (s * 16807) % 2147483647; return (s - 1) / 2147483646; }; } function rotX(p, a) { var c = Math.cos(a), s = Math.sin(a); return [p[0], p[1] * c - p[2] * s, p[1] * s + p[2] * c]; } function rotY(p, a) { var c = Math.cos(a), s = Math.sin(a); return [p[0] * c + p[2] * s, p[1], -p[0] * s + p[2] * c]; } function rotZ(p, a) { var c = Math.cos(a), s = Math.sin(a); return [p[0] * c - p[1] * s, p[0] * s + p[1] * c, p[2]]; } // ---- geometry ------------------------------------------------------------ function build(kind) { var r = seeded(7), pts = [], lines = [], i, j, a; if (kind === 'waves') { for (i = 0; i < 46; i++) for (j = 0; j < 26; j++) pts.push([(i / 45) * 2.8 - 1.4, 0, (j / 25) * 1.7 - 0.85]); } else if (kind === 'rings') { for (j = 0; j < 3; j++) for (i = 0; i < 130; i++) { a = (i / 130) * Math.PI * 2; pts.push([Math.cos(a) * (0.55 + j * 0.24), Math.sin(a) * (0.55 + j * 0.24), 0, j]); } } else if (kind === 'particles') { for (i = 0; i < 560; i++) pts.push([r() * 2 - 1, r() * 2 - 1, r() * 2 - 1]); } else if (kind === 'cubes') { var cubes = [[-0.75, 0.35, 0.1, 0.34], [0.7, 0.45, -0.2, 0.26], [0.1, -0.55, 0.3, 0.3], [-0.35, -0.2, -0.6, 0.18], [0.45, -0.1, 0.55, 0.16], [-0.05, 0.75, -0.4, 0.14]]; var edges = [[0, 1], [1, 3], [3, 2], [2, 0], [4, 5], [5, 7], [7, 6], [6, 4], [0, 4], [1, 5], [2, 6], [3, 7]]; for (j = 0; j < cubes.length; j++) { var base = pts.length, cb = cubes[j]; for (i = 0; i < 8; i++) pts.push([(i & 1 ? 1 : -1), (i & 2 ? 1 : -1), (i & 4 ? 1 : -1), j, cb]); for (i = 0; i < edges.length; i++) lines.push([base + edges[i][0], base + edges[i][1]]); } } else if (kind === 'helix') { for (i = 0; i < 64; i++) { a = (i / 64) * Math.PI * 4; var y = (i / 63) * 2 - 1; pts.push([Math.cos(a) * 0.4, y * 0.95, Math.sin(a) * 0.4]); pts.push([Math.cos(a + Math.PI) * 0.4, y * 0.95, Math.sin(a + Math.PI) * 0.4]); if (i % 2 === 0) lines.push([pts.length - 2, pts.length - 1]); } } else { var n = 480, g = Math.PI * (3 - Math.sqrt(5)); for (i = 0; i < n; i++) { var yy = 1 - (i / (n - 1)) * 2, rad = Math.sqrt(1 - yy * yy), th = g * i; pts.push([Math.cos(th) * rad, yy, Math.sin(th) * rad]); } } return { pts: pts, lines: lines }; } // Position of point p at time t, before the viewer's (mouse) rotation. function place(kind, p, t) { if (kind === 'waves') { var q = [p[0], Math.sin(p[0] * 3 + t * 1.3) * 0.13 + Math.cos(p[2] * 4 + t) * 0.1, p[2]]; return rotY(rotX(q, 0.95), Math.sin(t * 0.15) * 0.25); } if (kind === 'rings') { var j = p[3], dir = j % 2 ? -1 : 1; return rotX(rotY(rotX(p, 1.1 + j * 0.45), t * (0.35 + j * 0.12) * dir), 0.25); } if (kind === 'particles') { var z = ((p[2] + 1 + t * 0.18) % 2) - 1; return [p[0] * 1.3, p[1] * 0.9, z]; } if (kind === 'cubes') { var c = p[4], s = c[3], k = p[3]; var v = rotY(rotX([p[0] * s, p[1] * s, p[2] * s], t * (0.4 + k * 0.07)), t * (0.3 + k * 0.05)); return rotY([v[0] + c[0], v[1] + c[1] + Math.sin(t * 0.8 + k) * 0.06, v[2] + c[2]], t * 0.08); } if (kind === 'helix') return rotZ(rotY(p, t * 0.45), 0.28); return rotX(rotY(p, t * 0.22), 0.38); } function Scene(cv) { this.cv = cv; this.ctx = cv.getContext && cv.getContext('2d'); this.kind = ''; this.t = 1.5; this.mx = 0; this.my = 0; this.tx = 0; this.ty = 0; this.visible = true; cv.__fsScene = this; } function draw(s, dt) { var cv = s.cv, ctx = s.ctx; if (!ctx) return; var kind = cv.getAttribute('data-fs-scene') || 'globe'; if (kind !== s.kind) { s.kind = kind; s.geo = build(kind); } var dpr = Math.min(w.devicePixelRatio || 1, 2); var cw = cv.clientWidth, ch = cv.clientHeight; if (!cw || !ch) return; var W = Math.round(cw * dpr), H = Math.round(ch * dpr); if (cv.width !== W || cv.height !== H) { cv.width = W; cv.height = H; } s.t += dt; s.mx += (s.tx - s.mx) * 0.05; s.my += (s.ty - s.my) * 0.05; var c1 = rgb(hex(cv.getAttribute('data-c1'), '#6d5dfc')), c2 = rgb(hex(cv.getAttribute('data-c2'), '#22d3ee')); var right = cv.getAttribute('data-fs-align') === 'right' && cw >= 860; var cx = right ? W * 0.73 : W / 2, cy = H / 2; // Centered scenes (call-to-action bands) are drawn large, as a backdrop that frames the text. var size = right ? Math.min(W * 0.24, H * 0.4) : Math.min(W * 0.4, H * 1.05); if (kind === 'waves') size = right ? Math.min(W * 0.3, H * 0.55) : Math.min(W * 0.5, H * 1.2); var cam = kind === 'particles' ? 1.7 : 3.2; ctx.clearRect(0, 0, W, H); var glow = ctx.createRadialGradient(cx, cy, 0, cx, cy, size * 1.6); glow.addColorStop(0, 'rgba(' + c1[0] + ',' + c1[1] + ',' + c1[2] + ',0.20)'); glow.addColorStop(1, 'rgba(' + c1[0] + ',' + c1[1] + ',' + c1[2] + ',0)'); ctx.fillStyle = glow; ctx.fillRect(0, 0, W, H); var pts = s.geo.pts, out = new Array(pts.length), i; for (i = 0; i < pts.length; i++) { var p = rotX(rotY(place(kind, pts[i], s.t), s.mx * 0.9), s.my * 0.6); var persp = cam / (cam - p[2]); out[i] = [cx + p[0] * size * persp, cy - p[1] * size * persp, (p[2] + 1) / 2, persp]; } var lines = s.geo.lines; if (lines.length) { ctx.lineWidth = Math.max(1, dpr * 0.9); for (i = 0; i < lines.length; i++) { var a = out[lines[i][0]], b = out[lines[i][1]], dep = (a[2] + b[2]) / 2; ctx.strokeStyle = 'rgba(' + c1[0] + ',' + c1[1] + ',' + c1[2] + ',' + (0.12 + dep * 0.45).toFixed(3) + ')'; ctx.beginPath(); ctx.moveTo(a[0], a[1]); ctx.lineTo(b[0], b[1]); ctx.stroke(); } } var dotScale = kind === 'particles' ? 1.1 : kind === 'waves' ? 0.9 : 1; for (i = 0; i < out.length; i++) { var o = out[i], dp = Math.max(0, Math.min(1, o[2])); var col = [Math.round(c2[0] + (c1[0] - c2[0]) * dp), Math.round(c2[1] + (c1[1] - c2[1]) * dp), Math.round(c2[2] + (c1[2] - c2[2]) * dp)]; var rr = (0.7 + dp * 1.9) * dpr * dotScale * Math.min(o[3], 2.4); ctx.fillStyle = 'rgba(' + col[0] + ',' + col[1] + ',' + col[2] + ',' + (0.22 + dp * 0.78).toFixed(3) + ')'; ctx.beginPath(); ctx.arc(o[0], o[1], rr, 0, 6.2832); ctx.fill(); } } function loop(now) { raf = 0; var dt = last ? Math.min(0.05, (now - last) / 1000) : 0.016; last = now; for (var i = scenes.length - 1; i >= 0; i--) { var s = scenes[i]; if (!s.cv.isConnected) { scenes.splice(i, 1); continue; } if (s.visible) draw(s, dt); } if (scenes.length && !reduce) raf = w.requestAnimationFrame(loop); } function kick() { if (!raf && scenes.length && !reduce) { last = 0; raf = w.requestAnimationFrame(loop); } } function still() { for (var i = 0; i < scenes.length; i++) if (scenes[i].cv.isConnected) draw(scenes[i], 0); } var io = w.IntersectionObserver ? new IntersectionObserver(function (entries) { for (var i = 0; i < entries.length; i++) { var s = entries[i].target.__fsScene; if (s) s.visible = entries[i].isIntersecting; } kick(); }) : null; w.addEventListener('pointermove', function (e) { for (var i = 0; i < scenes.length; i++) { var r = scenes[i].cv.getBoundingClientRect(); if (!r.width || !r.height) continue; scenes[i].tx = Math.max(-0.5, Math.min(0.5, (e.clientX - r.left) / r.width - 0.5)); scenes[i].ty = Math.max(-0.5, Math.min(0.5, (e.clientY - r.top) / r.height - 0.5)); } }, { passive: true }); w.addEventListener('resize', function () { if (reduce) still(); }, { passive: true }); // ---- counters -------------------------------------------------------------- function inPreview(el) { var root = el.closest ? el.closest('[data-fs-mode]') : null; return !!root && root.getAttribute('data-fs-mode') === 'preview'; } function count(el) { var original = el.textContent || ''; var m = /^(\D{0,3}?)(\d[\d,]*(?:\.\d+)?)(.{0,12})$/.exec(original.trim()); if (!m) return; var raw = m[2], target = parseFloat(raw.replace(/,/g, '')); if (!(target > 0) || (/^(19|20)\d\d$/.test(raw) && !m[3])) return; var dec = (raw.split('.')[1] || '').length, comma = raw.indexOf(',') > -1, start = 0; function fmt(v) { var s = v.toFixed(dec); if (comma) s = s.replace(/\B(?=(\d{3})+(?!\d))/g, ','); return m[1] + s + m[3]; } function step(now) { if (!start) start = now; var k = Math.min(1, (now - start) / 1400), e = 1 - Math.pow(1 - k, 3); el.textContent = k < 1 ? fmt(target * e) : original; if (k < 1) w.requestAnimationFrame(step); } w.requestAnimationFrame(step); } var countIo = w.IntersectionObserver ? new IntersectionObserver(function (entries) { for (var i = 0; i < entries.length; i++) if (entries[i].isIntersecting) { countIo.unobserve(entries[i].target); count(entries[i].target); } }, { threshold: 0.6 }) : null; // ---- lightbox -------------------------------------------------------------- var box = null, lastFocus = null; function closeBox() { if (box) { box.parentNode && box.parentNode.removeChild(box); box = null; d.removeEventListener('keydown', onKey); if (lastFocus && lastFocus.focus) lastFocus.focus(); } } function onKey(e) { if (e.key === 'Escape') closeBox(); } function openBox(src, alt) { closeBox(); lastFocus = d.activeElement; box = d.createElement('div'); box.className = 'fs-lightbox'; box.setAttribute('role', 'dialog'); box.setAttribute('aria-modal', 'true'); box.setAttribute('aria-label', 'Image viewer'); var img = d.createElement('img'); img.src = src; img.alt = alt || ''; img.referrerPolicy = 'no-referrer'; var btn = d.createElement('button'); btn.type = 'button'; btn.textContent = '\u00d7'; btn.setAttribute('aria-label', 'Close'); box.appendChild(img); box.appendChild(btn); box.addEventListener('click', function (e) { if (e.target !== img) closeBox(); }); d.addEventListener('keydown', onKey); d.body.appendChild(box); btn.focus(); } d.addEventListener('click', function (e) { var t = e.target; // Close an open "More" menu when clicking anywhere else. var menus = d.querySelectorAll('details.fs-more[open]'); for (var m = 0; m < menus.length; m++) if (!menus[m].contains(t)) menus[m].removeAttribute('open'); var img = t && t.closest ? t.closest('[data-fs-lightbox] img') : null; if (!img) return; var src = img.currentSrc || img.src; if (!/^https:\/\//i.test(src || '')) return; e.preventDefault(); openBox(src, img.alt); }); // ---- sticky menu shadow ------------------------------------------------------ var ticking = false; function onScroll() { ticking = false; var y = w.pageYOffset || d.documentElement.scrollTop || 0, navs = d.querySelectorAll('.fs-nav'); for (var i = 0; i < navs.length; i++) { if (y > 12) navs[i].setAttribute('data-fs-scrolled', '1'); else navs[i].removeAttribute('data-fs-scrolled'); } } w.addEventListener('scroll', function () { if (!ticking) { ticking = true; w.requestAnimationFrame(onScroll); } }, { passive: true }); // ---- stock videos: play only while visible, never for reduced motion ---------- var vidIo = w.IntersectionObserver ? new IntersectionObserver(function (entries) { for (var i = 0; i < entries.length; i++) { var v = entries[i].target; if (entries[i].isIntersecting) { var p = v.play && v.play(); if (p && p.catch) p.catch(function () {}); } else if (v.pause) v.pause(); } }, { threshold: 0.1 }) : null; function setupVideo(v) { v.muted = true; if (reduce) { v.removeAttribute('autoplay'); if (v.pause) v.pause(); return; } if (vidIo) vidIo.observe(v); } // ---- discovery --------------------------------------------------------------- function scan() { var vids = d.querySelectorAll('video[data-fs-video]'); for (var k = 0; k < vids.length; k++) { if (!vids[k].__fsVideo) { vids[k].__fsVideo = true; setupVideo(vids[k]); } } var cvs = d.querySelectorAll('canvas[data-fs-scene]'); for (var i = 0; i < cvs.length; i++) { if (cvs[i].__fsScene) continue; var s = new Scene(cvs[i]); scenes.push(s); if (io) io.observe(cvs[i]); if (reduce) draw(s, 0); } kick(); var nums = d.querySelectorAll('[data-fs-count]'); for (var j = 0; j < nums.length; j++) { var el = nums[j]; if (el.__fsCounted) continue; el.__fsCounted = true; if (!reduce && countIo && !inPreview(el)) countIo.observe(el); } onScroll(); } w.__fsRuntime = { scan: scan }; if (w.MutationObserver) { var timer = null; new MutationObserver(function () { clearTimeout(timer); timer = setTimeout(scan, 80); }).observe(d.documentElement, { childList: true, subtree: true }); } if (d.readyState === 'loading') d.addEventListener('DOMContentLoaded', scan); else scan(); })();

Get in Touch

Contact Blade & Co.

Find Us

Opening Hours