Homepage hero

cigaradvisor/blocks/header/header.css

@@ -384,6 +384,10 @@
         z-index: 1000;
 }
 
+.header.block .mobile-nav.mobile-nav-closed{
+    z-index: 1;
+}
+
 .header.block .mobile-nav .mobile-primary-nav-wrapper {
     background-color: var(--clr-white);
     width: 100%;
@@ -460,7 +464,7 @@
     padding: 20px 0 5px;
 }
 
-.header.block .mobile-nav .mobile-primary-nav .nav-hamburger, .search{
+.header.block .mobile-nav .mobile-primary-nav .nav-hamburger,.header.block .mobile-nav .mobile-primary-nav .search{
     width: 1.25em;
     height: 1.25em;
     font-size: 2em;

cigaradvisor/blocks/header/header.js

@@ -135,9 +135,17 @@ export default async function decorate(block) {
   mobilePrimaryNavWrapper.append(mobilePrimaryNavContent);
   mobilePrimaryNavWrapper.append(socialNavMobile);
   mobileNav.append(mobilePrimaryNavWrapper);
+  mobileNav.classList.add('mobile-nav-closed');
 
   hamburger.addEventListener('click', () => {
     mobilePrimaryNavWrapper.classList.toggle('nav-content-open');
+    if (mobileNav.classList.contains('mobile-nav-closed')) {
+      mobileNav.classList.remove('mobile-nav-closed');
+    } else {
+      setTimeout(() => {
+        mobileNav.classList.add('mobile-nav-closed');
+      }, 500);
+    }
   });
 
   const lastChild = primaryNav.querySelector('li:last-child');

cigaradvisor/blocks/hero/hero.css

@@ -1,27 +1,41 @@
 /* block specific CSS goes here */
 
-main .hero-container > div {
+main .hero-container>div {
   max-width: unset;
 }
-  
+
 main .hero-container {
   padding: 0;
+  margin-bottom: 10%;
 }
-  
-main .hero {
+
+main .hero.block {
   position: relative;
   padding: 32px;
   min-height: 300px;
+  text-align: center;
+  line-height: 1;
+  letter-spacing: 3px;
+  color: var(--off-white);
+  text-shadow: 3px 3px var(--clr-black);
+  text-wrap: nowrap;
+}
+
+main .hero.block>div>div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
 }
 
-main .hero h1 {
+main .hero.block h1 {
   max-width: 1200px;
   margin-left: auto;
   margin-right: auto;
   color: white;
 }
 
-main .hero picture {
+main .hero.block picture {
   position: absolute;
   z-index: -1;
   top: 0;
@@ -32,8 +46,108 @@ main .hero picture {
   box-sizing: border-box;
 }
 
-main .hero img {
+main .hero.block img {
   object-fit: cover;
+  margin-top: 1%;
+  height: 85%;
+}
+
+main .hero.block .hero-content {
+  position: absolute;
+  top: 25%;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  align-items: center;
+  padding: 0 1rem;
+  color: var(--clr-white);
+  text-shadow: 0 0 1rem var(--clr-black);
+}
+
+/* hero search */
+main .hero.block .hero-search .search-box{
+  display: flex;
+  justify-content: center;
+}
+
+main .hero.block .hero-search{
+  margin: 20px auto;
   width: 100%;
-  height: 100%;
+}
+
+main .hero.block .search{
+  width: 70%;
+}
+
+main .hero.block .search form {
+  border-bottom: 4px solid var(--clr-dark-gray);
+  padding-bottom: 10px;
+}
+
+main .hero.block .search form .focused{
+  transition: 1s;
+  background-color: var(--light-grey);
+}
+
+main .hero.block .search form button {
+  position: relative;
+  top: 0;
+  right: 0;
+  background: 0 0;
+  color: var(--clr-dark-gray);
+  width: 2.85rem;
+  padding: 0;
+  line-height: 2.85rem;
+  margin: 0;
+  border: none;
+  border-radius: 0;
+}
+
+/* set form input placeholder text color color: var(--clr-dark-gray); */
+main .hero.block .search form input {
+  color: var(--clr-dark-gray);
+  border: none;
+  font-weight: 700;
+  font-size: 18px;
+  text-transform: capitalize;
+  width: 100%;
+  background: 0 0;
+  position: relative;
+  left: 0;
+  max-width: 100%;
+  z-index: 1;
+}
+
+main .hero.block .search form input::placeholder {
+  color: var(--clr-dark-gray);
+}
+
+main .hero.block .search form button::before {
+  position: relative;
+  width: 2em;
+  font-size: 30px;
+  content: "\f002";
+  text-align: center;
+  font-family: var(--ff-fontawesome);
+  cursor: pointer;
+}
+
+@media screen and (min-width: 900px) {
+  main .hero.block img {
+    width: 100%;
+    height: 185%;
+    max-width: none;
+    margin-top: -65px;
+  }
+
+  main .hero.block .search{
+    width: 30%;
+  }
+
+  main .hero.block .hero-content {
+    top: 100%;
+  }
 }

cigaradvisor/scripts/scripts.js

@@ -1,5 +1,6 @@
 import {
   sampleRUM,
+  buildBlock,
   loadHeader,
   loadFooter,
   decorateButtons,
@@ -18,6 +19,39 @@ const LCP_BLOCKS = []; // add your LCP blocks to the list
  * Builds hero block and prepends to main in a new section.
  * @param {Element} main The container element
  */
+function buildHeroBlock(main) {
+  const h1 = main.querySelector('h1');
+  const picture = main.querySelector('picture');
+  // eslint-disable-next-line no-bitwise
+  if (h1 && picture && (h1.compareDocumentPosition(picture) & Node.DOCUMENT_POSITION_PRECEDING)) {
+    const section = document.createElement('div');
+    section.classList.add('section--hero');
+    const heroContent = document.createElement('div');
+    heroContent.classList.add('hero-content');
+    const search = document.createElement('div');
+    search.classList.add('search');
+    search.innerHTML = `<form action="/cigaradvisor/" class="hero-search" method="get">
+    <label class="sr-only" for="main-search-term">Search</label>
+    <div class="search-box">
+    <input type="search" class="search__input predictiveSearch" id="main-search-term" maxlength="255" placeholder="SEARCH" name="s" data-url="GetSearchSuggestions" autocomplete="off" value="">
+    <button type="submit" class="search__submit" value="Submit" title="Submit"></button>
+    </div>
+    </form>`;
+    heroContent.append(h1);
+    heroContent.append(search);
+    section.append(buildBlock('hero', { elems: [picture, heroContent] }));
+    main.prepend(section);
+    // on-focus of input, add class to form
+    const searchInput = main.querySelector('.hero-search input');
+    searchInput.addEventListener('focus', () => {
+      searchInput.parentNode.classList.add('focused');
+    });
+    // on-blur of input, remove class from form
+    searchInput.addEventListener('blur', () => {
+      searchInput.parentNode.classList.remove('focused');
+    });
+  }
+}
 
 /**
  * Builds two column grid.
@@ -58,10 +92,9 @@ async function loadFonts() {
  * Builds all synthetic blocks in a container element.
  * @param {Element} main The container element
  */
-// eslint-disable-next-line no-unused-vars
 function buildAutoBlocks(main) {
   try {
-    // do nothing
+    buildHeroBlock(main);
   } catch (error) {
     // eslint-disable-next-line no-console
     console.error('Auto Blocking failed', error);

cigaradvisor/styles/styles.css

@@ -141,6 +141,7 @@
   --grey: #333;
   --light-grey: #d3d3d3;
   --dark-grey: #3c3a3b;
+  --off-white: #f7f7f7;
 
   /* functional-colors */
   --clr-text: var(--clr-dark-gray);
@@ -224,6 +225,16 @@ img {
   border-style: none;
 }
 
+h1 {
+  font-size: 25px;
+  font-family: var(--ff-alfaslabone);
+  font-style: normal;
+  font-weight: 400;
+  text-transform: uppercase;
+  color: #141414;
+  margin: 2px auto;
+}
+
 h2 {
   font-family: var(--ff-montserrat);
   font-weight: 900;
@@ -321,13 +332,6 @@ main .section[data-layout="50/50"] {
   display: flex;
 }
 
-@media screen and (max-width: 600px) {
-  main .section[data-layout="50/50"] {
-    width: 100%;
-    flex-direction: column;
-  }
-}
-
 main .section[data-layout="50/50"]>div {
   display: flex;
   flex-basis: 100%;
@@ -356,3 +360,22 @@ main .section[data-layout="50/50"] .right-grid>div {
 .bg-pampas {
   background-color: var(--clr-pampas);
 }
+
+@media screen and (max-width: 600px) {
+  main .section[data-layout="50/50"] {
+    width: 100%;
+    flex-direction: column;
+  }
+}
+
+@media screen and (min-width: 600px) {
+  h1 {
+    font-size: 35px;
+  }
+}
+
+@media screen and (min-width: 900px) {
+  h1 {
+    font-size: 45px;
+  }
+}