From 607b85f6cba6995bd196edc3a60cc38ad3890385 Mon Sep 17 00:00:00 2001
From: Jason Tremblay <4190+alertmybanjos@users.noreply.github.com>
Date: Mon, 5 Dec 2022 13:44:02 -0500
Subject: [PATCH] Header Footer Updates - Dec 5, 2022  - products menu changes 
 - add styles for TrustArc cookie prefs icon  - increase top offset for
 OptinMonster banner  - css browser compatibility tweaks

---
 src/components/3_organisms/footer-nav.js  |  14 +--
 src/components/3_organisms/header.js      | 107 ++++++++++++++++++++--
 src/css/components/3_organisms/footer.css |  21 ++++-
 src/css/components/3_organisms/header.css |  21 +++--
 4 files changed, 132 insertions(+), 31 deletions(-)

diff --git a/src/components/3_organisms/footer-nav.js b/src/components/3_organisms/footer-nav.js
index c8afd8639..29e172869 100644
--- a/src/components/3_organisms/footer-nav.js
+++ b/src/components/3_organisms/footer-nav.js
@@ -141,7 +141,7 @@ class FooterNav extends React.Component {
                   <a className="o-menu__link" href="https://www.linode.com/compare/"><span className="o-menu__title">Linode vs. Competitors</span></a>
                 </li>
                 <li className="o-menu__item">
-                  <a className="o-menu__link" href="https://www.linode.com/open-cloud/"><span className="o-menu__title">Open Cloud</span></a>
+                  <a className="o-menu__link" href="https://www.linode.com/approach/"><span className="o-menu__title">Our Approach</span></a>
                 </li>
                 <li className="o-menu__item">
                   <a className="o-menu__link" href="https://www.linode.com/what-is-cloud-computing/"><span className="o-menu__title">What is Cloud Computing?</span></a>
@@ -198,9 +198,6 @@ class FooterNav extends React.Component {
                 <li className="o-menu__item">
                   <a className="o-menu__link" href="https://www.linode.com/products/gpu/"><span className="o-menu__title">GPU</span></a>
                 </li>
-                <li className="o-menu__item">
-                  <a className="o-menu__link" href="https://www.linode.com/products/bare-metal/"><span className="o-menu__title">Bare Metal</span></a>
-                </li>
                 <li className="o-menu__item">
                   <a className="o-menu__link" href="https://www.linode.com/products/kubernetes/"><span className="o-menu__title">Kubernetes</span></a>
                 </li>
@@ -216,15 +213,6 @@ class FooterNav extends React.Component {
                 <li className="o-menu__item">
                   <a className="o-menu__link" href="https://www.linode.com/products/databases/"><span className="o-menu__title">Managed Databases</span></a>
                 </li>
-                <li className="o-menu__item">
-                  <a className="o-menu__link" href="https://www.linode.com/products/mongodb/"><span className="o-menu__title">MongoDB</span></a>
-                </li>
-                <li className="o-menu__item">
-                  <a className="o-menu__link" href="https://www.linode.com/products/mysql/"><span className="o-menu__title">MySQL</span></a>
-                </li>
-                <li className="o-menu__item">
-                  <a className="o-menu__link" href="https://www.linode.com/products/postgresql/"><span className="o-menu__title">PostgreSQL</span></a>
-                </li>
                 <li className="o-menu__item">
                   <a className="o-menu__link" href="https://www.linode.com/products/cloud-firewall/"><span className="o-menu__title">Cloud Firewall</span></a>
                 </li>
diff --git a/src/components/3_organisms/header.js b/src/components/3_organisms/header.js
index 57cc451b0..7dbf8f01e 100644
--- a/src/components/3_organisms/header.js
+++ b/src/components/3_organisms/header.js
@@ -221,7 +221,7 @@ class Header extends React.Component {
                     <a className="o-menu__link" href="https://www.linode.com/compare/"><span className="o-menu__title">Linode vs. Competitors</span></a>
                   </li>
                   <li className="o-menu__item">
-                    <a className="o-menu__link" href="https://www.linode.com/open-cloud/"><span className="o-menu__title">Open Cloud</span></a>
+                    <a className="o-menu__link" href="https://www.linode.com/approach/"><span className="o-menu__title">Our Approach</span></a>
                   </li>
                   <li className="o-menu__item">
                     <a className="o-menu__link" href="https://www.linode.com/what-is-cloud-computing/"><span className="o-menu__title">What is Cloud Computing?</span></a>
@@ -250,10 +250,10 @@ class Header extends React.Component {
                       <a className="o-menu__link" href="https://www.linode.com/products/gpu/"><span className="o-menu__title">GPU</span></a>
                     </li>
                     <li className="o-menu__item">
-                      <a className="o-menu__link" href="https://www.linode.com/products/bare-metal/"><span className="o-menu__title">Bare Metal</span></a>
+                      <a className="o-menu__link" href="https://www.linode.com/products/kubernetes/"><span className="o-menu__title">Kubernetes</span></a>
                     </li>
                     <li className="o-menu__item">
-                      <a className="o-menu__link" href="https://www.linode.com/products/kubernetes/"><span className="o-menu__title">Kubernetes</span></a>
+                      <a className="o-menu__link" href="https://www.linode.com/products/akamai-products-and-solutions/#edgeworkers"><span className="o-menu__title">EdgeWorkers</span></a>
                     </li>
                     </ul>
                   </li>
@@ -354,6 +354,46 @@ class Header extends React.Component {
                     </li>
                     </ul>
                   </li>
+                  <li className="o-menu__item o-menu__parent" id="submenu-mobile-primary-full--52611" data-group="submenu-mobile-primary-full--level-1">
+                    <button className="o-menu__link o-menu__toggle"data-group="submenu-mobile-primary-full--level-1" data-toggle="#submenu-mobile-primary-full--52611"><span className="o-menu__title">Delivery</span></button>
+                    <ul className="o-menu__list o-menu__child --d2">
+                    <li className="o-menu__item">
+                      <a className="o-menu__link" href="https://www.linode.com/products/akamai-products-and-solutions/#adaptive-media-delivery"><span className="o-menu__title">Adaptive Media</span></a>
+                    </li>
+                    <li className="o-menu__item">
+                      <a className="o-menu__link" href="https://www.linode.com/products/akamai-products-and-solutions/#download-delivery"><span className="o-menu__title">Download Delivery</span></a>
+                    </li>
+                    <li className="o-menu__item">
+                      <a className="o-menu__link" href="https://www.linode.com/products/akamai-products-and-solutions/#ion"><span className="o-menu__title">Ion</span></a>
+                    </li>
+                    <li className="o-menu__item">
+                      <a className="o-menu__link" href="https://www.linode.com/products/akamai-products-and-solutions/#global-traffic-management"><span className="o-menu__title">Global Traffic</span></a>
+                    </li>
+                    </ul>
+                  </li>
+                  <li className="o-menu__item o-menu__parent" id="submenu-mobile-primary-full--52612" data-group="submenu-mobile-primary-full--level-1">
+                    <button className="o-menu__link o-menu__toggle"data-group="submenu-mobile-primary-full--level-1" data-toggle="#submenu-mobile-primary-full--52612"><span className="o-menu__title">Security</span></button>
+                    <ul className="o-menu__list o-menu__child --d2">
+                    <li className="o-menu__item">
+                      <a className="o-menu__link" href="https://www.linode.com/products/akamai-products-and-solutions/#guardicore-segmentation"><span className="o-menu__title">Guardicore</span></a>
+                    </li>
+                    <li className="o-menu__item">
+                      <a className="o-menu__link" href="https://www.linode.com/products/akamai-products-and-solutions/#kona-site-defender"><span className="o-menu__title">Kona Site Defender</span></a>
+                    </li>
+                    <li className="o-menu__item">
+                      <a className="o-menu__link" href="https://www.linode.com/products/akamai-products-and-solutions/#app-api-protector"><span className="o-menu__title">App &amp; API Protector</span></a>
+                    </li>
+                    <li className="o-menu__item">
+                      <a className="o-menu__link" href="https://www.linode.com/products/akamai-products-and-solutions/#bot-manager"><span className="o-menu__title">Bot Manager</span></a>
+                    </li>
+                    <li className="o-menu__item">
+                      <a className="o-menu__link" href="https://www.linode.com/products/akamai-products-and-solutions/#account-protector"><span className="o-menu__title">Account Protector</span></a>
+                    </li>
+                    <li className="o-menu__item">
+                      <a className="o-menu__link" href="https://www.linode.com/products/akamai-products-and-solutions/#enterprise-application-access"><span className="o-menu__title">EAA</span></a>
+                    </li>
+                    </ul>
+                  </li>
                   </ul>
                 </li>
                 <li className="o-menu__item o-menu__parent" id="submenu-mobile-primary-full--46178" data-group="submenu-mobile-primary-full">
@@ -563,7 +603,7 @@ class Header extends React.Component {
     </div>
 
 
-    <div className="o-layout__row c-submenu c-submenu--why-linode" data-toggle data-group="sub-menu" id="sub-menu--why-linode">
+    <div className="o-layout__row c-submenu c-submenu--3col c-submenu--why-linode" data-toggle data-group="sub-menu" id="sub-menu--why-linode">
       <div className="o-layout__colset">
         <div className="o-layout__col">
 
@@ -623,7 +663,7 @@ class Header extends React.Component {
                   <a className="o-menu__link" href="https://www.linode.com/compare/"><span className="o-menu__title">Linode vs. Competitors</span></a>
                 </li>
                 <li className="o-menu__item">
-                  <a className="o-menu__link" href="https://www.linode.com/open-cloud/"><span className="o-menu__title">Open Cloud</span></a>
+                  <a className="o-menu__link" href="https://www.linode.com/approach/"><span className="o-menu__title">Our Approach</span></a>
                 </li>
                 <li className="o-menu__item">
                   <a className="o-menu__link" href="https://www.linode.com/what-is-cloud-computing/"><span className="o-menu__title">What is Cloud Computing?</span></a>
@@ -637,7 +677,7 @@ class Header extends React.Component {
     </div>
 
 
-    <div className="o-layout__row c-submenu c-submenu--products" data-toggle data-group="sub-menu" id="sub-menu--products">
+    <div className="o-layout__row c-submenu c-submenu--4col c-submenu--products" data-toggle data-group="sub-menu" id="sub-menu--products">
       <div className="o-layout__colset">
         <div className="o-layout__col">
 
@@ -669,10 +709,10 @@ class Header extends React.Component {
                   <a className="o-menu__link" href="https://www.linode.com/products/gpu/"><span className="o-menu__title">GPU</span></a>
                 </li>
                 <li className="o-menu__item">
-                  <a className="o-menu__link" href="https://www.linode.com/products/bare-metal/"><span className="o-menu__title">Bare Metal</span></a>
+                  <a className="o-menu__link" href="https://www.linode.com/products/kubernetes/"><span className="o-menu__title">Kubernetes</span></a>
                 </li>
                 <li className="o-menu__item">
-                  <a className="o-menu__link" href="https://www.linode.com/products/kubernetes/"><span className="o-menu__title">Kubernetes</span></a>
+                  <a className="o-menu__link" href="https://www.linode.com/products/akamai-products-and-solutions/#edgeworkers"><span className="o-menu__title">EdgeWorkers</span></a>
                 </li>
               </ul>
             </nav>
@@ -794,6 +834,55 @@ class Header extends React.Component {
           </div>
 
         </div>
+        <div className="o-layout__col">
+
+          <div className="o-layout__module">
+            <h6>Delivery</h6>
+            <nav className="o-menu">
+              <ul className="o-menu__list --d0">
+                <li className="o-menu__item">
+                  <a className="o-menu__link" href="https://www.linode.com/products/akamai-products-and-solutions/#adaptive-media-delivery"><span className="o-menu__title">Adaptive Media</span></a>
+                </li>
+                <li className="o-menu__item">
+                  <a className="o-menu__link" href="https://www.linode.com/products/akamai-products-and-solutions/#download-delivery"><span className="o-menu__title">Download Delivery</span></a>
+                </li>
+                <li className="o-menu__item">
+                  <a className="o-menu__link" href="https://www.linode.com/products/akamai-products-and-solutions/#ion"><span className="o-menu__title">Ion</span></a>
+                </li>
+                <li className="o-menu__item">
+                  <a className="o-menu__link" href="https://www.linode.com/products/akamai-products-and-solutions/#global-traffic-management"><span className="o-menu__title">Global Traffic</span></a>
+                </li>
+              </ul>
+            </nav>
+          </div>
+
+          <div className="o-layout__module">
+            <h6>Security</h6>
+            <nav className="o-menu">
+              <ul className="o-menu__list --d0">
+                <li className="o-menu__item">
+                  <a className="o-menu__link" href="https://www.linode.com/products/akamai-products-and-solutions/#guardicore-segmentation"><span className="o-menu__title">Guardicore</span></a>
+                </li>
+                <li className="o-menu__item">
+                  <a className="o-menu__link" href="https://www.linode.com/products/akamai-products-and-solutions/#kona-site-defender"><span className="o-menu__title">Kona Site Defender</span></a>
+                </li>
+                <li className="o-menu__item">
+                  <a className="o-menu__link" href="https://www.linode.com/products/akamai-products-and-solutions/#app-api-protector"><span className="o-menu__title">App &amp; API Protector</span></a>
+                </li>
+                <li className="o-menu__item">
+                  <a className="o-menu__link" href="https://www.linode.com/products/akamai-products-and-solutions/#bot-manager"><span className="o-menu__title">Bot Manager</span></a>
+                </li>
+                <li className="o-menu__item">
+                  <a className="o-menu__link" href="https://www.linode.com/products/akamai-products-and-solutions/#account-protector"><span className="o-menu__title">Account Protector</span></a>
+                </li>
+                <li className="o-menu__item">
+                  <a className="o-menu__link" href="https://www.linode.com/products/akamai-products-and-solutions/#enterprise-application-access"><span className="o-menu__title">EAA</span></a>
+                </li>
+              </ul>
+            </nav>
+          </div>
+        </div>
+
       </div>
     </div>
 
@@ -889,7 +978,7 @@ class Header extends React.Component {
     </div>
 
 
-    <div className="o-layout__row c-submenu c-submenu--community" data-toggle data-group="sub-menu" id="sub-menu--community">
+    <div className="o-layout__row c-submenu c-submenu--3col c-submenu--community" data-toggle data-group="sub-menu" id="sub-menu--community">
       <div className="o-layout__colset">
         <div className="o-layout__col">
 
diff --git a/src/css/components/3_organisms/footer.css b/src/css/components/3_organisms/footer.css
index 921b91ef3..5ec79910c 100644
--- a/src/css/components/3_organisms/footer.css
+++ b/src/css/components/3_organisms/footer.css
@@ -73,6 +73,24 @@
   border-color: #32363b;
   color: #ffffff;
 }
+button#cookie-prefs-icon {
+  background: transparent;
+  border: none;
+  bottom: 16px;
+  color: #5e6065;
+  cursor: pointer;
+  left: 16px;
+  position: fixed;
+  z-index: 10;
+}
+button#cookie-prefs-icon:hover {
+  color: #02b159;
+}
+button#cookie-prefs-icon svg {
+  height: 32px;
+  width: 32px;
+}
+
 .c-site-footer {
   background-color: #ffffff;
   color: #32363b;
@@ -86,7 +104,6 @@
 .c-site-footer a {
   color: inherit;
 }
-
 .c-site-footer__primary {
   background-color: #ffffff;
   border-top: 1px solid var(--divider-color);
@@ -198,4 +215,4 @@
   .c-site-footer__primary .c-social a {
     padding: 8px 12px;
   }
-}
\ No newline at end of file
+}
diff --git a/src/css/components/3_organisms/header.css b/src/css/components/3_organisms/header.css
index bbb9ec7a5..03e80616c 100644
--- a/src/css/components/3_organisms/header.css
+++ b/src/css/components/3_organisms/header.css
@@ -233,6 +233,10 @@
   width: 8px !important;
 }
 
+body.om-position-floating-top {
+  --site-top-offset: 60px;
+}
+
 .c-identity {
   vertical-align: top;
 }
@@ -289,6 +293,7 @@
   align-items: center;
   display: flex;
   flex-wrap: nowrap;
+  height: calc(var(--site-header-height) - 1px);
   max-width: none;
 }
 .c-site-header__primary .o-layout__col {
@@ -463,7 +468,7 @@
   margin: 0 -16px;
 }
 .c-submenu .o-layout__colset {
-  grid-template-columns: 46% 27% 27%;
+  justify-content: center;
 }
 .c-submenu .o-layout__col {
   border-left: 1px solid #ededf4;
@@ -595,14 +600,17 @@
   width: 7px;
 }
 .c-submenu--2col .o-layout__colset {
-  grid-template-columns: 46% -webkit-max-content;
   grid-template-columns: 46% max-content;
-  justify-content: center;
+}
+.c-submenu--3col .o-layout__colset {
+  grid-template-columns: 46% 27% 27%;
+}
+.c-submenu--4col .o-layout__colset {
+  grid-template-columns: 46% 18% 18% 18%;
 }
 .c-submenu--mobile {
   display: none;
   grid-template-columns: 100%;
-  grid-template-rows: 1fr -webkit-min-content -webkit-min-content -webkit-min-content;
   grid-template-rows: 1fr min-content min-content min-content;
 }
 @media (max-width: 61.99em) {
@@ -642,7 +650,6 @@
 }
 .c-submenu--mobile :where(#submenu-mobile-primary .--d0) {
   font-size: 22px;
-  height: -webkit-min-content;
   height: -moz-min-content;
   height: min-content;
   padding-block: 6px;
@@ -684,7 +691,6 @@
   overflow-x: scroll;
 }
 .c-submenu--mobile :where(#submenu-mobile-quicklinks) .o-menu {
-  width: -webkit-min-content;
   width: -moz-min-content;
   width: min-content;
 }
@@ -809,6 +815,7 @@
   align-items: center;
   display: flex;
   flex-wrap: nowrap;
+  height: calc(var(--site-topbar-height) - 1px);
   max-width: none;
 }
 .c-site-header__topbar .o-layout__col {
@@ -903,4 +910,4 @@
 }
 .c-site-header__topbar .c-weglot-nav .wgcurrent a, .c-site-header__topbar .c-weglot-nav .wgcurrent span {
   padding: 8px 0;
-}
\ No newline at end of file
+}