diff --git a/docs/card-cosmetics-playground.html b/docs/card-cosmetics-playground.html index 13d58a3..61d0345 100644 --- a/docs/card-cosmetics-playground.html +++ b/docs/card-cosmetics-playground.html @@ -697,9 +697,9 @@ function update() { const evoBadges = { none: { display: 'none' }, t1: { display: 'flex', text: '🌱', bg: '#1a6b1a', color: '#90ee90', shadow: 'none' }, - t2: { display: 'flex', text: '⭐', bg: '#8b6914', color: '#ffd700', shadow: 'none' }, - t3: { display: 'flex', text: '💎', bg: '#4a1a6b', color: '#c084fc', shadow: '0 0 10px #c084fc66' }, - t4: { display: 'flex', text: '👑', bg: '#0a5a5a', color: '#2dd4bf', shadow: '0 0 14px #2dd4bf88' }, + t2: { display: 'flex', text: '⭐', bg: '#2070b0', color: '#50a0e8', shadow: 'none' }, + t3: { display: 'flex', text: '💎', bg: '#a82020', color: '#e85050', shadow: '0 0 10px #e8505066' }, + t4: { display: 'flex', text: '👑', bg: '#6b2d8e', color: '#a060d0', shadow: '0 0 14px #a060d088' }, }; const eb = evoBadges[s.evoBadge]; badge.style.display = eb.display; @@ -771,7 +771,7 @@ function updatePrompt(s) { headerBg: { dark: 'Dark Mode header (#1a1a2e)', gold: 'Metallic Gold header gradient', team: 'Team-colored header' }, colBg: { dark: 'Dark Mode columns (#1a1a2e / #2d1b1b, light text)', midnight: 'Midnight columns (#0d1b2a / #1b0d0d, light text)', cream: 'Cream columns (#FFF8DC / #FFE4C4)', team: 'Team-themed columns (team color at 20%/30% opacity)' }, gradBars: { gold: 'Gold gradient bars', dark: 'Dark charcoal gradient bars', match: 'Gradient bars matching column backgrounds' }, - evoBadge: { t1: 'T1 Initiate badge (🌱 green)', t2: 'T2 Rising badge (⭐ gold)', t3: 'T3 Ascendant badge (💎 purple, glow)', t4: 'T4 Evolved badge (👑 teal, strong glow)' }, + evoBadge: { t1: 'T1 Initiate badge (🌱 green)', t2: 'T2 Rising badge (⭐ blue)', t3: 'T3 Ascendant badge (💎 red, glow)', t4: 'T4 Evolved badge (👑 purple, strong glow)' }, rarityGlow: { subtle: 'Subtle rarity pulse glow', strong: 'Strong rarity pulse glow' }, }; diff --git a/docs/refractor-visual-spec.md b/docs/refractor-visual-spec.md index 1b96381..60f4138 100644 --- a/docs/refractor-visual-spec.md +++ b/docs/refractor-visual-spec.md @@ -93,15 +93,19 @@ background: linear-gradient(135deg, 0% { box-shadow: 0 0 0 1.5px rgba(0,0,0,0.7), 0 2px 5px rgba(0,0,0,0.5), - 0 0 5px 1px var(--diamond-glow-color); + 0 0 8px 2px var(--diamond-glow-color); } 50% { box-shadow: 0 0 0 1.5px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3), - 0 0 8px 3px var(--diamond-glow-color), - 0 0 14px 5px color-mix(in srgb, var(--diamond-glow-color) 25%, transparent); + 0 0 14px 5px var(--diamond-glow-color), + 0 0 24px 8px var(--diamond-glow-color); + } + 100% { box-shadow: + 0 0 0 1.5px rgba(0,0,0,0.7), + 0 2px 5px rgba(0,0,0,0.5), + 0 0 8px 2px var(--diamond-glow-color); } - 100% { /* same as 0% */ } } .tier-diamond.diamond-glow { @@ -109,7 +113,7 @@ background: linear-gradient(135deg, } ``` -Metallic effect **automatically** enables the glow pulse (no separate toggle needed in production). +Metallic sheen and glow pulse are **independent** effects. In production, apply metallic sheen to filled diamonds across all tiers. Apply glow pulse selectively by tier (T4 always gets it; T1–T3 do not in the approved configuration). --- @@ -218,7 +222,7 @@ L-shaped corner brackets on all four card corners. 1. **Diamond indicator CSS** (`.tier-diamond`, `.diamond-quad`, keyframes) → add to card template stylesheet 2. **Diamond HTML generation** → add to Playwright card renderer (4 divs in a grid) -3. **Metallic + glow effect** → always apply metallic class + glow animation to filled diamonds +3. **Metallic effect** → always apply metallic class to filled diamonds; apply glow animation (`diamond-glow` class) for T4 only 4. **T3 shimmer** → APNG capture with `--anim-progress` variable (8 frames) 5. **T4 layered effects** → APNG capture with `--anim-progress` driving all 4 layers 6. **Diamond colors** → store in tier config or derive from tier level @@ -228,7 +232,7 @@ L-shaped corner brackets on all four card corners. - The mockup control panel UI (sliders, dropdowns, color pickers) - The `diamondEffect` dropdown with 5 options (we chose metallic — hardcode it) -- The separate `diamondGlow` toggle (metallic always includes glow) +- The separate `diamondGlow` toggle (hardcode glow ON for T4, OFF for T1–T3) - Border preset / header type controls (these are already in production tier configs) - T4b full-card rainbow (unless explicitly promoted later)