Fix: Text selection issue on homepage

[charlie-ashford]

Homepage text selection should invert colors on green backgrounds

Summary

Two components on the homepage use a green background (#2d5a2d) with light text (#f0f0e8). When selecting text inside these components, the global ::selection rule applies the accent highlight color, which makes the selection visually inconsistent with the component styling, making the text appear as if it's not selected.
This issue proposes overriding the selection behavior for these elements so that text selection inverts the component colors, improving readability, accessibility and visual consistency.

Badge — before	Badge — after
Quote — before	Quote — after

---

Current Behavior

The site defines a global text selection style:

::selection {
  background: var(--accent);
  color: var(--foreground-inverse);
}

This causes highlighted text inside the green components to use the accent highlight instead of inverting the component colors.

---

Expected Behavior

When selecting text inside the following green components:

• Homepage quote section
• Homepage "Less features. No bull$#!t." badge

The selection should invert the colors:

State	Background	Text
Normal	#2d5a2d	#f0f0e8
Selected	#f0f0e8	#2d5a2d

This creates a natural inverted highlight effect that matches the component design.

---

Proposed Solution

Add a scoped ::selection override for elements using the green accent background.

/* Invert selection colors for accent blocks */
[class~="bg-[#2d5a2d]"] ::selection {
  background: #f0f0e8;
  color: #2d5a2d;
}
[class~="bg-[#2d5a2d]"]::-moz-selection,
[class~="bg-[#2d5a2d]"] ::-moz-selection {
  background: #f0f0e8;
  color: #2d5a2d;
}

---

Result

Text selection inside green components becomes visually inverted. This improves contrast and keeps the interaction feeling intentional rather than inheriting the global highlight style. It only affects the homepage quote block and the "Less features. No bull$#!t." badge component.

---

Prompt

Use this prompt to apply the change with AI.

Find the global stylesheet where `::selection` is defined. Locate the existing rule:

::selection {
  background: var(--accent);
  color: var(--foreground-inverse);
}

Immediately after it, add the following scoped override to invert text selection colors for elements using the green accent background (`#2d5a2d`):

/* Invert selection colors for green accent blocks */
[class~="bg-[#2d5a2d]"] ::selection {
  background: #f0f0e8;
  color: #2d5a2d;
}
[class~="bg-[#2d5a2d]"]::-moz-selection,
[class~="bg-[#2d5a2d]"] ::-moz-selection {
  background: #f0f0e8;
  color: #2d5a2d;
}

---