Swap website colours of the Home page (#6029)

* Swap website colours of the Home page

Signed-off-by: SHRAVANI KAWARE <97099574+ShravaniAK@users.noreply.github.com>

* Add consistent corner rounding and spacing between buttons

Signed-off-by: SHRAVANI KAWARE <97099574+ShravaniAK@users.noreply.github.com>

---------

Signed-off-by: SHRAVANI KAWARE <97099574+ShravaniAK@users.noreply.github.com>

docs/stylesheets/extra.css

@@ -1,8 +1,8 @@
 :root {
   --md-primary-fg-color: #f3f1f2;
-  --md-primary-fg-color--dark: #0865AD;
-  --md-primary-fg-color--light: #6695CA;
-  --nav-item-color: #4d4d4d;
+  --md-primary-fg-color--dark: #0D4984;
+  --md-primary-fg-color--light: #6593C8;
+  --nav-item-color: #494848;
 }
 
 .md-clipboard {

overrides/assets/stylesheets/home.css

@@ -94,12 +94,15 @@ body {
   font-size: large;
   padding: 0.525em 1em;
   min-width: fit-content;
+  border-radius:0.7rem;
+  margin-left: 0.5rem;
 }
 
 .home-container .md-button,
 .need-to-know-more-container .md-button {
   background-color: var(--md-primary-fg-color--light);
   border-color: var(--md-primary-fg-color--light);
+  border-radius: 0.7rem;
 }
 
 .home-container .md-button--primary {
@@ -114,7 +117,7 @@ h2.secondary-headline, h3.trusted-by {
 }
 
 .home-container h1 {
-  color: var(--md-primary-fg-color--dark);
+  color: black;
   margin-top: 1em;
   margin-bottom: 0;
 }
@@ -224,6 +227,7 @@ h2.secondary-headline, h3.trusted-by {
   font-weight: 600;
   margin: 0 auto 2rem;
   max-width: 75%;
+  color:var(--nav-item-color);
 }
 
 .why-serverless-container .md-typeset h1,
@@ -273,7 +277,7 @@ h2.secondary-headline, h3.trusted-by {
 
 /* knative components container css */
 .knative-components-container h1 {
-  color: #7dc47e;
+  color: white;
 }
 
 .knative-components-container .text-table .normal-text {
@@ -308,7 +312,7 @@ h2.secondary-headline, h3.trusted-by {
 }
 
 .trying-it-all-container .md-typeset h2 {
-  color: var(--md-primary-fg-color--dark);
+  color: black;
   line-height: 1;
   margin-bottom: 1rem;
 }
@@ -337,6 +341,7 @@ h2.secondary-headline, h3.trusted-by {
   background-color: var(--md-primary-fg-color--dark);
   color: white;
   margin-top: 1em;
+  border-radius: 0.7rem;
 }
 
 .trying-it-all-container .md-button.call-to-action:hover {
@@ -387,7 +392,7 @@ h2.secondary-headline, h3.trusted-by {
 .case-studies-container .normal-text {
   text-align: start;
   padding: 0 2em;
-  color: var(--md-primary-fg-color--light);
+  color: var(--nav-item-color);
   font-weight: 600;
   font-style: italic;
   line-height: 1.1;
@@ -459,8 +464,8 @@ h2.secondary-headline, h3.trusted-by {
 
 .cncf-notice-container h3 {
   font-weight: bold;
-  color: var(--md-default-fg-color--light);
-  margin-top: 1rem;
+  color: var(--nav-item-color);
+  margin-top: 0;
 }
 
 .md-typeset img.cncf-logo {