Skip to content

Improve visual indicator for coming-soon tiers#845

Open
dembrane-sam-bot wants to merge 2 commits into
mainfrom
sam/improve-coming-soon-tiers
Open

Improve visual indicator for coming-soon tiers#845
dembrane-sam-bot wants to merge 2 commits into
mainfrom
sam/improve-coming-soon-tiers

Conversation

@dembrane-sam-bot

Copy link
Copy Markdown
Contributor

Summary

This PR improves the visual styling of 'Coming soon' tiers (innovator and guardian) on the pricing page:

  1. Gives coming-soon cards a dashed border, light gray background (--mantine-color-gray-0), 0.5 opacity, and resets the cursor to default.
  2. Suppresses the card rise transformation (translateY(-4px)) and shadow glow when highlighted if the tier is coming soon.
  3. Restyles selected/active coming-soon cards to use a subtle gray border (--mantine-color-gray-4) instead of the blue brand color.
  4. Adds a small text prompt below the cards: 'Interested in innovator or guardian? Let us know via forms.dembrane.com/contact' linking to the contact form.

Confidence

Extremely high. The styling relies purely on existing Mantine variable tokens, respects internationalization via <Trans> tags, and aligns perfectly with the visual feedback request.

The card-level opacity fade capped the badge's contrast (child opacity
can't exceed the parent's), so the one label explaining why the card is
disabled was the least legible thing on it. Mute content per element
instead and render the badge as a filled graphite pill. Also exclude
coming-soon cards from the hover treatment.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants