Try a teal theme

src/components/About/index.jsx

@@ -74,18 +74,22 @@ export default function Stats() {
             <div className={styles.stats_container}>
                 <div className={styles.stats1_card}>
                     {stats1.map(({ number, content }, index) => (
-                        <div className={styles.card} key={index}>
-                            <h1 className="gradient_text">{number}</h1>
-                            <h3>{content}</h3>
-                        </div>
+                        <Link to="https://github.com/conda-forge/by-the-numbers">
+                            <div className={styles.card} key={index}>
+                                <h1 className="gradient_text">{number}</h1>
+                                <h3>{content}</h3>
+                            </div>
+                        </Link>
                     ))}
                 </div>
                 <div className={styles.stats2_card}>
                     {stats2.map(({ number, content }, index) => (
-                        <div className={styles.card} key={index}>
-                            <h1 className="gradient_text">{number}</h1>
-                            <h3>{content}</h3>
-                        </div>
+                        <Link to="https://github.com/conda-forge/by-the-numbers">
+                            <div className={styles.card} key={index}>
+                                <h1 className="gradient_text">{number}</h1>
+                                <h3>{content}</h3>
+                            </div>
+                        </Link>
                     ))}
                 </div>
             </div>

src/components/About/styles.module.css

@@ -49,6 +49,12 @@
   grid-template-columns: repeat(4, auto);
 }
 
+.stats1_card a,
+.stats2_card a {
+  text-decoration: none;
+  color: var(--ifm-font-color-base);
+}
+
 .card {
   background: var(--theme-card);
   border-radius: 15px;

src/components/Contributing/index.jsx

@@ -1,11 +1,13 @@
 import React from "react";
 import styles from "./styles.module.css";
+import Link from "@docusaurus/Link";
 
 const contributing = [
     {
         Svg: require("@site/static/img/contributing/edit.svg").default,
         alt: "GitHub edit pen tool icon",
         title: "Update A Package",
+        href: "/docs",
         content:
             "Edit the recipe as desired. You may even consider adding yourself as a recipe maintainer.",
         width: 50,
@@ -14,22 +16,25 @@ const contributing = [
         Svg: require("@site/static/img/contributing/issue.svg").default,
         alt: "GitHub issue icon",
         title: "Report An Issue",
+        href: "https://github.com/conda-forge/conda-forge.github.io/issues",
         content:
-            "Take a look to see if the issue has already been raised on the feedstock's issue tracker.",
+            "Take a look to see if the issue has already been raised on the issue tracker.",
         width: 50,
     },
     {
         Svg: require("@site/static/img/contributing/pr.svg").default,
         alt: "GitHub pull request icon",
         title: "Add A Recipe",
+        href: "https://github.com/conda-forge/staged-recipes",
         content:
-            'Add a new conda recipe in a new "recipes/[your-package-name]" directory.',
+            'Contribute a new conda recipe in a "recipes/[your-package-name]" directory in staged-recipes.',
         width: 50,
     },
     {
         Svg: require("@site/static/img/contributing/help.svg").default,
         alt: "Question mark icon",
         title: "Ask For Help",
+        href: "https://app.element.io/#/room/#conda-forge:matrix.org",
         content: (
             <>
                 Join the{" "}
@@ -57,15 +62,17 @@ export default function Contributing() {
                 <h1>Contributing to conda-forge</h1>
                 <p>For a package on conda-forge, I want to ...</p>
             </div>
-            {contributing.map(({ Svg, alt, title, content, width }, index) => (
-                <div
-                    className={styles.contributing_conda_forge_card}
-                    key={index}
-                >
-                    <Svg width={width} alt={alt} role="img" />
-                    <h3>{title}</h3>
-                    <p>{content}</p>
-                </div>
+            {contributing.map(({ Svg, alt, title, href, content, width }, index) => (
+                <Link to={href} className={styles.linked_card}>
+                    <div
+                        className={styles.contributing_conda_forge_card}
+                        key={index}
+                        >
+                        <Svg width={width} alt={alt} role="img" />
+                        <h3>{title}</h3>
+                        <p>{content}</p>
+                    </div>
+                </Link>
             ))}
         </div>
     );

src/components/Contributing/styles.module.css

@@ -53,10 +53,19 @@ h3 {
   margin-bottom: 1em;
 }
 
+.linked_card,
+.linked_card:hover,
+.linked_card:active {
+  text-decoration: none;
+  color: var(--ifm-font-color-base);
+}
 .contributing_conda_forge_card p {
   font-size: 16px;
   font-weight: 500;
 }
+.contributing_conda_forge_card a {
+  color: var(--theme-card-link-color);
+}
 
 @media screen and (max-width: 650px) {
   .contributing_conda_forge {

src/components/Supporters/styles.module.css

@@ -46,10 +46,16 @@
   justify-content: center;
   border-radius: 15px;
   padding: 3em 5em;
+  transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
+}
+
+.numfocus_card:hover {
+  transform: scale(0.9);
 }
 
 .numfocus_card a {
   background: none;
+  color: var(--theme-card-link-color);
 }
 
 .about_numfocus {
@@ -87,6 +93,7 @@
 
 .cardWrapper a {
   background: none;
+  color: var(--theme-card-link-color);
 }
 
 .cardWrapper:hover {

src/css/custom.css

@@ -20,6 +20,57 @@
   --ifm-font-heading-family: "Montserrat";
   --ifm-font-content-family: "Inter";
   transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
+  --ifm-color-primary: #008478;
+  --ifm-color-primary-dark: #007466;
+  --ifm-color-primary-darker: #00695c;
+  --ifm-color-primary-darkest: #004d40;
+  --ifm-color-primary-light: #26a69a;
+  --ifm-color-primary-lighter: #80cbc4;
+  --ifm-color-primary-lightest: #b2dfdb;
+  --ifm-color-secondary: #ebedf0;
+  --ifm-color-success: #388e3c;
+  --ifm-color-info: #1976d2;
+  --ifm-color-warning: #ef6c00;
+  --ifm-color-danger: #d84315;
+  --ifm-code-font-size: 95%;
+  --ifm-footer-link-hover-color: #4db6ac; /* Same as dark theme primary */
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+  --gradient: linear-gradient(
+    60deg,
+    var(--ifm-color-primary-darker) 0%,
+    var(--ifm-color-primary-light) 100%
+  );
+  --theme-card: #f6f6f6;
+  --theme-card-link-color: var(--ifm-color-primary-dark);
+  --dark-theme-bg-color: #1b1b1d;
+  --light-theme-bg-color: #fff;
+  --pydata-link-underline-thickness: max(1px, 0.0625rem);
+  --pydata-link-underline-offset: 0.1578em;
+  --pydata-link-hover-decoration-thickness: max(3px, 0.1875rem, 0.12em);
+}
+
+/* For readability concerns, you should choose a lighter palette in dark mode. */
+[data-theme="dark"] {
+  --ifm-color-primary: #4db6ac;
+  --ifm-color-primary-dark: #009688;
+  --ifm-color-primary-darker: #00897b;
+  --ifm-color-primary-darkest: #00796b;
+  --ifm-color-primary-light: #80cbc4;
+  --ifm-color-primary-lighter: #b2dfdb;
+  --ifm-color-primary-lightest: #e0f2f1;
+  --ifm-color-secondary: #ebedf0;
+  --ifm-color-success: #81c784;
+  --ifm-color-info: #64b5f6;
+  --ifm-color-warning: #ffb74d;
+  --ifm-color-danger: #ff8a65;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+  --gradient: linear-gradient(
+    60deg,
+    var(--ifm-color-primary-darker) 0%,
+    var(--ifm-color-primary) 100%
+  );
+  --theme-card: #3a3a3a;
+  --theme-card-link-color: var(--ifm-color-primary-light);
 }
 
 h1,
@@ -35,98 +86,117 @@ p {
   font-family: var(--ifm-font-content-family);
 }
 
+/*
+Hyperlink states are crucial for accessibility.
+Please double check before changing the rules below.
+*/
 a {
   text-decoration: underline;
+  text-decoration-thickness: var(--pydata-link-underline-thickness);
+  text-underline-offset: var(--pydata-link-underline-offset);
 }
 
-a:hover {
-  text-decoration: none;
+a:hover,
+/* We need to (re)override some of the infima rules to have proper states on
+navbar links, table of contents, and docs sidebar links, respectively */
+a.navbar__link:hover,  /* Top bar navigation links */
+a.table-of-contents__link:hover, /*Right sidebar links (table of contents) */
+a[class^="sidebarItemLink"]:hover /* The docs sidebar links do not have its own class */ {
+  text-decoration: underline;
+  text-decoration-thickness: var(--pydata-link-hover-decoration-thickness);
+  text-decoration-skip-ink: none;
+  text-decoration-skip: none;
 }
-
-a:focus {
-  background: #ffff00;
-  border-radius: 5px;
-  color: #000;
+a:active,
+a.navbar__link:active,
+a.table-of-contents__link:active,
+a[class^="sidebarItemLink"]:active {
+  text-decoration-thickness: var(--pydata-link-decoration-thickness);
 }
 
+/* In some cases, we override the underlines because there are other elements that
+already report the state (e.g. borders, background colors, etc) */
+a[class^="sidebarItemLink"][aria-current="page"], /* No underline if this is the current page */
+a.navbar__link,
 .navbar-sidebar__item,
-.menu a {
+.menu a,
+.navbar__items--right a,
+.pagination-nav__link,
+a.card, /* These cards are used in index-like documentation pages */
+a.card:hover {
   text-decoration: none;
 }
 
-.navbar__items--right a {
-  text-decoration: none;
+/* On these elements, we only rely on background color changes. They are navigation items,
+so they are already assumed to be clickable anyway */
+.pagination-nav__link:active,
+a.card:active,
+a.menu__link:active {
+  background: var(--ifm-color-primary-lightest);
+  color: #000;
+}
+[data-theme="dark"] .pagination-nav__link:active,
+[data-theme="dark"] a.card:active,
+[data-theme="dark"] a.menu__link:active {
+  background: var(--ifm-color-primary-darkest);
+  color: #fff;
 }
 
-.footer a:hover {
-  color: var(--ifm-color-primary-lightest);
+/* Animate the top navbar conda-forge logo a bit */
+.navbar__logo img:hover {
+  transform: scale(1.05);
+}
+.navbar__logo img:active {
+  transform: scale(1);
 }
 
+/* Used for accents in the frontpage */
 .gradient_text {
-  background: linear-gradient(62deg, #ff3664 0%, #ff4b2b 100%);
+  background: var(--gradient);
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
 
+/* The homepage button is used only under the hero text */
 .homepage_button {
   background:
     linear-gradient(#fff, #fff) padding-box,
-    linear-gradient(62deg, #ff3664 0%, #ff4b2b 100%) border-box;
+    var(--gradient) border-box;
   border: 2px solid transparent;
 }
-
-.homepage_button:hover {
+.homepage_button:hover,
+.homepage_button:focus,
+.homepage_button:focus:active {
   background:
     linear-gradient(#ebedf0, #ebedf0) padding-box,
-    linear-gradient(62deg, #ff3664 0%, #ff4b2b 100%) border-box;
+    var(--gradient) border-box;
+}
+.homepage_button:active {
+  transform: translateY(1px);
 }
 
-[data-theme="dark"] .button.button--secondary {
+/* Use a gradient border on most buttons;
+see how we avoid the "Collapse sidebar" button of the docs sidebar via the aria-label;
+not pretty but it's the best we can do so far */
+[data-theme="dark"]
+  .button.button--secondary:not([aria-label="Collapse sidebar"]) {
   background:
     linear-gradient(#3a3a3a, #3a3a3a) padding-box,
-    linear-gradient(62deg, #ff3664 0%, #ff4b2b 100%) border-box;
+    var(--gradient) border-box;
   border: 2px solid transparent;
   color: #ffffff;
 }
 
-[data-theme="dark"] .button.button--secondary:hover {
+[data-theme="dark"]
+  .button.button--secondary:hover:not([aria-label="Collapse sidebar"]) {
   background:
     linear-gradient(#4c4c4c, #4c4c4c) padding-box,
-    linear-gradient(62deg, #ff3664 0%, #ff4b2b 100%) border-box;
+    var(--gradient) border-box;
   border: 2px solid transparent;
   color: #ffffff;
 }
 
-:root {
-  --ifm-color-primary: #b34400;
-  --ifm-color-primary-dark: #a13d00;
-  --ifm-color-primary-darker: #983a00;
-  --ifm-color-primary-darkest: #7d3000;
-  --ifm-color-primary-light: #c54b00;
-  --ifm-color-primary-lighter: #ce4e00;
-  --ifm-color-primary-lightest: #e95800;
-  --ifm-code-font-size: 95%;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
-  --gradient: linear-gradient(60deg, #ff3664 0%, #ff4b2b 100%);
-  --theme-card: #f6f6f6;
-  --dark-theme-bg-color: #1b1b1d;
-  --light-theme-bg-color: #fff;
-}
-
-/* For readability concerns, you should choose a lighter palette in dark mode. */
-[data-theme="dark"] {
-  --ifm-color-primary: #ff5501;
-  --ifm-color-primary-dark: #e64c00;
-  --ifm-color-primary-darker: #da4800;
-  --ifm-color-primary-darkest: #b33b00;
-  --ifm-color-primary-light: #ff661b;
-  --ifm-color-primary-lighter: #ff6f27;
-  --ifm-color-primary-lightest: #ff884e;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
-  --theme-card: #3a3a3a;
-}
-
 .color-container {
   display: inline-flex;
   flex-direction: column;