diff --git a/web/static/themes/forest.css b/web/static/themes/forest.css
index 41a1e36..a3f927e 100644
--- a/web/static/themes/forest.css
+++ b/web/static/themes/forest.css
@@ -1,5 +1,5 @@
/* ===============================
- Forest — bright, readable greens
+ Forest — bright, readable greens (with pine pattern)
=============================== */
html[data-theme="forest"] {
@@ -26,10 +26,10 @@ html[data-theme="forest"] {
--forest-bar: #0b4f38; /* deep forest */
--forest-bar-ink: #ecfdf5;
- /* Background shades */
- --forest-bg-top: #e4f2ea;
- --forest-bg-mid: #d5eadf;
- --forest-bg-bot: #c8e2d6;
+ /* Background shades (darker) */
+ --forest-bg-top: #dcece4;
+ --forest-bg-mid: #cfe4da;
+ --forest-bg-bot: #c2dcd2;
/* Controls */
--btn-radius: 12px;
@@ -40,34 +40,35 @@ html[data-theme="forest"] {
html[data-theme="forest"] body {
min-height: 100vh;
color: var(--forest-ink);
+
+ /* Layer order: vignette (top), pattern layers, base gradient (bottom) */
background:
- /* Faint pine outline (single SVG, no-repeat) */
+ /* Dark green vignette to anchor the page */
+ radial-gradient(1200px 520px at 85% -10%, rgba(11,63,45,.24), transparent 62%),
+
+ /* Pine pattern — fine grid */
url("data:image/svg+xml;utf8,\
-") left top / 220px 300px repeat,
- /* Dark green vignette */
- radial-gradient(1200px 480px at 85% -10%, rgba(11,63,45,.22), transparent 62%),
+ /* Pine pattern — larger, offset for variation */
+ url("data:image/svg+xml;utf8,\
+\
+ \
+ \
+ \
+ \
+ \
+ \
+") 60px 40px / 300px 410px repeat,
- /* Darker gradient base */
+ /* Base gradient */
linear-gradient(180deg, var(--forest-bg-top) 0%, var(--forest-bg-mid) 46%, var(--forest-bg-bot) 100%);
}
@@ -237,7 +238,13 @@ html[data-theme="forest"] .settings-console .sec-icon{
/* Theme swatches */
html[data-theme="forest"] .settings-console .swatch{
border:1px solid var(--forest-border);
- background: linear-gradient(135deg,#e8fbef,#cdeedd);
+ background:
+ url("data:image/svg+xml;utf8,\
+\
+ \
+ \
+") center/80% 80% no-repeat,
+ linear-gradient(135deg,#e8fbef,#cdeedd);
}
html[data-theme="forest"] .settings-console .swatch-name{
background: rgba(255,255,255,.85);