style: Color themed homepage cards

assets/css/custom.css

@@ -184,25 +184,48 @@ h1, .content h1, .content h2, .content h3 {
   --hx-font-sans: "Public Sans", Helvetica, ui-sans-serif, system-ui, sans-serif;
 }
 
-:root:has(body.recommended-privacy-tools) {
+:root:has(body.recommended-privacy-tools), body.privacy-guides .hextra-feature-grid a[href*="tools"] {
   --primary-hue: 200deg;
   --primary-saturation: 37.75%;
   --primary-lightness: 70.39%;
-  --hx-font-sans: "Public Sans", Helvetica, ui-sans-serif, system-ui, sans-serif;
 }
 
-:root:has(body.privacy-wiki) {
+:root:has(body.privacy-wiki), body.privacy-guides .hextra-feature-grid a[href*="wiki"] {
   --primary-hue: 167.57deg;
   --primary-saturation: 97.13%;
   --primary-lightness: 40.98%;
-  --hx-font-sans: "Public Sans", Helvetica, ui-sans-serif, system-ui, sans-serif;
 }
 
-:root:has(body.privacy-activism) {
+:root:has(body.privacy-activism), body.privacy-guides .hextra-feature-grid a[href*="activism"] {
   --primary-hue: 5deg;
   --primary-saturation: 96.43%;
   --primary-lightness: 56.08%;
-  --hx-font-sans: "Public Sans", Helvetica, ui-sans-serif, system-ui, sans-serif;
+}
+
+body.privacy-guides .hextra-feature-grid a[href*="youtube.com"] {
+  --primary-hue: 259.83deg;
+  --primary-saturation: 95.04%;
+  --primary-lightness: 76.27%;
+}
+
+body.privacy-guides .hextra-feature-grid a[href*="discuss.privacyguides.net"] {
+  --primary-hue: 33deg;
+  --primary-saturation: 100%;
+  --primary-lightness: 92.16%;
+}
+
+body.privacy-guides .hextra-feature-grid a[href*="news"] {
+  --primary-hue: 217.97deg;
+  --primary-saturation: 100%;
+  --primary-lightness: 69.02%;
+}
+
+body.privacy-guides .hextra-feature-grid a.pg\:colored-card:has(img) {
+  background: radial-gradient(ellipse at 50% 80%,hsl(var(--primary-hue)var(--primary-saturation)calc(var(--primary-lightness) + calc(calc(100% - var(--primary-lightness))/50)*16)),hsla(0,0%,100%,0));
+}
+
+.hextra-feature-grid img {
+  filter: opacity(85%)
 }
 
 .hextra-nav-container {

content/_index.md

@@ -3,7 +3,7 @@ title: Privacy Guides
 layout: pg-home
 ---
 
-{{< hextra/hero-container image="brand/logos/svg/square/pg-yellow-nobg.svg"  imageTitle="Privacy Guides shield logo" >}}
+{{< hextra/hero-container image="brand/logos/svg/square/pg-yellow-nobg.svg" imageTitle="Privacy Guides shield logo" imageClass="hx:sm:block hx:hidden" >}}
 
 <div class="hx:mt-6 hx:mb-6">
 {{< hextra/hero-headline >}}
@@ -36,55 +36,49 @@ layout: pg-home
   {{< hextra/feature-card
     title="Privacy Wiki"
     subtitle="A comprehensive resource for understanding digital privacy concepts and best practices."
-    class="hx:aspect-auto hx:md:aspect-[1.1/1] hx:max-md:min-h-[340px]"
+    class="hx:aspect-auto hx:md:aspect-[1.1/1] hx:max-md:min-h-[340px] pg:colored-card"
     image="pg-home-privacy-wiki.png"
     imageClass="hx:top-[40%] hx:left-[24px] hx:w-[180%] hx:sm:w-[110%] hx:dark:opacity-80"
-    style="background: radial-gradient(ellipse at 50% 80%,rgba(53, 142, 62, 0.15),hsla(0,0%,100%,0));"
     link="wiki"
   >}}
   {{< hextra/feature-card
     title="Educational Videos"
     subtitle="Watch our educational videos to learn more about digital privacy and how to protect yourself online."
-    class="hx:aspect-auto hx:md:aspect-[1.1/1] hx:max-md:min-h-[340px]"
+    class="hx:aspect-auto hx:md:aspect-[1.1/1] hx:max-md:min-h-[340px] pg:colored-card"
     image="pg-home-youtube.png"
     imageClass="hx:top-[40%] hx:left-[24px] hx:w-[180%] hx:sm:w-[110%] hx:dark:opacity-80"
-    style="background: radial-gradient(ellipse at 50% 80%,rgba(221,210,59,0.15),hsla(0,0%,100%,0));"
     link="https://youtube.com/@PrivacyGuides"
   >}}
   {{< hextra/feature-card
     title="Activism Toolbox"
     subtitle="Get involved in privacy activism and help us build a more private internet."
-    class="hx:aspect-auto hx:md:aspect-[1.1/1] hx:max-md:min-h-[340px]"
+    class="hx:aspect-auto hx:md:aspect-[1.1/1] hx:max-md:min-h-[340px] pg:colored-card"
     image="pg-home-privacy-activism.png"
     imageClass="hx:top-[40%] hx:left-[24px] hx:w-[180%] hx:sm:w-[110%] hx:dark:opacity-80"
-    style="background: radial-gradient(ellipse at 50% 80%,rgba(221, 59, 59, 0.15),hsla(0,0%,100%,0));"
     link="activism"
   >}}
   {{< hextra/feature-card
     title="Privacy Tools"
     subtitle="The essential tools you need to safeguard your digital privacy, chosen by community consensus."
-    class="hx:aspect-auto hx:md:aspect-[1.1/1] hx:max-md:min-h-[340px]"
+    class="hx:aspect-auto hx:md:aspect-[1.1/1] hx:max-md:min-h-[340px] pg:colored-card"
     image="pg-home-privacy-tools.png"
     imageClass="hx:top-[40%] hx:left-[24px] hx:w-[180%] hx:sm:w-[110%] hx:dark:opacity-80"
-    style="background: radial-gradient(ellipse at 50% 80%,rgba(0, 0, 0, 0.15),hsla(0,0%,100%,0));"
     link="tools"
   >}}
   {{< hextra/feature-card
     title="Community Forum"
     subtitle="Join the conversation, get answers, and connect with others who share your commitment to digital privacy."
-    class="hx:aspect-auto hx:md:aspect-[1.1/1] hx:max-md:min-h-[340px]"
+    class="hx:aspect-auto hx:md:aspect-[1.1/1] hx:max-md:min-h-[340px] pg:colored-card"
     image="pg-home-privacy-forum.png"
     imageClass="hx:top-[40%] hx:left-[24px] hx:w-[180%] hx:sm:w-[110%] hx:dark:opacity-80"
-    style="background: radial-gradient(ellipse at 50% 80%,rgba(59, 202, 221, 0.15),hsla(0,0%,100%,0));"
     link="https://discuss.privacyguides.net"
   >}}
   {{< hextra/feature-card
     title="News Briefs"
     subtitle="Stay updated with the latest news and developments in the world of cybersecurity, privacy, and digital rights."
-    class="hx:aspect-auto hx:md:aspect-[1.1/1] hx:max-md:min-h-[340px]"
+    class="hx:aspect-auto hx:md:aspect-[1.1/1] hx:max-md:min-h-[340px] pg:colored-card"
     image="pg-home-privacy-news.png"
     imageClass="hx:top-[40%] hx:left-[24px] hx:w-[180%] hx:sm:w-[110%] hx:dark:opacity-80"
-    style="background: radial-gradient(ellipse at 50% 80%,rgba(183, 59, 221, 0.15),hsla(0,0%,100%,0));"
     link="news"
   >}}
 {{< /hextra/feature-grid >}}