<header class="page-header">
  <nav>
    <div class="header-top">
      <div class="container">
        <div class="d-flex flex-column flex-row@s justify-content-between text-center">
          <div>Free shipping worldwide above £100</div>
          <div><a href="mailto:hello@forecastr.com">hello@forecastr.com</a> | <a href="">sales chat</a></div>
        </div>
      </div>
    </div>
    <div class="header-bottom">
      <div class="container">
        <div class="d-flex justify-content-between">
          <a href="">
            <img width="178" height="38" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/horizontal-logo-mobile.svg" alt="forecastr logo">
          </a>
          <div class="d-flex">
            <ul class="menu d-flex flex-column flex-row@m align-items-center justify-content-between">
              <li>
                <a href="">MEN</a>
              </li>
              <li>
                <a href="">WOMEN</a>
              </li>
              <li>
                <a href="">ACCESSORIES</a>
              </li>
              <li>
                <a href="">OFFERS</a>
              </li>
              <li>
                <a href="">CONTACT</a>
              </li>
            </ul>
            <button aria-label="Toggle menu" class="toggle-menu">
              <svg aria-hidden="true" width="30" height="30" viewBox="0 0 24 24">
                <path d="M4 22h-4v-4h4v4zm0-12h-4v4h4v-4zm0-8h-4v4h4v-4zm3 0v4h17v-4h-17zm0 12h17v-4h-17v4zm0 8h17v-4h-17v4z" />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </nav>
</header>
<section class="top-banner">
  <div class="btn-group">
    <a href="" class="btn">SELECT YOUR FABRIC</a>
    <a href="" class="btn">MAKE AN APPOINTMENT</a>
  </div>
</section>
<section class="section">
  <div></div>
</section>
<section class="section">
  <div></div>
</section>
<section class="section">
  <div></div>
</section>
<section class="section">
  <div></div>
</section>
<section class="section">
  <div></div>
</section>
<footer class="page-footer">
  <span>made by </span>
  <a href="https://georgemartsoukos.com/" target="_blank">
    <img width="24" height="24" src="https://assets.codepen.io/162656/george-martsoukos-small-logo.svg" alt="George Martsoukos logo">
  </a>
</footer>

/* RESET RULES & HELPER CLASSES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
  --blue: #a2d2ff;
  --pink: #ffafcc;
  --white: #fff;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

ul {
  list-style: none;
}

button {
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
}

a {
  text-decoration: none;
  color: inherit;
}

.container {
  padding: 0 15px;
  max-width: 100%;
}

.d-flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.align-items-center {
  align-items: center;
}

.justify-content-between {
  justify-content: space-between;
}

.text-center {
  text-align: center;
}

body {
  font-family: "Arimo", sans-serif;
  transition: all 0.4s;
}


/* HEADER STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-header .header-top,
.page-header .header-bottom {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1;
  transition: all 0.4s;
}

.page-header .header-top {
  top: 0;
  padding: 10px 0;
  background: var(--pink);
}

.page-header .header-bottom {
  padding: 20px 0;
  background: var(--white);
  box-shadow: 0 -2px 10px rgb(0 0 0 / 15%), 0 5px 5px rgba(0, 0, 0, 0.15);
}

.page-header .header-bottom .menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  padding: 15px;
  border-top: 1px solid whitesmoke;
  transform: translateY(20px);
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.15);
  background: var(--white);
  transition: all 0.2s;
}

.page-header .header-bottom .menu.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.page-header .header-bottom .menu li:not(:last-child) {
  margin-bottom: 15px;
}

.top-banner {
  position: relative;
  height: 60vh;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--blue);
}

.top-banner .btn-group {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 20px;
  text-align: center;
}

.top-banner .btn {
  padding: 12px 24px;
  border: 1px solid;
  background: var(--white);
  font-weight: bold;
  white-space: nowrap;
}

.section {
  padding: 30px;
}

.section div {
  height: 50vh;
  background: var(--blue);
}


/* MQ STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (min-width: 600px) {
  .container {
    padding: 0 30px;
  }

  .flex-row\@s {
    flex-direction: row;
  }

  .top-banner .btn-group {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 900px) {
  .flex-row\@m {
    flex-direction: row;
  }

  .page-header .header-bottom {
    overflow: hidden;
  }

  .page-header .header-bottom .menu {
    position: static;
    padding: 0;
    border: none;
    margin-right: 80px;
    background: none;
    box-shadow: none;
  }

  .page-header .header-bottom .menu li:not(:last-child) {
    margin: 0 30px 0 0;
  }
}


/* BODY CLASSES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.scroll-down .header-top {
  transform: translate3d(0, -100%, 0);
}


/* FOOTER STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-footer {
  position: fixed;
  right: 15px;
  bottom: 20px;
  display: flex;
  align-items: center;
  font-size: 1rem;
  padding: 5px;
}

.page-footer a {
  display: flex;
  margin-left: 4px;
}

const body = document.body;
const headerTop = document.querySelector(".page-header .header-top");
const headerBottom = document.querySelector(".page-header .header-bottom");
const menu = document.querySelector(".page-header .header-bottom .menu");
const toggleMenu = document.querySelector(
  ".page-header .header-bottom .toggle-menu"
);
const scrollUp = "scroll-up";
const scrollDown = "scroll-down";
let lastScroll = 0;

calculateOffsets();

window.addEventListener("resize", () => {
  calculateOffsets();
});

window.addEventListener("scroll", () => {
  const currentScroll = window.pageYOffset;
  const headerTopHeight = headerTop.offsetHeight;
  const headerBottomHeight = headerBottom.offsetHeight;

  if (currentScroll <= 0) {
    body.classList.remove(scrollUp);
    return;
  }
  if (currentScroll > lastScroll && !body.classList.contains(scrollDown)) {
    // down
    body.classList.remove(scrollUp);
    body.classList.add(scrollDown);
    headerBottom.style.transform = `translateY(-${headerTopHeight}px)`;
    body.style.paddingTop = `${headerBottomHeight}px`;
  } else if (
    currentScroll < lastScroll &&
    body.classList.contains(scrollDown)
  ) {
    // up
    body.classList.remove(scrollDown);
    body.classList.add(scrollUp);
    headerBottom.style.transform = "none";
    body.style.paddingTop = `${headerTopHeight + headerBottomHeight}px`;
  }
  lastScroll = currentScroll;
});

toggleMenu.addEventListener("click", () => {
  menu.classList.toggle("is-visible");
});

function calculateOffsets() {
  const headerTopHeight = headerTop.offsetHeight;
  const headerBottomHeight = headerBottom.offsetHeight;
  headerBottom.style.top = `${headerTopHeight}px`;
  body.style.paddingTop = `${headerTopHeight + headerBottomHeight}px`;
}