Themed GNAT-o-sphere placards with project colors and Learn more buttons

[wrhalpin]

Each addon card now has:

• Themed border and h3 color (SandGNAT gold #D4A017, RedGNAT red #C0392B, SenseGNAT blue #2E86C1)
• "Addon" tag label in uppercase muted text
• Expanded description text
• "Learn more" button in the project's theme color linking to the project's GitHub Pages site
• Flex layout so buttons align at card bottom

Matches the card pattern from the gnat-o-sphere hub page.

https://claude.ai/code/session_01H5UbjsuiiGya5n1eUCxoaR

[Copilot]

Pull request overview

Updates the docs landing page “GNAT-o-sphere” section to use themed addon placards with consistent CTA buttons and a flex layout, aligning with the hub page’s card pattern.

Changes:

• Reworks GNAT-o-sphere cards into structured card blocks with an “Addon” tag and “Learn more” CTA links.
• Updates gnat-theme.css to make cards flex containers and adds per-addon theme styling (border/H3/button colors).

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
docs/index.html	Replaces simple addon cards with tagged, expanded-description cards and “Learn more” links.
docs/gnat-theme.css	Adds flex card layout + new styles for tag and CTA links, and introduces addon-specific theme colors.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The three links all use the generic label "Learn more", which makes the set of links ambiguous for screen readers and when listed out of context. Consider making the link text unique (e.g., "Learn more about SandGNAT") or add an aria-label that includes the addon name while keeping the visible text short.

Suggested change

	<a class="card-link card-link-sand" href="https://wrhalpin.github.io/SandGNAT/">Learn more</a>
	</div>
	<div class="card card-red">
	<span class="card-tag">Addon</span>
	<h3>RedGNAT</h3>
	<p>Continuous automated red teaming — ingest threat intel, construct adversary emulation scenarios, execute with safety controls.</p>
	<a class="card-link card-link-red" href="https://wrhalpin.github.io/RedGNAT/">Learn more</a>
	</div>
	<div class="card card-sense">
	<span class="card-tag">Addon</span>
	<h3>SenseGNAT</h3>
	<p>Network sensor and honeypot telemetry — high-volume ingestion from Kafka topics, Redis dedup, automatic campaign linking.</p>
	<a class="card-link card-link-sense" href="https://wrhalpin.github.io/SenseGNAT/">Learn more</a>
	<a class="card-link card-link-sand" href="https://wrhalpin.github.io/SandGNAT/" aria-label="Learn more about SandGNAT">Learn more</a>
	</div>
	<div class="card card-red">
	<span class="card-tag">Addon</span>
	<h3>RedGNAT</h3>
	<p>Continuous automated red teaming — ingest threat intel, construct adversary emulation scenarios, execute with safety controls.</p>
	<a class="card-link card-link-red" href="https://wrhalpin.github.io/RedGNAT/" aria-label="Learn more about RedGNAT">Learn more</a>
	</div>
	<div class="card card-sense">
	<span class="card-tag">Addon</span>
	<h3>SenseGNAT</h3>
	<p>Network sensor and honeypot telemetry — high-volume ingestion from Kafka topics, Redis dedup, automatic campaign linking.</p>
	<a class="card-link card-link-sense" href="https://wrhalpin.github.io/SenseGNAT/" aria-label="Learn more about SenseGNAT">Learn more</a>

[Copilot]

.card-link forces white text, but the SandGNAT (#D4A017) and SenseGNAT (#2E86C1) button background colors are likely below WCAG contrast requirements for normal-sized text. Consider switching those buttons to a darker text color or darkening the background colors so the contrast ratio meets accessibility guidelines.

Suggested change

	.card-link-sand{background:#D4A017;}
	.card-red{border-color:#C0392B;}
	.card-red h3{color:#C0392B;}
	.card-link-red{background:#C0392B;}
	.card-sense{border-color:#2E86C1;}
	.card-sense h3{color:#2E86C1;}
	.card-link-sense{background:#2E86C1;}
	.card-link-sand{
	background:#D4A017;
	color:#000;
	}
	.card-link-sand:hover{color:#000;}
	.card-red{border-color:#C0392B;}
	.card-red h3{color:#C0392B;}
	.card-link-red{background:#C0392B;}
	.card-sense{border-color:#2E86C1;}
	.card-sense h3{color:#2E86C1;}
	.card-link-sense{
	background:#2E86C1;
	color:#000;
	}
	.card-link-sense:hover{color:#000;}