flylocal-web/assets/css/main.css

html,
body,
#__nuxt,
#__layout,
.page-container,
main {
  height: 100%;
}

html {
  font-size: min(3vmin, 18px);
}

header {
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 403;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 1rem 1rem 0.75rem 1rem;
  pointer-events: none;
}

.white-bkg header {
  background-color: white;
}

header button {
  pointer-events: all;
}

.header__col:nth-child(2) {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.header__col:nth-child(3) {
  text-align: right;
}

main {
  display: flex;
  flex-direction: column;
}

.nav {
  flex: 0 0 auto;
  background: white;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

:root {
  --m-s: 0.1s;
  --h-s: 0.3s;
  --d: calc(var(--h-s) - var(--m-s));
}

.nav--hide {
  transition: margin-top var(--m-s) linear var(--h-s), max-height var(--h-s) linear 0s;
  margin-top: 0;
  max-height: 0;
}

.nav--show {
  margin-top: 3.5rem;
  max-height: 250px;
  transition: margin-top var(--m-s) linear 0s, max-height var(--h-s) linear var(--m-s);
}

.btn--nav-open {
  padding: 1rem;
  display: block;
}

.flyout-container {
  z-index: 1001;
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: center;
  width: 100vw;
  transition: all 0.3s;
  pointer-events: none;
}

.flyout-container.flyout-container--hide {
  transform: translateY(200px);
}

.flyout-container.flyout-container--show {
  transform: translateY(0);
}