Cookie banner restyling

preview-src/java.adoc

@@ -1,7 +1,7 @@
 = Java Client
 [[java-client]]
 
-The Java client is the most full featured Hazelcast native client.
+The Java client is **the most full featured** Hazelcast native client.
 It is offered both with Hazelcast IMDG and Hazelcast IMDG Enterprise.
 The main idea behind the Java client is to provide the same Hazelcast
 functionality by proxying each operation through a Hazelcast member.

src/css/admonition.css

@@ -33,6 +33,7 @@
 .admonitionblock::before {
   display: block;
   font-weight: 500;
+  font-family: var(--heading-font-family);
   margin-bottom: 10px;
 }
 

src/css/cookie.css

@@ -1,23 +1,74 @@
 .cookie-banner {
   position: fixed;
   display: none;
-  bottom: 0;
-  width: 100%;
-  padding: 20px 14px;
+  bottom: 20px;
+  left: 20px;
+  right: 112px;
+  padding: 20px 16px;
   align-items: center;
   justify-content: space-between;
-  background-color: var(--neutral-lighter);
-  border-radius: var(--border-radius);
-  border-top: 1px solid var(--primary);
+  gap: 10px;
+  background-color: var(--header-color);
+  color: var(--neutral-white);
+  border: 1px solid var(--accent);
+  border-radius: 10px;
+  font-size: 14px;
+  font-family: var(--heading-font-family);
   z-index: 1000;
 }
 
-#cookie-close {
-  background: var(--navbar-button-background);
+.cookie-banner-btns-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.cookie-banner p {
+  margin: 0;
+  letter-spacing: 0.4px;
+}
+
+.cookie-close {
   border-radius: 10px;
-  font-size: 1em;
+  background: transparent;
+  font-size: 25px;
   border: none;
-  padding: 10px;
-  color: white;
-  cursor: pointer;
+  color: var(--neutral-white);
+}
+
+.cookie-decision-btn {
+  border-radius: 9px;
+  border: 1px solid var(--accent4);
+  padding: 8px 24px;
+  font-size: 13px;
+  line-height: 18px;
+  margin: 0;
+  transition: all ease 0.3s;
+  white-space: nowrap;
+}
+
+.allow-btn {
+  background-color: var(--accent4);
+  color: var(--header-color);
+}
+
+.decline-btn {
+  color: var(--accent4);
+  background-color: var(--header-color);
+}
+
+.allow-btn:hover {
+  background-color: #c5ed65;
+}
+
+.decline-btn:hover {
+  background-color: #061827;
+}
+
+.manage-cookies-link {
+  color: var(--accent);
+  white-space: nowrap;
+  margin: 0 18px;
+  font-size: 13px;
 }

src/css/fontsource-open-sans.css

@@ -21,7 +21,7 @@
 @font-face {
   font-family: "Open Sans";
   font-style: bold;
-  font-weight: 600;
+  font-weight: 500;
   src:
     local("Open Sans"),
     local("Open Sans-Bold"),

src/css/vars.css

@@ -44,7 +44,7 @@
   --body-font-size--print: 0.9375em; /* 15px */
   --body-line-height: 1.4;
   --body-font-color: var(--text);
-  --header-color: #071627;
+  --header-color: #0b2b39;
   --body-font-family: "Open Sans", sans-serif;
   --body-font-weight-bold: 500;
   --nav-font-family: "PP Telegraf", sans-serif;

src/js/12-cookie-banner.js

@@ -2,7 +2,7 @@
   'use strict'
 
   var cookieBanner = document.getElementById('cookie')
-  var cookieButton = document.getElementById('cookie-close')
+  var cookieButton = document.getElementById('closeCookies')
   var latestBanner = document.getElementById('latest-banner')
 
   if (window.localStorage.getItem('docsCookie') !== 'closed') {

src/partials/cookie.hbs

@@ -1,7 +1,18 @@
 <div class="cookie-banner" id="cookie">
-<p>
-    This website uses cookies to give you the best experience.
-    <a href="https://hazelcast.com/privacy/?utm_source=docs-website">Learn more</a>
+  <p>
+    This website uses cookies to ensure you get the best experience on our website.
+    <!--    <a href="https://hazelcast.com/privacy/?utm_source=docs-website">Learn more</a>-->
   </p>
-<button class="close" id="cookie-close">Close</button>
-</div>
+  <div class="cookie-banner-btns-wrapper">
+<!--    <a id="manageCookiesLink" href="javascript:void(0)" role="button" class="manage-cookies-link">-->
+<!--      Manage Cookies-->
+<!--    </a>-->
+    <button class="cookie-decision-btn decline-btn" id="closeCookies">
+      Close
+    </button>
+<!--    <button class="cookie-decision-btn allow-btn">-->
+<!--      Allow-->
+<!--    </button>-->
+<!--    <button class="cookie-close" id="closeCookies">&times;</button>-->
+  </div>
+</div>

src/partials/head-scripts.hbs

@@ -31,7 +31,7 @@
     data-button-image-height="40"
     data-button-border="1px solid #AFE922"
     data-button-border-radius="10px"
-    data-button-bg-color="#0D2B39"
+    data-button-bg-color="#0b2b39"
     data-button-text-font-family="PP Telegraf"
     data-button-text-font-size="16px"
     data-button-text-font-weight="400"