From 850f3291b1f3895d24110affdbd560fdcf76a099 Mon Sep 17 00:00:00 2001
From: Alina Derkach <alina.derkach@percona.com>
Date: Thu, 2 May 2024 13:40:44 +0300
Subject: [PATCH] DISTMYSQL-416 Apply new colour scheme, add links and icons to
 all the projects (8.0) (#151)

* DISTMYSQL-416 Apply new colour scheme, add links and icons to all the projects
	modified:   _resource/overrides/partials/header.html
	new file:   docs/assets/mysql-fav.svg
	new file:   docs/assets/mysql-mark.svg
	modified:   docs/css/design.css
	new file:   docs/css/landing.css
	new file:   docs/css/mysql.css
	modified:   mkdocs-base.yml

* Update header.html
---
 _resource/overrides/partials/header.html | 121 +++++---
 docs/assets/mysql-fav.svg                |  18 ++
 docs/assets/mysql-mark.svg               |  13 +
 docs/css/design.css                      | 365 +++++++++++++++++++----
 docs/css/landing.css                     | 301 +++++++++++++++++++
 docs/css/mysql.css                       |  67 +++++
 mkdocs-base.yml                          |  37 +--
 7 files changed, 804 insertions(+), 118 deletions(-)
 create mode 100644 docs/assets/mysql-fav.svg
 create mode 100644 docs/assets/mysql-mark.svg
 create mode 100644 docs/css/landing.css
 create mode 100644 docs/css/mysql.css

diff --git a/_resource/overrides/partials/header.html b/_resource/overrides/partials/header.html
index d3d6a886..d09eb0f4 100644
--- a/_resource/overrides/partials/header.html
+++ b/_resource/overrides/partials/header.html
@@ -1,24 +1,64 @@
-{#-
-  This file was automatically generated - do not edit
--#}
-<header class="md-header" data-md-component="header">
-  <nav class="md-header__inner md-grid" aria-label="{{ lang.t('header') }}">
-    <a href="https://percona.com/software/documentation" class="md-header__button md-logo" aria-label="Percona Product Documentation" data-md-component="logo">
+<!-- Determine classes -->
+{% set class = "md-header" %}
+{% if "navigation.tabs.sticky" in features %}
+  {% set class = class ~ " md-header--shadow md-header--lifted" %}
+{% elif "navigation.tabs" not in features %}
+  {% set class = class ~ " md-header--shadow" %}
+{% endif %}
+
+<!-- Header -->
+<header class="{{ class }}" data-md-component="header">
+
+  <!-- Super Nav -->
+  <div class="superNav">
+    <div class="md-header__inner md-grid">
+      <a href="https://docs.percona.com/percona-for-mysql/" title="Percona Documentation home page">
+        <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+          <mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+            <path d="M0 0h24v24H0z"/>
+          </mask>
+          <g mask="url(#a)">
+            <path d="m7.825 13 5.6 5.6L12 20l-8-8 8-8 1.425 1.4-5.6 5.6H20v2H7.825Z"/>
+          </g>
+        </svg>
+        <span>Percona Documentation</span>
+      </a>
+    </div>
+  </div>
+
+  <nav
+    class="md-header__inner md-grid"
+    aria-label="{{ lang.t('header') }}"
+  >
+
+    <!-- Link to home -->
+    <a
+      href="{{ config.extra.homepage | d(nav.homepage.url, true) | url }}"
+      title="{{ config.site_name | e }}"
+      class="md-header__button md-logo"
+      aria-label="{{ config.site_name }}"
+      data-md-component="logo"
+    >
       {% include "partials/logo.html" %}
     </a>
+
+    <!-- Button to open drawer -->
     <label class="md-header__button md-icon" for="__drawer">
-      {% include ".icons/material/menu" ~ ".svg" %}
+      {% set icon = config.theme.icon.menu or "material/menu" %}
+      {% include ".icons/" ~ icon ~ ".svg" %}
     </label>
-    <div class="md-header__title" data-md-component="header-title">
+
+    <!-- Header title -->
+    <div class="md-header__title">
       <div class="md-header__ellipsis">
-        <div class="md-header__topic">
+        <a href="{{ config.extra.homepage | d(nav.homepage.url, true) | url }}" class="md-header__topic">
           <span class="md-ellipsis">
             {{ config.site_name }}
           </span>
-        </div>
+        </a>
         <div class="md-header__topic" data-md-component="header-topic">
           <span class="md-ellipsis">
-            {% if page and page.meta and page.meta.title %}
+            {% if page.meta and page.meta.title %}
               {{ page.meta.title }}
             {% else %}
               {{ page.title }}
@@ -27,50 +67,47 @@
         </div>
       </div>
     </div>
+
+    <!-- Color palette toggle -->
+    {% if config.theme.palette %}
+      {% if not config.theme.palette is mapping %}
+        {% include "partials/palette.html" %}
+      {% endif %}
+    {% endif %}
+
+    <!-- User preference: color palette -->
     {% if not config.theme.palette is mapping %}
-      <form class="md-header__option" data-md-component="palette">
-        {% for option in config.theme.palette %}
-        {% set scheme = option.scheme | d("default", true) %}
-        <input class="md-option" data-md-color-media="{{ option.media }}" data-md-color-scheme="{{ scheme | replace(' ', '-') }}" data-md-color-primary="{{ option.primary | replace(' ', '-') }}" data-md-color-accent="{{ option.accent | replace(' ', '-') }}" {% if option.toggle %} aria-label="{{ option.toggle.name }}" {% else %} aria-hidden="true" {% endif %} type="radio" name="__palette" id="__palette_{{ loop.index }}">
-          {% if option.toggle %}
-            <label class="md-header__button md-icon" title="{{ option.toggle.name }}" for="__palette_{{ loop.index0 or loop.length }}" hidden>
-              {% include ".icons/" ~ option.toggle.icon ~ ".svg" %}
-            </label>
-          {% endif %}
-        {% endfor %}
-      </form>
+      {% include "partials/javascripts/palette.html" %}
     {% endif %}
+
+    <!-- Site language selector -->
     {% if config.extra.alternate %}
-      <div class="md-header__option">
-        <div class="md-select">
-          {% set icon = config.theme.icon.alternate or "material/translate" %}
-          <button class="md-header__button md-icon"  aria-label="{{ lang.t('select.language') }}">
-            {% include ".icons/" ~ icon ~ ".svg" %}
-          </button>
-          <div class="md-select__inner">
-            <ul class="md-select__list">
-              {% for alt in config.extra.alternate %}
-                <li class="md-select__item">
-                  <a href="{{ alt.link | url }}" hreflang="{{ alt.lang }}" class="md-select__link">
-                    {{ alt.name }}
-                  </a>
-                </li>
-                {% endfor %}
-            </ul>
-          </div>
-        </div>
-      </div>
+      {% include "partials/alternate.html" %}
     {% endif %}
+
+    <!-- Button to open search modal -->
     {% if "material/search" in config.plugins %}
       <label class="md-header__button md-icon" for="__search">
-        {% include ".icons/material/magnify.svg" %}
+        {% set icon = config.theme.icon.search or "material/magnify" %}
+        {% include ".icons/" ~ icon ~ ".svg" %}
       </label>
+
+      <!-- Search interface -->
       {% include "partials/search.html" %}
     {% endif %}
+
+    <!-- Repository information -->
     {% if config.repo_url %}
       <div class="md-header__source">
         {% include "partials/source.html" %}
       </div>
     {% endif %}
   </nav>
+
+  <!-- Navigation tabs (sticky) -->
+  {% if "navigation.tabs.sticky" in features %}
+    {% if "navigation.tabs" in features %}
+      {% include "partials/tabs.html" %}
+    {% endif %}
+  {% endif %}
 </header>
diff --git a/docs/assets/mysql-fav.svg b/docs/assets/mysql-fav.svg
new file mode 100644
index 00000000..a91a9d94
--- /dev/null
+++ b/docs/assets/mysql-fav.svg
@@ -0,0 +1,18 @@
+<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="160" height="160" rx="24" fill="url(#paint0_radial_1381_9227)"/>
+<g clip-path="url(#clip0_1381_9227)">
+<path d="M46.2616 120.047H26.5081L36.5853 102.546V90.3789L16 126.125H57.4878L46.2616 120.047Z" fill="white" fill-opacity="0.33"/>
+<path d="M127.423 97.3385L123.408 90.3669V102.534L133.491 120.047H113.636L102.422 126.125H143.999L127.423 97.3385Z" fill="white" fill-opacity="0.33"/>
+<path d="M70.8568 43.0361L80.0005 27.1612L89.0665 42.8981L99.2454 48.4118L80.0005 15L60.6719 48.5557L70.8568 43.0361Z" fill="white" fill-opacity="0.33"/>
+<path d="M41.1934 112.025V98.7302L44.7539 96.7743L41.1934 94.8245V81.4814L44.7539 79.5555L41.1934 77.6476V64.2625L80.0003 43.2939L118.807 64.2565V77.6236L115.247 79.5555L118.807 81.4874V93.9065C118.807 94.4885 118.49 95.0285 117.975 95.3044L115.247 96.7803L118.813 98.6582V112.085L79.9704 133L41.2053 112.025H41.1934ZM81.5801 120.689V128.566L115.642 110.177V102.3L81.5801 120.689ZM44.359 110.183L78.4205 128.572V120.695L44.359 102.306V110.183ZM46.1123 99.6481L80.0003 117.941L113.888 99.6481L111.908 98.5802L79.9404 115.751L48.093 98.5802L46.1123 99.6481ZM81.5801 103.464V111.341L115.642 92.9526V85.0751L81.5801 103.464ZM44.359 92.9586L78.4205 111.347V103.47L44.359 85.0811V92.9586ZM46.1123 82.4233L80.0003 100.716L113.888 82.4233L111.908 81.3554L80.0003 98.5382L48.093 81.3554L46.1123 82.4233ZM81.5801 86.239V94.1165L115.642 75.7278V67.8503L81.5801 86.239ZM44.359 75.7338L78.4205 94.1225V86.245L44.359 67.8563V75.7338ZM46.1123 65.1985L80.0003 83.4912L113.888 65.1985L80.0003 46.9057L46.1123 65.1985Z" fill="white"/>
+</g>
+<defs>
+<radialGradient id="paint0_radial_1381_9227" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(158 1.5) rotate(0.148661) scale(225.435)">
+<stop stop-color="#30D1B2"/>
+<stop offset="0.765433" stop-color="#0E5FB5"/>
+</radialGradient>
+<clipPath id="clip0_1381_9227">
+<rect width="128" height="118" fill="white" transform="translate(16 15)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/docs/assets/mysql-mark.svg b/docs/assets/mysql-mark.svg
new file mode 100644
index 00000000..dda76879
--- /dev/null
+++ b/docs/assets/mysql-mark.svg
@@ -0,0 +1,13 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1382_9241)">
+<path d="M24.6962 82.7852H9.88107L17.439 69.6596V60.5342L2 87.3434H33.1159L24.6962 82.7852Z" fill="white" fill-opacity="0.33"/>
+<path d="M85.5676 65.7538L82.5561 60.5251V69.6505L90.1185 82.7851H75.2271L66.8164 87.3433H97.9996L85.5676 65.7538Z" fill="white" fill-opacity="0.33"/>
+<path d="M43.1426 25.0271L50.0004 13.1209L56.7998 24.9236L64.4341 29.0588L50.0004 4L35.5039 29.1668L43.1426 25.0271Z" fill="white" fill-opacity="0.33"/>
+<path d="M20.8945 76.769V66.7976L23.5649 65.3307L20.8945 63.8683V53.861L23.5649 52.4166L20.8945 50.9857V40.9469L49.9997 25.2205L79.1049 40.9424V50.9677L76.4345 52.4166L79.1049 53.8655V63.1799C79.1049 63.6164 78.867 64.0213 78.4811 64.2283L76.4345 65.3352L79.1094 66.7437V76.814L49.9773 92.4999L20.9035 76.769H20.8945ZM51.1846 83.2665V89.1746L76.7307 75.3831V69.475L51.1846 83.2665ZM23.2687 75.3876L48.8149 89.1791V83.271L23.2687 69.4795V75.3876ZM24.5837 67.4861L49.9997 81.2057L75.4157 67.4861L73.9302 66.6852L49.9548 79.5633L26.0693 66.6852L24.5837 67.4861ZM51.1846 70.3479V76.256L76.7307 62.4644V56.5563L51.1846 70.3479ZM23.2687 62.4689L48.8149 76.2605V70.3524L23.2687 56.5608V62.4689ZM24.5837 54.5675L49.9997 68.287L75.4157 54.5675L73.9302 53.7665L49.9997 66.6537L26.0693 53.7665L24.5837 54.5675ZM51.1846 57.4293V63.3374L76.7307 49.5458V43.6377L51.1846 57.4293ZM23.2687 49.5503L48.8149 63.3419V57.4338L23.2687 43.6422V49.5503ZM24.5837 41.6488L49.9997 55.3684L75.4157 41.6488L49.9997 27.9293L24.5837 41.6488Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_1382_9241">
+<rect width="96" height="88.5" fill="white" transform="translate(2 4)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/docs/css/design.css b/docs/css/design.css
index a93b4fea..520e13a1 100644
--- a/docs/css/design.css
+++ b/docs/css/design.css
@@ -1,4 +1,12 @@
+/*
+* Prefixed by https://autoprefixer.github.io
+* PostCSS: v8.4.14,
+* Autoprefixer: v10.4.7
+* Browsers: last 4 version
+*/
+
 /* Custom fonts */
+
 @font-face {
     font-family: "Poppins";
     src: url("../fonts/Poppins-Regular.ttf");
@@ -25,49 +33,109 @@
 }
 
 /* Variables */
+
 :root {
+
+    /* Typography */
+    --fHeading: "Poppins", "Roboto", Arial, Helvetica, sans-serif;
+
+    /* Colors */
     --white: #fff;
-    /* Percona Tonal Palette */
+
+    /* Percona Night */
     --night500: #0E1A53;
-    --night450: #263164;
     --night400: #3E4875;
-    --night50: #E7E8EE;
+    --night300: #5E668C;
+
+    /* Percona Aqua */
+    --aqua900: #14584B;
+    --aqua800: #1A7362;
     --aqua700: #22947E;
     --aqua600: #2CBEA2;
+
+    /* Percona Sky */
+    --sky900: #08386B;
+    --sky800: #0B4A8C;
     --sky700: #0E5FB5;
-    --sky650: #106DCF;
     --sky600: #127AE8;
     --sky500: #1486FF;
     --sky400: #439EFF;
     --sky300: #62AEFF;
+    --sky200: #93C7FF;
+
+    /* Percona Stone */
+    --stone900: #2C323E;
+    --stone800: #3A4151;
+    --stone700: #4B5468;
+    --stone100: #D1D5DE;
+    --stone50: #F0F1F4;
+
     /* mkdocs root override */
     --md-primary-fg-color--dark: var(--night400);
 }
+:root,
 [data-md-color-scheme="percona-light"] {
+
     /* Primitives */
-    --md-typeset-a-color: var(--sky650);
     --md-primary-fg-color: var(--sky700);
-    --md-accent-fg-color: var(--sky650);
+
+    /* Type */
+    --md-typeset-color: #2C323E;
+    --md-typeset-a-color: var(--sky700);
+
+    /* Defaults */
+    --md-default-bg-color: var(--white);
+    --md-default-fg-color--light: rgba(44,50,62,0.72);
+    --md-default-fg-color--lighter: rgba(44,50,62,0.40);
+    --md-default-fg-color--lightest: rgba(44,50,62,0.25);
+
+    /* Accent */
+    --md-accent-fg-color: var(--sky500);
     
     /* Footer */
     --md-footer-fg-color: var(--md-typeset-color);
     --md-footer-fg-color--light: var(--md-default-fg-color--light);
     --md-footer-fg-color--lighter: var(--md-default-fg-color--lighter);
-    --md-footer-bg-color: var(--night50);
-    --md-footer-bg-color--dark: var(--night50);
-    
+    --md-footer-bg-color: var(--stone50);
+    --md-footer-bg-color--dark: var(--stone50);
+
+    /* Code */
+    --md-code-bg-color: var(--stone800);
+    --md-code-bg-color: var(--stone50);
 }
-[data-md-color-scheme="slate"] {
+[data-md-color-scheme="percona-dark"] {
+
     /* Primitives */
     --md-hue: 230;
-    --md-typeset-a-color: var(--sky400);
-    --md-primary-fg-color: var(--sky500);
+    --md-primary-fg-color: var(--sky200);
+
+    /* Type */
+    --md-typeset-color: #FBFBFB;
+    --md-typeset-a-color: var(--sky200);
+
+    /* Defaults */
+    --md-default-bg-color: var(--stone900);
+    --md-default-fg-color--light: rgba(251,251,251,0.72);
+    --md-default-fg-color--lighter: rgba(251,251,251,0.4);
+    --md-default-fg-color--lightest: rgba(209,213,222,0.25);
+
+    /* Accent */
     --md-accent-fg-color: var(--sky400);
+    --md-accent-bg-color: var(--stone900);
+
     /* Footer */
-    --md-footer-bg-color--dark: var(--night400);
+    --md-footer-fg-color: var(--md-typeset-color);
+    --md-footer-fg-color--light: var(--md-default-fg-color--light);
+    --md-footer-fg-color--lighter: var(--md-default-fg-color--lighter);
+    --md-footer-bg-color--dark: var(--stone800);
+
+    /* Code */
+    --md-code-bg-color: var(--stone50);
+    --md-code-bg-color: var(--stone800);
 }
 
-/* Typography specifics */
+/* Typography */
+
 .md-typeset {
     font-size: 0.75rem;
 }
@@ -77,29 +145,42 @@
 .md-typeset h4,
 .md-typeset h5,
 .md-typeset h6 {
-    font-family: "Poppins", "Roboto", Arial, Helvetica, sans-serif;
+    font-family: var(--fHeading);
     font-weight: bold;
 }
 .md-typeset h1 {
-    font-weight: normal;
     color: inherit;
 }
 .md-typeset h1 {
     margin: 0 0 0.75em;
 }
-.md-header,
-.md-nav__title[for="__drawer"] {
-    font-family: "Poppins", Arial, Helvetica, sans-serif;
+.md-header {
+    font-family: var(--fHeading);
     font-weight: bold;
 }
+.md-header__button.md-logo {
+    margin: 0.2rem 0.1rem 0.2rem 0.4rem;
+    padding: 0.2rem;
+}
+.md-header__button.md-logo img,
+.md-header__button.md-logo svg {
+    height: 1.6rem;
+}
 .md-nav__link--active {
     font-weight: bold;
 }
 .md-typeset small {
     opacity: 0.5;
 }
+.md-content a:not(.md-button) {
+    text-decoration: underline;
+}
+.md-content .tabbed-labels a {
+    text-decoration: none;
+}
 
 /* Header nav */
+
 .md-header,
 .md-tabs {
     background-color: var(--night400);
@@ -111,54 +192,102 @@
     margin-right: 0;
 }
 .md-tabs .md-tabs__link {
-    font-family: "Poppins", Arial, Helvetica, sans-serif;
+    font-family: var(--fHeading);
     font-weight: bold;
 }
+.md-nav__source {
+    margin-top: -0.25rem;
+}
+.md-header__inner > :last-child {
+    padding-right: 0.6rem;
+}
+.md-tabs__item {
+    height: 2rem;
+}
+.md-tabs__link {
+    margin-top: 0.55rem;
+}
+.md-header__topic {
+    -webkit-transition: opacity .25s;
+    -o-transition: opacity .25s;
+    transition: opacity .25s;
+}
+.md-header__topic:hover {
+    opacity: 0.7;
+}
 
 /* Footer */
+
+.md-footer a {
+    text-decoration: underline;
+}
+.md-copyright,
 .md-copyright__highlight {
-    color: var(--md-footer-fg-color--lighter);
+    color: var(--md-footer-fg-color--light);
 }
 
 /* Base components */
-[data-md-color-scheme="percona-light"] .md-main a:focus:not(.md-button),
-[data-md-color-scheme="percona-light"] .md-main a:hover:not(.md-button) {
-    color: var(--sky400);
-}
-[data-md-color-scheme="slate"] .md-main a:focus:not(.md-button),
-[data-md-color-scheme="slate"] .md-main a:hover:not(.md-button) {
-    color: var(--sky300);
-}
+
 .md-typeset .md-button {
+    font-family: var(--fHeading);
+    font-size: 0.6818rem;
+    font-weight: bold;
+    padding: 0.4167em 1.6em;
     border-radius: 10rem;
-}
-.md-typeset .md-button:not(.md-button--primary):not(:hover):not(:focus) {
+    -webkit-transition: all 0.2s ease-out;
+    -o-transition: all 0.2s ease-out;
+    transition: all 0.2s ease-out;
+}
+.md-typeset .md-button--primary {
+    color: var(--md-accent-bg-color);
+    -webkit-box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.20);
+            box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.20);
+}
+.md-typeset .md-button--primary:focus,
+.md-typeset .md-button--primary:hover {
+    -webkit-box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 2px 4px -1px rgba(0, 0, 0, 0.20);
+            box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 2px 4px -1px rgba(0, 0, 0, 0.20);
+}
+.md-typeset .md-button:not(.md-button--primary):focus,
+.md-typeset .md-button:not(.md-button--primary):hover {
+    background: none;
     color: var(--md-accent-fg-color);
 }
+.md-typeset code {
+    font-size: 0.9091em;
+    color: var(--md-typeset-color);
+    vertical-align: baseline;
+    padding: 0 0.2em 0.1em;
+    border-radius: 0.15em;
+}
 .md-button code,
-.md-typeset .md-button:hover code,
-.md-typeset .md-button:focus code,
-[data-md-color-scheme="slate"] .md-button:not(.md-button--primary) code {
+[data-md-color-scheme="percona-dark"] .md-button:not(.md-button--primary) code {
     background-color: rgba(255, 255, 255, 0.1);
-    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.05) inset;
+    -webkit-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1) inset;
+            box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1) inset;
 }
 .md-button:not(.md-button--primary) code {
     background-color: rgba(0, 0, 0, 0.05);
-    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05) inset;
+    -webkit-box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05) inset;
+            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05) inset;
 }
 .md-content .md-button {
     margin: 0 0.25em 0.5em 0;
 }
-.md-typeset .tabbed-labels>label {
+.md-typeset .tabbed-labels--linked > label > a {
     font-size: 0.75rem;
     padding: 0.75em 1em;
 }
 .js .md-typeset .tabbed-labels:before {
     height: 4px;
+    background-color: var(--md-typeset-a-color);
 }
 .md-typeset [class*="moji"] {
     vertical-align: -0.25em;
 }
+.md-typeset .tabbed-set>input:first-child:checked~.tabbed-labels>:first-child, .md-typeset .tabbed-set>input:nth-child(10):checked~.tabbed-labels>:nth-child(10), .md-typeset .tabbed-set>input:nth-child(11):checked~.tabbed-labels>:nth-child(11), .md-typeset .tabbed-set>input:nth-child(12):checked~.tabbed-labels>:nth-child(12), .md-typeset .tabbed-set>input:nth-child(13):checked~.tabbed-labels>:nth-child(13), .md-typeset .tabbed-set>input:nth-child(14):checked~.tabbed-labels>:nth-child(14), .md-typeset .tabbed-set>input:nth-child(15):checked~.tabbed-labels>:nth-child(15), .md-typeset .tabbed-set>input:nth-child(16):checked~.tabbed-labels>:nth-child(16), .md-typeset .tabbed-set>input:nth-child(17):checked~.tabbed-labels>:nth-child(17), .md-typeset .tabbed-set>input:nth-child(18):checked~.tabbed-labels>:nth-child(18), .md-typeset .tabbed-set>input:nth-child(19):checked~.tabbed-labels>:nth-child(19), .md-typeset .tabbed-set>input:nth-child(2):checked~.tabbed-labels>:nth-child(2), .md-typeset .tabbed-set>input:nth-child(20):checked~.tabbed-labels>:nth-child(20), .md-typeset .tabbed-set>input:nth-child(3):checked~.tabbed-labels>:nth-child(3), .md-typeset .tabbed-set>input:nth-child(4):checked~.tabbed-labels>:nth-child(4), .md-typeset .tabbed-set>input:nth-child(5):checked~.tabbed-labels>:nth-child(5), .md-typeset .tabbed-set>input:nth-child(6):checked~.tabbed-labels>:nth-child(6), .md-typeset .tabbed-set>input:nth-child(7):checked~.tabbed-labels>:nth-child(7), .md-typeset .tabbed-set>input:nth-child(8):checked~.tabbed-labels>:nth-child(8), .md-typeset .tabbed-set>input:nth-child(9):checked~.tabbed-labels>:nth-child(9) {
+    color: var(--md-typeset-a-color);
+}
 .md-typeset .md-button [class*="moji"],
 .md-typeset .tabbed-set [class*="moji"] {
     height: 1.3333em;
@@ -175,60 +304,103 @@
     color: var(--md-default-fg-color--lighter);
 }
 .md-typeset hr {
-    border-color: var(--md-default-fg-color--lighter)
+    margin: 2em 0;
+    border-color: var(--md-default-fg-color--lightest)
 }
 .md-typeset .tabbed-labels {
-    box-shadow: 0 -0.05rem var(--md-default-fg-color--lighter) inset;
+    -webkit-box-shadow: 0 -0.05rem var(--md-default-fg-color--lightest) inset;
+            box-shadow: 0 -0.05rem var(--md-default-fg-color--lightest) inset;
+}
+.md-typeset .tabbed-labels > label:hover {
+    color: var(--md-accent-fg-color);
+}
+.md-typeset .tabbed-button {
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-top: 0.0625rem;
+}
+.md-typeset .tabbed-control {
+    width: 2.25rem;
+    height: 2.25rem;
+}
+.tabbed-block > *:last-child {
+    margin-bottom: 0;
 }
 
 /* Content re-styling */
+
+.md-main__inner {
+    margin-top: 0.75rem;
+    margin-bottom: 0.75rem;
+}
 .md-typeset [type=checkbox]:checked + .task-list-indicator:before {
     background-color: var(--aqua600);
 }
 .md-feedback {
     margin: 2em 0 !important;
 }
-:not([data-banner]) + .md-feedback {
+:not([data-banner]):not(.splash) + .md-feedback {
     padding-top: 2em;
     border-top: 0.05rem solid var(--md-default-fg-color--lightest);
 }
 .md-typeset .admonition,
 .md-typeset details {
-    box-shadow: none;
+    --md-admonition-bg-color: var(--md-default-bg-color);
+    --md-admonition-fg-color: var(--md-typeset-color);
+    border-width: 0.1125rem;
+    -webkit-box-shadow: none;
+            box-shadow: none;
 }
 .md-tabs__link {
     font-size: 0.67rem;
 }
-.md-tabs__link--active,
-.md-tabs__link--active a {
+.md-tabs__item--active .md-tabs__link,
+.md-tabs__item--active .md-tabs__link a {
     font-weight: bold;
     border-bottom: 0.15em solid currentColor;
 }
+.md-sidebar__scrollwrap {
+    scrollbar-gutter: unset;
+}
 
 /* Custom Banner */
+
 [data-banner] {
     padding: 1.5em;
-    margin: 2em 0;
-    border: 0.05rem solid var(--md-default-fg-color--lighter);
-    /* border: 0.05rem solid var(--md-typeset-table-color); */
+    margin: 1.5em 0;
+    border: 0.05rem solid var(--md-default-fg-color--lightest);
     border-radius: 0.2rem;
+    /* box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.20); */
+    -webkit-transition: all 0.2s ease-out;
+    -o-transition: all 0.2s ease-out;
+    transition: all 0.2s ease-out;
+}
+[data-banner]:hover {
+    -webkit-box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 2px 4px -1px rgba(0, 0, 0, 0.20);
+            box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 2px 4px -1px rgba(0, 0, 0, 0.20);
 }
 [data-banner] .title {
-    font-weight: normal;
+    font-weight: bold;
     margin: 0;
 }
+[data-banner] .title + * {
+    margin-top: 0.25em;
+}
 [data-banner] > :last-child {
     margin-bottom: 0;
 }
 [data-banner] a:link {
+    font-family: var(--fHeading);
+    font-size: 0.6818rem;
     font-weight: bold;
+    text-decoration: none;
 }
 [data-banner] .actions > p {
     margin: 0;
 }
 [data-banner] .actions a {
     display: inline-block;
-    margin: 0.5em 1.5em 0 0;
+    margin: 0 1em 0 0;
 }
 [data-banner] > :only-child,
 [data-banner] .actions a:first-of-type {
@@ -241,15 +413,31 @@
 [data-banner] a [class*="moji"] svg {
     width: 1.3333em;
 }
+[data-banner="logo"] > p:first-child {
+    margin-top: 0;
+}
+[data-banner="logo"] > p:first-child [class*="moji"] {
+    font-size: 4em;
+}
 [data-grid] {
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
-    flex-wrap: wrap;
+    -ms-flex-wrap: wrap;
+        flex-wrap: wrap;
     margin-right: -1rem;
 }
 [data-grid] [data-banner] {
-    flex: 1 1 320px;
+    -webkit-box-flex: 1;
+        -ms-flex: 1 1 320px;
+            flex: 1 1 320px;
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
-    flex-direction: column;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
     margin: 0 1rem 1rem 0;
 }
 [data-grid] .title {
@@ -260,7 +448,9 @@
     margin-top: 0;
 }
 [data-grid] [data-banner] > p:nth-last-child(2) {
-    flex-grow: 2;
+    -webkit-box-flex: 2;
+        -ms-flex-positive: 2;
+            flex-grow: 2;
 }
 [data-grid] + [data-banner] {
     margin-top: 0;
@@ -270,6 +460,7 @@
 }
 
 /* Custom lists */
+
 [dir] .power-bullet + ul,
 [dir] .power-bullet + ul ul,
 [dir] .power-bullet + ul ol,
@@ -332,7 +523,7 @@
 .power-number + ol ol > li::before,
 .power-bullet + ul ol > li::before {
     content: counter(power-list);
-    font-family: "Poppins", "Roboto", Arial, Helvetica, sans-serif;
+    font-family: var(--fHeading);
 }
 .power-bullet + ul > li::before,
 .power-bullet + ul ul > li::before,
@@ -376,6 +567,7 @@
 }
 
 /* Custom highlights */
+
 i[info],
 i[warning] {
     font-style: normal;
@@ -403,17 +595,72 @@ i[warning] [class*="moji"] {
     color: #ff9100;
 }
 
+/* Modals */
+
+.md-consent__overlay {
+    -webkit-backdrop-filter: blur(.2rem);
+            backdrop-filter: blur(.2rem);
+    background-color: rgba(44,50,62,0.72);
+}
+.md-consent__inner {
+    background-color: var(--md-footer-bg-color--dark);
+}
+
+/* Code injections */
+
+.injections {
+    position: absolute;
+    width: 0;
+    height: 0;
+    padding: 0;
+    margin: 0;
+    visibility: hidden;
+    pointer-events: none;
+}
+
+/* Super Nav */
+
+.superNav {
+    font-family: var(--fHeading);
+    font-size: 0.5625rem;
+    line-height: 1;
+    font-weight: bold;
+    text-transform: uppercase;
+    letter-spacing: 0.0625em;
+    color: var(--white);
+    background-color: var(--stone800);
+}
+.superNav a {
+    display: inline-block;
+    padding: 0.25rem 0.625rem !important;
+    transition: all 0.2s ease-out;
+}
+.superNav a:hover {
+    opacity: 0.7;
+}
+.superNav svg {
+    width: 1.375em;
+    height: 1.375em;
+    margin-right: 0.125em;
+    fill: currentColor;
+    vertical-align: -0.3125em;
+}
+
 /* Media queries */
+
 @media screen and (max-width: 76.1875em) {
-    .md-nav--primary .md-nav__title[for=__drawer] {
-        background-color: var(--night400);
+    .md-nav--primary .md-nav__title[for=__drawer],
+    .md-nav--primary .md-nav__title {
+        line-height: 1.5;
+        height: unset;
+        padding: 3.5rem .8rem 0.5rem;
+        color: var(--md-primary-bg-color);
+        background-color: var(--md-primary-fg-color--dark);
     }
 }
 @media screen and (max-width: 60em) {
     [data-banner] {
         padding: 1em;
     }
-    [data-banner] .actions a {
-        width: 100%;
-    }
-}
\ No newline at end of file
+}
+/**/
\ No newline at end of file
diff --git a/docs/css/landing.css b/docs/css/landing.css
new file mode 100644
index 00000000..df69386e
--- /dev/null
+++ b/docs/css/landing.css
@@ -0,0 +1,301 @@
+
+/* Type */
+
+.landing h1,
+.landing h2 {
+    font-size: calc(1.5em + 1vw);
+    line-height: 1.125;
+    text-transform: uppercase;
+    letter-spacing: 0;
+    margin: 0.5em 0;
+}
+
+/* Layout adjustments */
+
+.md-header, .md-tabs {
+    background-color: var(--stone800);
+}
+.landing > :not(:last-child) {
+    margin-bottom: 2em;
+}
+/* .md-content__inner {
+    display: flex;
+    flex-direction: column;
+}
+.md-content__inner > :not(.landing) {
+    width: 100%;
+    max-width: calc(34.3rem);
+    max-width: calc(34.3rem + 1.2rem + 12.1rem);
+    align-self: center;
+} */
+[data-grid] [data-banner] {
+    flex: 0 1 calc(50% - 1rem);
+}
+
+/* Splash Box */
+
+.splash {
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+    line-height: 1.25;
+    padding: calc(0.5em + 3%);
+    border: 1px solid var(--md-default-fg-color--lightest);
+    border-radius: calc(0.5rem + 0.75vw);
+    background: linear-gradient(110deg, var(--md-default-bg-color) 33%, var(--md-footer-bg-color--dark) 95%);
+    overflow: hidden;
+    background-repeat: no-repeat;
+}
+.splash.dark {
+    color: var(--white);
+    --md-primary-fg-color: var(--stone50);
+    --md-accent-fg-color: var(--white);
+}
+.splash.highlight {
+    background:
+        linear-gradient(
+            110deg,
+            rgba(44,50,62,0.9) 10%,
+            rgba(44,50,62,0.1) 90%
+        ),
+        url(../assets/highlight.jpg) center / cover var(--stone800);
+    border: none;
+    background-repeat: no-repeat;
+}
+.splash.mysql {
+    background:
+        linear-gradient(
+            110deg,
+            rgba(0,0,0,0.2) 33%,
+            rgba(0,0,0,0.1) 95%
+        ),
+        linear-gradient(
+            110deg,
+            rgb(14,95,181) 33%,
+            rgb(48,209,178) 95%
+        );
+}
+.splash.postgresql {
+    background:
+        linear-gradient(
+            110deg,
+            rgba(0,0,0,0.4) 33%,
+            rgba(0,0,0,0.1) 95%
+        ),
+        linear-gradient(
+            110deg,
+            rgb(78,91,150) 33%,
+            rgb(67,158,255) 95%
+        );
+}
+.splash.mongodb {
+    background:
+        linear-gradient(
+            110deg,
+            rgba(0,0,0,0.4) 33%,
+            rgba(0,0,0,0.1) 95%
+        ),
+        linear-gradient(
+            110deg,
+            rgb(24,109,73) 33%,
+            rgb(48,209,190) 95%
+        );
+}
+.splash.operators {
+    background:
+        linear-gradient(
+            110deg,
+            transparent 33%,
+            rgba(0,0,0,0.1) 95%
+        ),
+        linear-gradient(
+            110deg,
+            rgb(11,39,140) 33%,
+            rgb(20,142,255) 95%
+        );
+}
+.splash.header {
+    flex-direction: column;
+    align-items: flex-start;
+    border: none;
+    background-repeat: no-repeat;
+}
+
+/* Splash Contents */
+
+.splash > * {
+    flex: 0 1 45%;
+}
+.splash h1,
+.splash h2 {
+    margin-top: 0;
+    margin-bottom: -0.125em;
+}
+.splash > :last-child {
+    margin-bottom: 0;
+}
+.splash-intro {
+    margin: 0.5rem 0.75rem;
+}
+.splash-links > :not(:last-child) {
+    margin-bottom: 1em;
+}
+.splash.dark .md-button {
+    border-color: rgba(255, 255, 255, 0.4)
+}
+.splash.dark .md-button:hover {
+    border-color: var(--white)
+}
+.splash.dark .md-button--primary,
+.splash.dark .md-button--primary:hover {
+    color: var(--stone700);
+}
+.splash.dark .md-button--primary:hover {
+    color: var(--stone900);
+}
+.splash.header > * {
+    max-width: 30rem;
+    z-index: 1;
+}
+.splash.header > :first-child {
+    margin: 0;
+}
+.splash.header img {
+    display: block;
+    position: absolute;
+    top: 50%;
+    right: 1rem;
+    width: 12rem;
+    height: 12rem;
+    margin: 0;
+    transform: translateY(-50%);
+    z-index: 0;
+}
+
+/* Splash Card */
+
+a.splash-card {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-height: 6.75em;
+    padding: 0.75rem 0.375rem 0.5rem 4.75rem;
+    border: 1px solid var(--md-default-fg-color--lightest);
+    border-radius: calc(0.25rem + 0.375vw);
+    cursor: pointer;
+    text-decoration: none !important;
+    color: var(--md-typeset-color);
+    position: relative;
+    background-color: var(--md-default-bg-color);
+    transition: all 0.2s ease-out;
+}
+.splash.highlight a.splash-card {
+    color: var(--white);
+    background-color: rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(0.75rem);
+    border-color: rgba(255,255,255,0.1);
+}
+a.splash-card:hover {
+    box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 2px 4px -1px rgba(0, 0, 0, 0.20);
+    color: var(--md-typeset-color);
+}
+.splash.highlight a.splash-card:hover {
+    background-color: rgba(255, 255, 255, 0.4);
+    border-color: rgba(255,255,255,0.2);
+    backdrop-filter: blur(1.5rem);
+}
+a.splash-card img {
+    display: block;
+    position: absolute;
+    top: 0.75rem;
+    left: 0.75rem;
+    width: 3.5rem;
+    height: 3.5rem;
+    border-radius: 0.25rem;
+    float: left;
+}
+.splash-card > * {
+    margin: 0 0.25rem 0.25rem 0 !important;
+}
+.splash-card > h3 {
+    font-size: 0.875rem;
+    margin-bottom: 0.0625rem !important;
+}
+
+/* News elements */
+
+[data-news] {
+    display: flex;
+    flex-wrap: wrap;
+    margin-right: -1rem;
+}
+[data-news] [data-article] {
+    flex: 0 1 calc(50% - 1rem);
+    display: flex;
+    flex-direction: column;
+    margin: 0 1rem 1rem 0;
+    padding: 0 1rem 1rem 0;
+    border-bottom: 1px solid var(--md-default-fg-color--lightest);
+}
+[data-article] > * {
+    margin: 0.25rem 0;
+}
+[data-article] > :first-child {
+    font-family: var(--fHeading);
+    font-size: 0.8rem;
+    /* flex-grow: 1; */
+}
+[data-article] > :nth-child(2):not(:last-child) {
+    font-size: 0.875em;
+    line-height: 1.4;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;  
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-height: 2.8em;
+    position: relative;
+}
+[data-article] > :nth-child(2):not(:last-child)::after {
+    content: "";
+    position: absolute;
+    display: block;
+    right: 0;
+    bottom: 0;
+    width: 4rem;
+    height: 1.4em;
+    background: linear-gradient(to right, transparent 0%, var(--md-default-bg-color) 50%);
+}
+[data-article] > :last-child > * {
+    margin-right: 1em;
+}
+[data-article] a:link {
+    font-family: var(--fHeading);
+    font-size: 0.6818rem;
+    font-weight: bold;
+    text-decoration: none;
+}
+
+/* Conditionals */
+
+@media screen and (max-width: 76.1875em) {
+    .md-nav--primary .md-nav__title[for=__drawer],
+    .md-nav--primary .md-nav__title {
+        background-color: var(--stone800);
+    }
+}
+@media screen and (max-width: 55em) {
+    .splash.header img {
+        right: -2rem;
+        opacity: 0.2;
+    }
+}
+@media screen and (max-width: 45em) {
+    .splash {
+        flex-direction: column;
+    }
+    [data-grid] [data-banner],
+    [data-news] [data-article] {
+        flex: 1 1 100%;
+    }
+}
\ No newline at end of file
diff --git a/docs/css/mysql.css b/docs/css/mysql.css
new file mode 100644
index 00000000..4e81656a
--- /dev/null
+++ b/docs/css/mysql.css
@@ -0,0 +1,67 @@
+/* Overrides */
+
+:root {
+    --md-primary-fg-color--dark: var(--sky700)
+}
+.md-header,
+.md-tabs {
+    background:
+        -o-linear-gradient(
+            340deg,
+            rgba(0,0,0,0.1) 33%,
+            rgba(0,0,0,0.2) 95%
+        ),
+        -o-linear-gradient(
+            340deg,
+            rgb(14,95,181) 33%,
+            rgb(48,209,178) 95%
+        );
+    background:
+        linear-gradient(
+            110deg,
+            rgba(0,0,0,0.1) 33%,
+            rgba(0,0,0,0.2) 95%
+        ),
+        linear-gradient(
+            110deg,
+            rgb(14,95,181) 33%,
+            rgb(48,209,178) 95%
+        );
+}
+@media screen and (max-width: 76.1875em) {
+    .md-nav--primary .md-nav__title[for="__drawer"],
+    .md-nav--primary .md-nav__title {
+        background:
+            -o-linear-gradient(
+                340deg,
+                rgba(0,0,0,0.1) 33%,
+                rgba(0,0,0,0.2) 95%
+            ),
+            -o-linear-gradient(
+                340deg,
+                rgb(14,95,181) 33%,
+                rgb(48,209,178) 95%
+            );
+        background:
+            linear-gradient(
+                110deg,
+                rgba(0,0,0,0.1) 33%,
+                rgba(0,0,0,0.2) 95%
+            ),
+            linear-gradient(
+                110deg,
+                rgb(14,95,181) 33%,
+                rgb(48,209,178) 95%
+            );
+    }
+}
+.superNav,
+.md-nav__source {
+    background-color: rgb(14,95,181);
+    background-image:
+        linear-gradient(
+            110deg,
+            rgba(0,0,0,0.25) 33%,
+            rgba(0,0,0,0.25) 95%
+        );
+}
\ No newline at end of file
diff --git a/mkdocs-base.yml b/mkdocs-base.yml
index 779122c1..5bd3fdc6 100644
--- a/mkdocs-base.yml
+++ b/mkdocs-base.yml
@@ -11,32 +11,37 @@ edit_uri: edit/8.0/docs/
 
 use_directory_urls: false
 
-#Theme for builds with Material theme
+# Theme setup
 theme:
   name: material
-  logo: _images/percona-logo.svg
-  favicon: _images/percona-favicon.ico
+  logo: assets/mysql-mark.svg
+  favicon: assets/mysql-fav.svg
   font:
     text: Roboto
     code: Roboto Mono
   icon:
     edit: material/file-edit-outline
     view: material/file-eye-outline
+  
   palette:
-
-    # Light mode
+    - media: "(prefers-color-scheme)"
+      toggle:
+        icon: material/brightness-auto
+        name: Color theme set to Automatic. Click to change
     - media: "(prefers-color-scheme: light)"
       scheme: percona-light
+      primary: custom
+      accent: custom
       toggle:
-        icon: material/toggle-switch-off-outline
-        name: Switch to dark mode
-
-    # Dark mode
+        icon: material/brightness-7
+        name: Color theme set to Light Mode. Click to change
     - media: "(prefers-color-scheme: dark)"
-      scheme: slate
+      scheme: percona-dark
+      primary: custom
+      accent: custom
       toggle:
-        icon: material/toggle-switch
-        name: Switch to light mode
+        icon: material/brightness-4
+        name: Color theme set to Dark Mode. Click to change
 
 # Theme features
   features:
@@ -52,11 +57,11 @@ theme:
 extra_css:
   - https://unicons.iconscout.com/release/v3.0.3/css/line.css
   - https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css
-  - css/percona.css
-  - css/nocopy.css
   - css/design.css
-  - css/extra.css
   - css/osano.css
+  - css/extra.css
+  - css/nocopy.css
+  - css/mysql.css
 
 extra_javascript:
   - js/version-select.js
@@ -136,8 +141,6 @@ plugins:
 extra:
   version:
     provider: mike
-  homepage:
-    https://docs.percona.com
   edit_page_text: '<i class="uil uil-pen"></i> <b>Edit this page</b>'
   updated_text: '<i class="uil uil-refresh"></i> Page updated'