diff --git a/styles/globals.css b/styles/globals.css index a0b3fe3..f1c8176 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -365,9 +365,29 @@ body { The `--chip-border-base` is a faint diagonal white tint that paints under the corner gradients so the rest of the rim isn't completely invisible (gives the chip a sensible edge even far - from either light source). */ + from either light source). + + Two intensity tiers (2026-06-04 refinement, operator feedback + after the original tokens went out — "reduce the vibrancy of + the border gradients on the cards"): + + 1. `--corner-light-{warm,cool}` (full intensity) — used by + the floating chrome chips (sidebar nav, top header) where + the catch-light SHOULD be the primary visual cue that the + element is a distinct floating surface responding to the + background light sources. Consumed via inline `boxShadow` + in `components/Layout.js` and `components/ui/TopSearchBar.js`. + + 2. `--corner-light-{warm,cool}-subtle` — used by `.glass-panel` + and `.glass-panel-strong` (data cards: stat cards, deck + cards, list cards, modals, dropdowns). These surfaces are + numerous and tile densely; at full intensity the catch + lights compete with the chrome and overwhelm the page. + Roughly 55% of the full-intensity alpha. */ --corner-light-warm: rgba(255, 110, 0, 0.50); --corner-light-cool: rgba(99, 102, 241, 0.38); + --corner-light-warm-subtle: rgba(255, 110, 0, 0.28); + --corner-light-cool-subtle: rgba(99, 102, 241, 0.20); --chip-border-base: linear-gradient( 135deg, rgba(255, 255, 255, 0.14) 0%, @@ -404,9 +424,17 @@ body { and cool catch lights read clearly against the deep substrate. See :root for the full rationale on the corner-vs-drop-shadow refinement. The base white border tint drops in alpha here - because the deep canvas absorbs whites more readily. */ + because the deep canvas absorbs whites more readily. + + The `-subtle` variants (used by `.glass-panel*` data cards + per the operator's "reduce the vibrancy" feedback) sit at + roughly 55% of the full-intensity alpha — slightly higher + proportionally than the light theme because dark substrates + swallow chromatic content. */ --corner-light-warm: rgba(255, 130, 30, 0.68); --corner-light-cool: rgba(139, 92, 246, 0.58); + --corner-light-warm-subtle: rgba(255, 130, 30, 0.38); + --corner-light-cool-subtle: rgba(139, 92, 246, 0.32); --chip-border-base: linear-gradient( 135deg, rgba(255, 255, 255, 0.10) 0%, @@ -790,14 +818,21 @@ body { border-box-clipped gradient layers as the visible rim. Drop-shadow stack is now just rim-light-inner + elevation — the directional warm/cool outer glows are gone per operator - feedback ("reduce those box shadows quite a bit"). */ + feedback ("reduce those box shadows quite a bit"). + + `.glass-panel*` uses the SUBTLE corner-light variants (about 55% + of the full-intensity alpha used by the floating chrome chips in + Layout / TopSearchBar). Data cards tile densely, so at full + intensity the catch lights compete with the chrome and overwhelm + the page (2026-06-04 operator feedback: "reduce the vibrancy of + the border gradients on the cards"). */ .glass-panel { background: linear-gradient(var(--glass-surface-mid), var(--glass-surface-mid)) padding-box, - radial-gradient(at 0% 100%, var(--corner-light-warm) 0%, transparent 42%) + radial-gradient(at 0% 100%, var(--corner-light-warm-subtle) 0%, transparent 42%) border-box, - radial-gradient(at 100% 0%, var(--corner-light-cool) 0%, transparent 42%) + radial-gradient(at 100% 0%, var(--corner-light-cool-subtle) 0%, transparent 42%) border-box, var(--chip-border-base) border-box; border: 1px solid transparent; @@ -811,9 +846,9 @@ body { background: linear-gradient(var(--glass-surface-high), var(--glass-surface-high)) padding-box, - radial-gradient(at 0% 100%, var(--corner-light-warm) 0%, transparent 42%) + radial-gradient(at 0% 100%, var(--corner-light-warm-subtle) 0%, transparent 42%) border-box, - radial-gradient(at 100% 0%, var(--corner-light-cool) 0%, transparent 42%) + radial-gradient(at 100% 0%, var(--corner-light-cool-subtle) 0%, transparent 42%) border-box, var(--chip-border-base) border-box; border: 1px solid transparent;