Add back in new cert image and fix background color (#2524)

* Revert "Revert "Add new cert image and fix background color" (#2521)" This reverts commit 6ba4967. * Update graphics to work in light mode * Approximate the background as best as I can * Even closer approximation * Go back to the correct background
hashicorp · Jul 30, 2024 · 73bf5a1 · 73bf5a1
1 parent 2695814
commit 73bf5a1
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 106 deletions.
diff --git a/src/views/homepage/components/featured-content-grid/certifications-featured-card.module.css b/src/views/homepage/components/featured-content-grid/certifications-featured-card.module.css
@@ -10,6 +10,12 @@
 	border: none;
 	padding-top: 0;
 	gap: 70px;
+	background: linear-gradient(
+			185deg,
+			rgba(118, 160, 243, 0.2) -18.65%,
+			rgba(82, 42, 194, 0) 54.49%
+		),
+		#15181e;
 
 	@media (--dev-dot-mobile) {
 		--graphic-max-height: 38vh;
@@ -35,6 +41,7 @@
 	height: 100%;
 	max-width: 400px;
 	width: 100%;
+	mask-image: linear-gradient(rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 100%);
 }
 
 .certificationsCardContentText {

diff --git a/src/views/homepage/components/featured-content-grid/featured-card.module.css b/src/views/homepage/components/featured-content-grid/featured-card.module.css
@@ -19,7 +19,6 @@
 	}
 
 	@nest html[data-theme='dark'] & {
-		background-color: var(--token-color-foreground-high-contrast);
 		color: var(--token-color-foreground-strong);
 	}
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -19,7 +19,6 @@ @@
     	}
     	@nest html[data-theme='dark'] & {
-    		background-color: var(--token-color-foreground-high-contrast);
     		color: var(--token-color-foreground-strong);
     	}
     }
@@ Expand Down @@