Website: Update layout scripts and masthead navigation (#9833)

Changes:
- Fixed the background blur on the masthead on Safari.
- Increased `scroll-margin-top` on Markdown headings to make sure
headings that are navigated to with anchor links are not hidden behind
the website's masthead
- Updated the indentation of script tags in layouts and updated code
comments.
- Added Hotjar and Heap analytics `<script>` tags from the main layout
to `layout-customer` `layout-sandbox` and `layout-landing`
- Added a link to `/compliance` landing page to the `layout-sandbox`
masthead navigation.

website/assets/styles/layout.less

@@ -22,6 +22,8 @@ html, body {
   border-bottom: 1px solid #FFFFFF;
   box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.08);
   backdrop-filter: blur(15px);
+  -webkit-backdrop-filter: blur(15px);
+
   // rules for sticky nav transitions
   transition-property: background-color, transform, bottom;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

website/assets/styles/pages/articles/basic-article.less

@@ -112,6 +112,9 @@
     li::marker {
       color: @core-vibrant-blue;
     }
+    .markdown-heading {
+      scroll-margin-top: 140px;
+    }
     [purpose='checklist-item'] {
       display: flex;
       input[type='checkbox'] {

website/assets/styles/pages/docs/basic-documentation.less

@@ -489,7 +489,7 @@
     [purpose='content'] {
 
       .markdown-heading {
-        scroll-margin-top: 55px;
+        scroll-margin-top: 140px;
       }
       hr {
         margin: 0px;

website/assets/styles/pages/handbook/basic-handbook.less

@@ -135,7 +135,7 @@
   }
   [purpose='content'] {
     .markdown-heading {
-      scroll-margin-top: 55px;
+      scroll-margin-top: 140px;
     }
     h1 {
       padding-bottom: 16px;

website/views/layouts/layout.ejs

@@ -48,11 +48,12 @@
     // End Rollbar Snippet
     </script>
     <% /* Google Analytics, Google Tag Manager, Snitcher etc. */ %>
-    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <% /* Global site tag (gtag.js) - Google Analytics */%>
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-JC3DRNY1GV"></script>
-    <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-JC3DRNY1GV');
+    <script>
+      window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-JC3DRNY1GV');
     </script>
-    <!-- Google Tag Manager -->
+    <% /* Google Tag Manager */ %>
     <script>
       (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
         new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
@@ -60,8 +61,7 @@
         'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
       })(window,document,'script','dataLayer','GTM-TSBSPZK');
     </script>
-    <!-- End Google Tag Manager -->
-    <%/* Meta pixel code */%>
+    <% /* Meta pixel code */ %>
     <script>
       !function(f,b,e,v,n,t,s)
       {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
@@ -77,24 +77,23 @@
     <noscript>
       <img alt="Meta pixel" height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=673041690615149&ev=PageView&noscript=1"/>
     </noscript>
-    <%/* Hotjar code */%>
-    <!-- Hotjar Tracking Code for https://fleetdm.com/ -->
-<script>
-    (function(h,o,t,j,a,r){
-        h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
-        h._hjSettings={hjid:3068651,hjsv:6};
-        a=o.getElementsByTagName('head')[0];
-        r=o.createElement('script');r.async=1;
-        r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
-        a.appendChild(r);
-    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
-</script>
-    <%/* Heap analytics code */%>
+    <% /* Hotjar code */ %>
+    <script>
+      (function(h,o,t,j,a,r){
+          h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
+          h._hjSettings={hjid:3068651,hjsv:6};
+          a=o.getElementsByTagName('head')[0];
+          r=o.createElement('script');r.async=1;
+          r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
+          a.appendChild(r);
+      })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
+    </script>
+    <% /* Heap analytics code */ %>
     <script type="text/javascript">
-  window.heap=window.heap||[],heap.load=function(e,t){window.heap.appid=e,window.heap.config=t=t||{};var r=document.createElement("script");r.type="text/javascript",r.async=!0,r.src="https://cdn.heapanalytics.com/js/heap-"+e+".js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(r,a);for(var n=function(e){return function(){heap.push([e].concat(Array.prototype.slice.call(arguments,0)))}},p=["addEventProperties","addUserProperties","clearEventProperties","identify","resetIdentity","removeEventProperty","setEventProperties","track","unsetEventProperty"],o=0;o<p.length;o++)heap[p[o]]=n(p[o])};
-  heap.load("4175146533");
-</script>
-    <%/* Snitcher analytics code */%>
+      window.heap=window.heap||[],heap.load=function(e,t){window.heap.appid=e,window.heap.config=t=t||{};var r=document.createElement("script");r.type="text/javascript",r.async=!0,r.src="https://cdn.heapanalytics.com/js/heap-"+e+".js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(r,a);for(var n=function(e){return function(){heap.push([e].concat(Array.prototype.slice.call(arguments,0)))}},p=["addEventProperties","addUserProperties","clearEventProperties","identify","resetIdentity","removeEventProperty","setEventProperties","track","unsetEventProperty"],o=0;o<p.length;o++)heap[p[o]]=n(p[o])};
+      heap.load("4175146533");
+    </script>
+    <% /* Snitcher analytics code */ %>
     <script>
       !function(i,s,o,g,r,a,m){i.Ip2cObject=o;i[o]||(i[o]=function(){
       (i[o].q=i[o].q||[]).push(arguments)});i[o].l=+new Date;r=s.createElement(g);
@@ -126,12 +125,12 @@
     <!--STYLES END-->
   </head>
   <body>
-    <!-- Google Tag Manager (noscript) -->
+    <% /* Google Tag Manager (noscript) */ %>
     <noscript>
       <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TSBSPZK"
       height="0" width="0" style="display:none;visibility:hidden"></iframe>
     </noscript>
-    <!-- End Google Tag Manager (noscript) -->
+    <%/* End Google Tag Manager (noscript) */%>
     <div purpose="page-wrap">
       <div class="header" purpose="header-container">
         <%// Call to action ribbon above page header %>