Overhaul website showcase and bottom nav styling

Author: Mahmud0808

docs/assets/main.js

@@ -92,8 +92,81 @@ for (const marquee of document.querySelectorAll(".marquee")) {
 		for (const item of items) track.appendChild(item.cloneNode(true));
 	}
 	clone.innerHTML = track.innerHTML;
+
+	// duration scales with track width so every row moves at the same speed
+	const duration = `${track.scrollWidth / 40}s`;
+	track.style.animationDuration = duration;
+	clone.style.animationDuration = duration;
 }
 
+// ---- liquid-glass nav: lens-style edge refraction.
+// Needs backdrop-filter: url(), so it's enabled only where that works (Chromium);
+// other browsers keep the plain frosted-blur look. ----
+(() => {
+	const nav = document.querySelector(".pill-nav");
+	const map = document.getElementById("lg-map");
+	if (!nav || !map) return;
+
+	const isWebkit =
+		/Safari/.test(navigator.userAgent) &&
+		!/Chrome/.test(navigator.userAgent);
+	const isFirefox = /Firefox/.test(navigator.userAgent);
+	const probe = document.createElement("div");
+	probe.style.backdropFilter = "url(#liquid-glass)";
+	if (isWebkit || isFirefox || probe.style.backdropFilter === "") return;
+
+	// displacement map: R drives x, G drives y. 50% gray (0.5) means "no shift",
+	// so both gradients hold 0.5 through the middle and ramp smoothly only near
+	// the rim — a continuous profile (no steps), otherwise the backdrop doubles
+	const updateMap = () => {
+		const { width, height } = nav.getBoundingClientRect();
+		if (!width || !height) return;
+		// rasterize at device resolution — at fractional/high DPR the map is
+		// otherwise misaligned with the backdrop and parts of the pill stay sharp
+		const dpr = window.devicePixelRatio || 1;
+		// same physical rim width on every side, so all four edges bend equally
+		const ramp = Math.min(width, height) * 0.35;
+		const rx = ((ramp / width) * 100).toFixed(2);
+		const ry = ((ramp / height) * 100).toFixed(2);
+		const svg =
+			`<svg width="${width * dpr}" height="${height * dpr}" viewBox="0 0 ${width} ${height}" xmlns="http://www.w3.org/2000/svg">` +
+			`<defs>` +
+			`<linearGradient id="lg-x" x1="0%" y1="0%" x2="100%" y2="0%">` +
+			`<stop offset="0%" stop-color="#ff0000"/>` +
+			`<stop offset="${rx}%" stop-color="#800000"/>` +
+			`<stop offset="${100 - rx}%" stop-color="#800000"/>` +
+			`<stop offset="100%" stop-color="#000000"/>` +
+			`</linearGradient>` +
+			`<linearGradient id="lg-y" x1="0%" y1="0%" x2="0%" y2="100%">` +
+			`<stop offset="0%" stop-color="#00ff00"/>` +
+			`<stop offset="${ry}%" stop-color="#008000"/>` +
+			`<stop offset="${100 - ry}%" stop-color="#008000"/>` +
+			`<stop offset="100%" stop-color="#000000"/>` +
+			`</linearGradient>` +
+			`</defs>` +
+			`<rect width="${width}" height="${height}" fill="url(#lg-x)"/>` +
+			`<rect width="${width}" height="${height}" fill="url(#lg-y)" style="mix-blend-mode:screen"/>` +
+			`</svg>`;
+		// pin the map to the element box in user units — the filter region is
+		// larger than the element, so percentage sizing would misalign it
+		map.setAttribute("x", "0");
+		map.setAttribute("y", "0");
+		map.setAttribute("width", `${width}`);
+		map.setAttribute("height", `${height}`);
+		map.setAttribute(
+			"href",
+			`data:image/svg+xml,${encodeURIComponent(svg)}`,
+		);
+	};
+
+	// single displacement pass: subtle lens bend at the rim, no color fringing
+	document.getElementById("lg-lens")?.setAttribute("scale", "-35");
+
+	updateMap();
+	new ResizeObserver(updateMap).observe(nav);
+	nav.classList.add("glass-active");
+})();
+
 // ---- cursor spotlight on feature cards ----
 if (window.matchMedia("(hover: hover)").matches) {
 	for (const card of document.querySelectorAll(".feature-card")) {
@@ -136,6 +209,8 @@ function countUp(el, target) {
 		el.textContent = formatStat(target);
 		return;
 	}
+	// reserve the final width up front so the row doesn't shift while counting
+	el.style.minWidth = `${formatStat(target).length}ch`;
 	const duration = 1200;
 	const start = performance.now();
 	const tick = (now) => {

docs/assets/style.css

@@ -323,6 +323,7 @@ h2 {
 	bottom: max(1rem, env(safe-area-inset-bottom));
 	transform: translateX(-50%);
 	z-index: 50;
+	isolation: isolate;
 	display: flex;
 	align-items: center;
 	gap: 0.25rem;
@@ -350,7 +351,30 @@ h2 {
 	pointer-events: none;
 }
 
+/* liquid glass: the class is added by JS only where backdrop-filter: url()
+   works (Chromium); everywhere else the frosted look above remains */
+.pill-nav.glass-active {
+	background: color-mix(in srgb, var(--bg-raised) 12%, transparent);
+	backdrop-filter: url(#liquid-glass) saturate(1.3);
+	-webkit-backdrop-filter: url(#liquid-glass) saturate(1.3);
+	box-shadow:
+		var(--shadow-nav),
+		inset 0 0 2px 1px rgba(255, 255, 255, 0.28),
+		inset 0 0 10px 4px rgba(255, 255, 255, 0.12);
+}
+
+@media (prefers-color-scheme: light) {
+	.pill-nav.glass-active {
+		box-shadow:
+			var(--shadow-nav),
+			inset 0 0 2px 1px rgba(20, 30, 45, 0.14),
+			inset 0 0 10px 4px rgba(20, 30, 45, 0.08);
+	}
+}
+
 .pill-nav a {
+	position: relative;
+	z-index: 1;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -511,7 +535,8 @@ h3,
 	box-shadow:
 		0 40px 80px rgba(0, 0, 0, 0.55),
 		0 12px 32px rgba(29, 68, 134, 0.35),
-		inset 0 1px 1px rgba(255, 255, 255, 0.14);
+		inset 0 1px 1px rgba(255, 255, 255, 0.18),
+		inset 1px 0 1px rgba(255, 255, 255, 0.05);
 }
 
 .phone::before {
@@ -533,12 +558,25 @@ h3,
 	position: absolute;
 	inset: 0;
 	border-radius: inherit;
-	background: linear-gradient(
-		115deg,
-		transparent 38%,
-		rgba(255, 255, 255, 0.025) 48%,
-		transparent 58%
-	);
+	background:
+		linear-gradient(
+			115deg,
+			transparent 32%,
+			rgba(255, 255, 255, 0.045) 43%,
+			rgba(255, 255, 255, 0.015) 50%,
+			transparent 60%
+		),
+		linear-gradient(
+			115deg,
+			transparent 64%,
+			rgba(255, 255, 255, 0.028) 69%,
+			transparent 75%
+		),
+		radial-gradient(
+			120% 55% at 14% 0%,
+			rgba(255, 255, 255, 0.05),
+			transparent 55%
+		);
 	pointer-events: none;
 }