docs: recolour the Get started button to the StackGuardian blue

[refeed]

Recolours the hero Get started button to the blue from the StackGuardian icon.

Scoped to the button, on purpose

The colour is applied by overriding the --ifm-button-* custom properties on a CSS-module class, added alongside Docusaurus's own button--primary:

.heroPrimary {
  --ifm-button-background-color: #006ee6;
  --ifm-button-border-color: #006ee6;
  --ifm-button-color: #fff;
}

--ifm-color-primary in custom.css is deliberately untouched. That variable also drives link colour, sidebar highlights and admonitions on every page, so changing it would repaint the whole site to recolour one button. The secondary "GitHub" button is unchanged.

The icon's exact blue fails contrast, so the fill is one shade darker

Sampled from the source PNG with a standard-library decoder: the dominant opaque colour is #007aff, confirmed at seven probe points and by a histogram over the image.

White on #007aff is 4.02:1, which is below the 4.5:1 WCAG AA threshold for normal text. Rather than ship that, the fill is the same hue darkened to #006ee6 — 4.80:1 — with hover and active at #0062cc (5.80:1). It reads as the icon blue while remaining legible.

If you would rather have the exact #007aff, it is a one-character change and the button text is large, where AA only requires 3:1 — but it is a conscious trade, so I did not make it silently.

The label is pinned to opaque white

Not left to --ifm-button-color, which resolves through --ifm-font-color-base-inverse and flips per theme. That variable is how this button's text ended up invisible once already — an earlier version set the label to var(--ifm-background-color), which is #0000 in light mode. Literal #fff renders identically in both themes.

Verified

npm run build succeeds, and the change is present in the output rather than only in source:

• build/assets/css/styles.*.css contains .heroPrimary_i6PQ{--ifm-button-background-color:#006ee6;…--ifm-button-color:#fff} and the hover/active rule.
• build/index.html shows class="button button--lg button--primary heroPrimary_i6PQ" on the Get started anchor; the GitHub anchor still carries only button--secondary.

Infima wraps its .button--primary rules in :where(), so a single module class wins on base, hover and active without !important.

Based on main, and touches different files from #277, so the two do not conflict.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[sonarqubecloud]

❌ The last analysis has failed.

See analysis details on SonarQube Cloud

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

[refeed]

Superseded by #279, which carries this commit unchanged alongside the logo change so the two land as one review.