diff --git a/components/Layout.js b/components/Layout.js index 7b2348e..610d072 100644 --- a/components/Layout.js +++ b/components/Layout.js @@ -845,24 +845,26 @@ export default function Layout({ children, user = null, showSearch = false }) { className="hidden md:flex md:flex-col md:gap-4 w-64" aria-label="Sidebar" > - {/* Nav chip. 2026-06-04 two-light-source pass: prepended the - two edge-light tokens so the nav chip's bottom-left and - top-right edges pick up warm + cool directional glows from - the matching corners of the body gradient — the chip - visually "responds" to the two light sources the operator - asked for. The chip is positioned at the top-left of the - viewport so it sits closer to the warm light source; that's - a coincidence of layout, not something the token reacts to, - but the warm glow does naturally read stronger on this chip - because the warm source is right there. */} + {/* Nav chip. 2026-06-04 corner-border pass: same gradient- + border technique as `.glass-panel` — the chip's fill is + clipped to padding-box, and three border-box-clipped + gradient layers expose the warm bottom-left + cool top- + right catch-lights through a 1px transparent border. The + warm/cool drop shadows that lived here through PR #115 + are gone — the directional response is on the border + now, not extending into the body gradient. */}
diff --git a/components/ui/TopSearchBar.js b/components/ui/TopSearchBar.js index 125107a..ce2ca06 100644 --- a/components/ui/TopSearchBar.js +++ b/components/ui/TopSearchBar.js @@ -312,18 +312,21 @@ export default function TopSearchBar({ // content directly. className="px-4 sm:px-6 py-3 flex items-center gap-3 sm:gap-4 md:rounded-2xl" style={{ - background: 'var(--glass-surface-mid)', + // 2026-06-04 corner-border pass: same gradient-border + // technique as .glass-panel — the chip's fill clipped to + // padding-box, with border-box-clipped warm bottom-left + + // cool top-right radial highlights exposed through a 1px + // transparent border. The directional outer drop shadows + // from PR #115 are gone — corner catch-lights only now. + 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%) border-box, ' + + 'radial-gradient(at 100% 0%, var(--corner-light-cool) 0%, transparent 42%) border-box, ' + + 'var(--chip-border-base) border-box', + border: '1px solid transparent', backdropFilter: 'blur(12px) saturate(180%)', WebkitBackdropFilter: 'blur(12px) saturate(180%)', - // 2026-06-04 two-light-source pass: prepended edge-light - // tokens so the header's bottom-left and top-right edges - // pick up warm + cool directional glows. The header sits - // near the top-right of the viewport so the cool source - // reads stronger on it (the purple light is right above); - // the warm rim still appears on the bottom-left edge of the - // chip, just dimmer at this distance from the ember pool. - boxShadow: - 'var(--edge-light-warm), var(--edge-light-cool), var(--rim-light-inner), var(--elevation-ambient)', + boxShadow: 'var(--rim-light-inner), var(--elevation-ambient)', }} > {/* Search affordance — read-only-ish input that opens the diff --git a/styles/globals.css b/styles/globals.css index d45316a..a0b3fe3 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -201,9 +201,10 @@ body { /* Apply theme colors. The hearth gradient: two diagonal light sources that the floating - chrome chips visually "respond" to via the --edge-light-warm / - --edge-light-cool design tokens (defined further down in :root / - [data-theme="dark"]). + chrome chips visually "respond" to via the --corner-light-warm / + --corner-light-cool design tokens (defined further down in :root / + [data-theme="dark"]; consumed as radial-gradient layers on each + chip's BORDER, not as outer drop shadows — see `.glass-panel`). - Warm ember light source: bottom-left of the viewport. - Cool purpley-blue light source: top-right of the viewport. The base linear-gradient runs along the same 45deg diagonal between @@ -231,7 +232,7 @@ body { ), /* Purpley-blue pool, top-right — secondary light source (replaces the prior gold accent). Indigo→violet so the chip rims that - respond to this source via --edge-light-cool read as cool. */ + respond to this source via --corner-light-cool read as cool. */ radial-gradient( ellipse 85% 65% at 100% -8%, rgba(99, 102, 241, 0.42) 0%, @@ -346,20 +347,32 @@ body { --bg-secondary-rgb: 247, 243, 237; --bg-tertiary-rgb: 240, 230, 214; - /* Two-light-source edge glow tokens (2026-06-04 operator request: - "let's have the corners or the edges of our sections respond as - if those two are light sources"). - Each token is a complete box-shadow declaration with the offset - pointing toward the matching light source — the colored shadow - bleeds outward from the chip's bottom-left edge (warm) and top- - right edge (cool), reading as light catching on the rim. - Light theme alphas are softer; the dark theme override below - bumps them since the deeper substrate can absorb more saturation - before the effect over-reads. Compose into chip shadow stacks - ahead of rim-light-inner + elevation tokens so the directional - glow is the dominant edge cue. */ - --edge-light-warm: -6px 6px 18px rgba(255, 110, 0, 0.16); - --edge-light-cool: 6px -6px 18px rgba(99, 102, 241, 0.12); + /* Corner-border light tokens (2026-06-04 refinement of the prior + two-light-source pass — operator feedback: "borders are + reflecting the color, not necessarily the drop shadows behind + the cards. In fact, you could probably reduce those box shadows + quite a bit. At least they shouldn't span the entire edge of + the card. Just a subtle bit in the corner."). + The prior `--edge-light-warm` / `--edge-light-cool` tokens were + complete box-shadow declarations with offsets that spanned the + entire bottom-left + top-right edges of every chip. They've + been retired. The replacement is a pair of plain RGBA colors + consumed by radial-gradient layers in the chip's BACKGROUND + (border-box-clipped) — see `.glass-panel` below — so the + warm/cool light response now reads as a corner-concentrated + highlight ON the chip's 1px border, not as an outer drop + shadow extending into the body gradient. + 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). */ + --corner-light-warm: rgba(255, 110, 0, 0.50); + --corner-light-cool: rgba(99, 102, 241, 0.38); + --chip-border-base: linear-gradient( + 135deg, + rgba(255, 255, 255, 0.14) 0%, + rgba(255, 255, 255, 0.04) 100% + ); } /* Dark theme variables */ @@ -387,12 +400,18 @@ body { --input-text: var(--input-text-dark); --input-placeholder: var(--input-placeholder-dark); - /* Dark-theme edge glows — alphas bumped since the deeper substrate - can take more saturation before reading as garish, and so the - "lit by ember + lit by purple" effect carries on dark theme (the - default for first-time visitors). See :root for full rationale. */ - --edge-light-warm: -8px 8px 26px rgba(255, 110, 30, 0.34); - --edge-light-cool: 8px -8px 26px rgba(139, 92, 246, 0.28); + /* Dark-theme corner-border colors — alphas bumped so the warm + 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. */ + --corner-light-warm: rgba(255, 130, 30, 0.68); + --corner-light-cool: rgba(139, 92, 246, 0.58); + --chip-border-base: linear-gradient( + 135deg, + rgba(255, 255, 255, 0.10) 0%, + rgba(255, 255, 255, 0.02) 100% + ); } /* Custom component styles - Fire-themed */ @@ -752,35 +771,55 @@ body { the unprefixed form; Lightning CSS's autoprefixer adds the prefix per browserslist (ios_saf <18 still needs it). */ /* Glass panels — the canonical floating-chrome surface. 2026-06-04 - two-light-source pass: `--edge-light-warm` (offset toward bottom- - left) and `--edge-light-cool` (offset toward top-right) lead the - shadow stack so every glass surface picks up the directional rim - glows from the matching corners of the body gradient. Order - matters — directional glows must paint OUTSIDE the structural - elevation shadow, so they sit at the top of the stack (CSS paints - the LAST listed shadow lowest visually, but for box-shadow the - list order doesn't matter for compositing — what matters is each - shadow's geometry. They're listed warm→cool→rim→elevation as a - readability convention). */ + corner-border pass (refines the prior two-light-source pass): + the warm + cool light response now paints on the chip's 1px + border using the multi-layer background + transparent-border + technique: + 1. linear-gradient(surface, surface) padding-box — the chip's + translucent fill, clipped to the padding box so it doesn't + cover the 1px border ring. + 2. radial-gradient(at 0% 100%, warm) border-box — warm corner + catch-light, anchored at the chip's bottom-left. + 3. radial-gradient(at 100% 0%, cool) border-box — cool corner + catch-light, anchored at the chip's top-right. + 4. --chip-border-base border-box — faint diagonal white tint + under the corner gradients so the rest of the rim isn't + invisible (gives the chip a sensible edge far from either + light source). + The `border: 1px solid transparent` is what exposes those + 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"). */ .glass-panel { - background: var(--glass-surface-mid); + 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%) + border-box, + radial-gradient(at 100% 0%, var(--corner-light-cool) 0%, transparent 42%) + border-box, + var(--chip-border-base) border-box; + border: 1px solid transparent; backdrop-filter: blur(12px) saturate(180%); box-shadow: - var(--edge-light-warm), - var(--edge-light-cool), var(--rim-light-inner), - var(--rim-light-outer), var(--elevation-ambient); } .glass-panel-strong { - background: var(--glass-surface-high); + 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%) + border-box, + radial-gradient(at 100% 0%, var(--corner-light-cool) 0%, transparent 42%) + border-box, + var(--chip-border-base) border-box; + border: 1px solid transparent; backdrop-filter: blur(20px) saturate(180%); box-shadow: - var(--edge-light-warm), - var(--edge-light-cool), var(--rim-light-inner), - var(--rim-light-outer), var(--elevation-pronounced); }