3dtours/RecipesCam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: the hero stat labels wear the accent as gradient text

Browse Source 
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.
This commit is contained in:
3dtours
2026-09-22 16:47:35 +07:00
parent cfe8512636
commit bb51b83399
1 changed files with 14 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docker/frontend/src/styles/landing.css
+14 -1
View File
@@ -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; }