Rework “SELL COUNTER 3000™” section: reduce neon clutter, improve hierarchy + optional live counter

[zealsprince]

Problem

The “SELL COUNTER 3000™” section is extremely neon (green/pink), visually cluttered, and can overwhelm nearby content. Readability and information hierarchy are weak.

Goal

Keep the playful ROFLBox vibe while making the Sell Counter section:

• easier to scan
• more readable
• more cohesive with the rest of the page

Proposal

1) Simplify + unify the color scheme

• Reduce saturation/brightness of neon greens/pinks.
• Use a cohesive palette derived from the site theme (after/alongside the background changes in Rework ROFLBox background: simplify gradient + improve readability (optional subtle animated matrix effect) #10).
• Keep neon as accent (borders/glow/CTA) instead of full backgrounds.

2) Improve typography + contrast

• Clear header (“SELL COUNTER 3000™”) with consistent font sizing.
• Body text at a readable size; ensure contrast meets WCAG AA where feasible.
• Use bold/semibold only for key numbers/labels.

3) Add visual hierarchy + layout

• Present content as:
  • Primary metric (big number)
  • Secondary metrics (smaller chips/rows)
  • Explanatory copy (small)
• Use spacing, dividers, and/or a subtle card background (semi-opaque) to separate it from the page background.

4) Add lightweight iconography (optional)

• Add a small icon next to the main counter/label (e.g., “sales”, “coins”, “receipt”).
• Keep it subtle; avoid adding more chaos.

5) Optional: “live” counter behavior

• If there is no backend data, simulate a live counter:
  • deterministic pseudo-random increment (seeded) or
  • small increments per session with localStorage
• Must respect prefers-reduced-motion for any animations.
• Avoid distracting animations (no flashing).

Acceptance Criteria

• Section looks less saturated and less visually noisy than current production.
• Header, main number, and supporting details are clearly distinguishable at a glance.
• The section aligns with the site’s overall styling (cards, borders, spacing).
• If animation/live updates are implemented:
  • disabled or minimized under prefers-reduced-motion: reduce
  • no noticeable performance issues on mobile.

Dependencies / Related

• Coordinate with background changes in Rework ROFLBox background: simplify gradient + improve readability (optional subtle animated matrix effect) #10 so the section palette works on the updated background.

Test Plan

• Desktop + mobile visual check.
• Readability/contrast check for text on the section background.
• Reduced-motion check.
• If live counter: verify it updates without layout shift/jank.