From bb51b8339981ea7294966fda3a5a5e0e419d57b9 Mon Sep 17 00:00:00 2001
From: 3dtours <yeunhiepanh.photo@gmail.com>
Date: Tue, 22 Sep 2026 16:47:35 +0700
Subject: [PATCH] web: the hero stat labels wear the accent as gradient text

COLOR RECIPES, DOWNLOADS and STORE RATING were flat grey under their numbers.
They now sweep from the theme's own accent to the film red and are cut out of
that gradient, the same treatment the headline above them gets. Because the
sweep starts on var(--accent), the colour group in the Theme menu still
retints it; the light theme starts from the darker ink accent so the labels
keep their contrast on white.
---
 docker/frontend/src/styles/landing.css | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/docker/frontend/src/styles/landing.css b/docker/frontend/src/styles/landing.css
index a50d628..15c7c24 100644
--- a/docker/frontend/src/styles/landing.css
+++ b/docker/frontend/src/styles/landing.css
@@ -48,6 +48,9 @@
   --lp-ink-amber: hsl(var(--accent-h) var(--accent-s) 32%);
 }
 [data-theme="light"] .lp-hero h1 { background: linear-gradient(100deg, #14161c 8%, var(--lp-amber) 62%, var(--lp-red) 98%); -webkit-background-clip: text; background-clip: text; }
+/* Plain amber on white fails contrast, so the label sweep starts from the
+   darker ink accent the theme already defines for text on the page. */
+[data-theme="light"] .lp-stat span { background: linear-gradient(100deg, var(--lp-ink-amber), var(--lp-red)); -webkit-background-clip: text; background-clip: text; }
 [data-theme="light"] .lp-glow { opacity: 0.5; }
 [data-theme="light"] .lp-btn,
 [data-theme="light"] .lp-tool,
@@ -251,7 +254,17 @@ html { scroll-behavior: smooth; scroll-padding-top: 116px; }
   padding: 16px 18px;
 }
 .lp-stat b { display: block; font-family: var(--lp-display); font-size: 26px; }
-.lp-stat span { color: var(--lp-muted); font-family: var(--lp-mono); font-size: 10.5px; letter-spacing: 0.14em; }
+.lp-stat span {
+  font-family: var(--lp-mono);
+  font-size: 10.5px;
+  letter-spacing: 0.14em;
+  /* The same accent→film-red sweep the hero headline carries, in the theme's
+     own accent so the colour group in the Theme menu still retints it. */
+  background: linear-gradient(100deg, var(--lp-amber), var(--lp-red));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
 
 /* --- 3. film strip marquee ---------------------------------------------- */
 .lp-marquee { overflow: hidden; border-top: 1px solid var(--lp-line); border-bottom: 1px solid var(--lp-line); background: var(--lp-bg2); padding: 26px 0; }