diff --git a/frontend/src/routes/art/+page.svelte b/frontend/src/routes/art/+page.svelte index 5f00f82..c592502 100644 --- a/frontend/src/routes/art/+page.svelte +++ b/frontend/src/routes/art/+page.svelte @@ -266,7 +266,15 @@ .mat { display: block; position: relative; z-index: 1; background: #fbf8f1; border-radius: 1px; padding: var(--mat); - box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.14), inset 0 0 0 1px rgba(0, 0, 0, 0.05); + /* The mat sits recessed below the moulding: a crisp rabbet groove at the lip, the + frame casting shadow onto the top/left of the mat, the bottom/right catching light + — a small chiseled step instead of a flat transition. */ + box-shadow: + inset 0 0 0 1px rgba(40, 28, 16, 0.18), + inset 0 6px 9px -3px rgba(0, 0, 0, 0.34), + inset 6px 0 9px -4px rgba(0, 0, 0, 0.24), + inset 0 -3px 6px -2px rgba(255, 255, 255, 0.55), + inset -3px 0 6px -2px rgba(255, 255, 255, 0.40); } .frame img { display: block; width: 100%; height: auto; max-height: 72vh; object-fit: contain; border-radius: 1px; } @@ -336,7 +344,10 @@ .lightbox { position: fixed; inset: 0; z-index: 50; border: none; cursor: zoom-out; - background: rgba(18, 22, 28, 0.94); display: flex; flex-direction: column; + /* A soft, top-lit gallery wall — lighter than the page so every frame (Black + included) reads, like a piece hung on a real wall. */ + background: linear-gradient(180deg, #efe9dd, #e2dbcc); + display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 2.5vmin; } /* The full-screen view wears the same frame. Rail + mat are only a touch larger than the @@ -349,6 +360,7 @@ } .lb-frame.frame--none { --rail: 0px; --mat: 0px; } /* bare art fills the screen */ .lb-frame img { max-width: 86vw; max-height: 66vh; width: auto; height: auto; object-fit: contain; } - .lb-cap { color: #e9e2d6; font-size: 0.9rem; } - .lb-cap .sep { color: #9aa0a6; } + .lb-frame.frame--none img { max-width: 96vw; max-height: 88vh; } /* no frame → go big */ + .lb-cap { color: #5b636e; font-size: 0.9rem; } + .lb-cap .sep { color: #a6acb4; }