docs: recolour the Get started button to the StackGuardian blue

documentation/src/pages/index.js

@@ -148,9 +148,13 @@ const content = {
 // Uses Docusaurus's own button classes rather than hand-rolled ones: they carry
 // a readable foreground in both light and dark mode. A custom rule here had set
 // the label to var(--ifm-background-color), which is #0000 in light mode -- so
-// the text was transparent on a purple fill.
+// the text was transparent on a purple fill. The primary button additionally
+// takes a CSS-module class that recolours it to the StackGuardian icon blue by
+// overriding the --ifm-button-* custom properties (see index.module.css).
 function Action({label, to, href, primary}) {
-  const className = `button button--lg ${primary ? 'button--primary' : 'button--secondary'}`;
+  const className = primary
+    ? `button button--lg button--primary ${styles.heroPrimary}`
+    : 'button button--lg button--secondary';
   return to ? (
     <Link className={className} to={to}>
       {label}

documentation/src/pages/index.module.css

@@ -53,6 +53,25 @@
   margin-top: 1.5rem;
 }
 
+/*
+ * The primary hero button uses the StackGuardian icon blue rather than the
+ * site primary. The icon's #007aff fails 4.5:1 against white (4.02:1), so the
+ * fill is the same hue darkened to #006ee6 (4.80:1), and darker again on
+ * hover. The label is pinned to opaque white because --ifm-button-color
+ * resolves differently per theme.
+ */
+.heroPrimary {
+  --ifm-button-background-color: #006ee6;
+  --ifm-button-border-color: #006ee6;
+  --ifm-button-color: #fff;
+}
+
+.heroPrimary:hover,
+.heroPrimary:active {
+  --ifm-button-background-color: #0062cc;
+  --ifm-button-border-color: #0062cc;
+}
+
 @media screen and (max-width: 996px) {
   .page {
     padding: 2rem 1rem 3rem;