Update docs home page design

1 files changed, 27 insertions, 171 deletions

diff --git a/content/assets/stylesheets/_variables.scss b/content/assets/stylesheets/_variables.scss
index a93b22c1a..a81ba820d 100644
--- a/content/assets/stylesheets/_variables.scss
+++ b/content/assets/stylesheets/_variables.scss
@@ -4,9 +4,6 @@ $sm-width: 768px;
 $md-width: 992px;
 $lg-width: 1400px;
 
-// Border radius
-$border-radius: 4px;
-
 // Border colors
 $introduced-in-border-color: #e3e3e3;
 
@@ -16,16 +13,13 @@ $sans-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto
 $body-font-size: 15px;
 $tooltip-font-size: 12px;
 $introduced-in-font-size: 13px;
+$landing-body-font-size: 16px;
 
 // Margins
 $h-margin-top: 10px;
 $h2-margin-top: 30px;
 $h-margin-bottom: 10px;
 
-// Padding
-$nav-item-padding: 7px;
-$sidebar-padding: 7px;
-
 // Heights
 $page-header-height: 40px;
 $banner-height: 31px;
@@ -100,6 +94,7 @@ $body-background-color: $gds-white; //body background
 $main-background-color: $gds-white; // content background
 $header-background-color: $gds-purple-900;
 $header-font-color: $gds-indigo-100;
+$header-free-trial-button-color: #cb4e18;
 
 // Link colors
 $link-color: $gds-blue-600;
@@ -202,12 +197,28 @@ $alert-code-background-color: rgb(242, 242, 242);
 $pre-code-color: transparent;
 
 // Home page colors
-$header-color: #55448d;
-$landing-gl-indigo: #41419f;
-$landing-sidebar-gray: #525252;
-$landing-sidebar-gray-light: #f0f0f0;
-$landing-sidebar-gray-400: #868686;
-$landing-sidebar-gray-500: #666;
+$landing-gl-purple-50: #c7c7f2;
+$landing-gl-purple-100: #e1d8f9;
+$landing-gl-purple-500: #7b58cf;
+$landing-gl-purple-550: #6e49cb;
+$landing-gl-purple-600: #694cc0;
+$landing-gl-purple-700: #5943b6;
+$landing-gl-indigo-950: #32304e;
+$landing-gl-gray-50: #fafafa;
+$landing-gl-white-500: #ebe5f7;
+$landing-gl-gray-500: #666;
+$landing-gl-gray-600: #5e5e5e;
+$landing-gl-black-0: rgba(255, 255, 255, 0);
+$landing-gl-black-50: rgba(0, 0, 0, .24);
+$landing-gl-black-100: rgba(255, 255, 255, .16);
+$landing-gl-blue-200: rgba(102, 102, 196, .24);
+$landing-gl-blue-600: #171537;
+$landing-gl-blue-950: rgba(36, 34, 66, .24);
+$landing-gl-blue-1000: rgba(36, 34, 66, .25);
+
+// Footer colors
+$footer-gray-400: #868686;
+$footer-gray-500: #666;
 
 // Help & feedback section colors
 $help-indigo-50: #f1f1ff;
@@ -230,167 +241,12 @@ $black: #333;
 
 // Colors
 $color-white: #fff;
-$color-white-alt: #d9ccff;
-$color-transparent: rgba(0, 0, 0, 0);
-$color-dark: #000;
 $color-gray: #777;
 $color-gray-medium: #ddd;
-$color-gray-light: #aaa;
-$color-gray-extra-light: #e7e7e7;
 $color-light-gray: rgb(117, 117, 117);
-$color-green: #18be97;
-$color-red: #f00;
-$color-primary: #548;
-$color-primary-alt: #6b4fbb;
-$color-secondary: #e14329;
-$color-secondary-alt: #fba225;
-$color-primary-medium: #503991;
-
-$header-text-light-color: #a69ebd;
-
-$team-content-color: #999;
-$member-name-color: #333;
-$member-shadow-color: #ccc;
-$member-social-color: #ccc;
-
-$blog-color-text: #222;
-$blog-color-note: #666;
-$blog-color-heading: #fff;
-$blog-color-purple: rgb(107, 79, 187);
-$blog-color-mk-border: #ccc;
-$blog-color-date: #888;
-$blog-color-overlay-border: #eee;
-$blog-color-border-shadow: rgba(0, 0, 0, .1);
-$blog-color-image-from: rgba(0, 0, 0, 0);
-$blog-color-image-to: rgba(0, 0, 0, .8);
-$blog-color-ipanel-heading: rgba(221, 221, 221, .5);
-$blog-color-legacy-image-from: rgba(85, 68, 136, .8);
-$blog-color-legacy-image-to: rgba(72, 135, 197, .92);
-
-// legacy blog variables that were used by other pages
-
-$blog-date-color: #999;
-$blog-text-color: #444;
-$blog-notes-color: #606060;
-$blog-image-color-to: #4887c5;
-$blog-divider-color: #128bee;
-$blog-table-background: #faf9f9;
-$blog-table-background-hover: #f4f8fe;
-$blog-table-border: #efeff1;
-
-$release-manager-list-bg: #403366;
-$release-manager-table-border: #584985;
-$release-manager-table-header-color: #9583c9;
-$release-manager-current-table-data-color: #ff9;
-
-$mvp-list-bg: #403366;
-$mvp-table-border: #584985;
-$mvp-table-header-color: #9583c9;
-
-$landing-community-bg: #34373c;
-
-$downloads-btn-color: #7769a0;
-$downloads-btn-hover-color: #403366;
-$downloads-code-color: #403366;
-$downloads-step-link-color: #ffb800;
-$downloads-step-color: #e3dcf7;
-
-$contact-color: #bbb4cf;
-$contact-btn-bg: #887ab6;
-
-$consultancy-bg-color: #272120;
-
-$gs-btn-bg: #129bee;
-$gs-btn-hover-bg: #6144b8;
-
-$applications-title-color: #373737;
-$applications-app-shadow-color: #e0e0e0;
-
-$link-box-color: #333;
-$link-box-border-color: #7863b6;
-$link-box-hover-bg: #f4f0ff;
-
-$pricing-primary: #129bee;
-$subscription-header-bg: #444;
-$subs-header-color: #242424;
-$subs-header-sub-color: #979797;
-$subs-header-hr-color: #d4d4d4;
-$pricing-header-color-to: #4887c5;
-$pricing-gray-bg: #fafafa;
-
-$blueish-gray: #a1a1a2;
-
-$dropdown-text-color: #626262;
-$dropdown-caret-color: #c4c4c4;
-$dropdown-border-color: #eaeaea;
-$dropdown-focus-color: #c4c4c4;
-$dropdown-hover-color: #f7faff;
-
-$dropdown-filter-border-color: rgba(0, 0, 0, .1);
-$dropdown-fa-color: #c7c7c7;
-$dropdown-fa-focus-color: #555;
-
-$formula-variable-bg: #f9f9f9;
-$formula-text-color: #9d9d9d;
-$formula-value-color: #444;
-
-// Bootstrap overrides
-$breadcrumb-separator: ">";
-$breadcrumb-bg: darken($color-white, 2%);
-
-$container-large-desktop: 1200px;
-
-$body-bg: #f9f9f9;
-
-$grid-float-breakpoint: 992px;
-$screen-sm-min: 768px;
-
-$navbar-default-bg: #fff;
-$navbar-default-toggle-icon-bar-bg: $color-primary;
-$navbar-default-link-color: #8c929d;
-$navbar-default-link-hover-color: $color-primary;
-$navbar-default-link-active-color: $color-primary;
-$navbar-default-link-active-bg: transparent;
-$navbar-default-border: #d7d7d7;
-
-$dropdown-bg: #019875;
-$dropdown-link-color: #fff;
-$dropdown-link-hover-color: #18be97;
-
-$search-input-font-color: $white;
-$search-placeholder-font-color: $gds-indigo-100;
-$search-border-color: #bcbcbc;
-$search-background-color: #4b4c7b;
-
-$reseller-divider-color: $navbar-default-border;
-$reseller-hero-bg-color: #35393d;
-$reseller-hero-content-color: #969696;
-$reseller-category-active-background-color: rgba(255, 255, 255, .4);
-
-$applications-search-box-shadow-color: rgba($color-dark, .5);
-
-$features-gradient-end: rgba(148, 149, 150, 1);
-$features-gradient-begin: rgba(0, 0, 0, .91);
-$features-semi-transparent-white: rgba(255, 255, 255, .15);
-$features-semi-transparent-gray: rgba(180, 180, 180, .15);
-$features-semi-transparent-gray-link: rgba(180, 180, 180, .50);
-$features-semi-transparent-black: rgba(12, 12, 12, .47);
-$features-semi-transparent-purple: rgba(107, 79, 187, .50);
-$features-barely-transparent-white: rgba(255, 255, 255, .5);
-$features-gray-light-barely-transparent: rgba(170, 170, 170, .5);
-$features-gallery-background-gradient-begin: #6b4fbb;
-$features-gallery-background-gradient-middle: #5942a0;
-$features-gallery-background-gradient-end: #42327a;
-$features-gallery-alt-description-black: rgba(0, 0, 0, .7);
-
-$ee-standalone-primary-background-gradient: linear-gradient(to right, $color-primary-alt 0%, $features-gallery-background-gradient-middle 40%, $features-gallery-background-gradient-end 100%);
-$ee-standalone-hero-background-top: rgba(52, 55, 60, .85);
-$ee-standalone-hero-background-gradient: linear-gradient(to bottom, $ee-standalone-hero-background-top, $landing-community-bg 85%);
-
-$facebook-bg: #3b5998;
-$twitter-bg: #55acee;
-$google-bg: #dd4b39;
-$linkedin-bg: #007bb5;
+
+// Social colors
 $youtube: #f00;
 
+// Article colors
 $article-metadata: rgb(110, 110, 110);