@font-face { font-family: 'BC Sans'; font-weight: 400; src: url('https://static.oakboard.ca/fonts/BCSans-Regular.woff2') format('woff2'), url('https://static.oakboard.ca/fonts/BCSans-Regular.woff') format('woff'); }
@font-face { font-family: 'Ubuntu'; font-weight: 300; src: url('https://static.oakboard.ca/fonts/ubuntu/Ubuntu-L.ttf') format('truetype'); }

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

html, body {
  min-width: 100vw;
  max-width: 100vw;
  min-height: 100vh;

  scroll-behavior: smooth;
}

body {
  background-color: #000000;

  /* no js fallback */
  --tt-scroll-cover: -100s;
  --tt-scroll-hoodies-box: -100s;
  --tt-scroll-old-school-box: -100s;
  --tt-scroll-canada-box: -100s;
  --tt-scroll-embroidered-box: -100s;
  --tt-scroll-hoodie-inception: -100s;
  --tt-scroll-zipper-box: -100s;
  --tt-scroll-pocket-box: -100s;
  --tt-scroll-buy-bar: -100s;
  --tt-scroll-extra-box: -100s;
}

body,
body .op-flex,
body .op-flex * {
  --op-flex-gap-horizontal: 20px;
  --op-flex-gap-vertical: 20px;
}

body,
input,
input::placeholder,
textarea,
textarea::placeholder {
  font-size: 20px;
  font-family: 'BC Sans', 'Helvetica Neue', 'Verdana', 'Arial', sans-serif;
  font-weight: 400;
  line-height: 1.42;
  letter-spacing: 0.01em;
  color: #ddd;
}

a, a:visited {
  color: #3d5d0f;
  text-decoration: underline;
}

table {
  border-spacing: 0px;
}

th, td {
  text-align: left;
  padding-left: 4px;
}

td {
  border-left: solid 1px #999;
}

tr {
  height: 30px;
}

tr th:first-child {
  padding-right: 4px;
}



[tt-scroll],
.scroll-child,
.scroll-child:before {
  animation-duration: 100.1s;
  animation-delay: -100s;
  animation-timing-function: linear;
  animation-play-state: paused;
}



#cover {
  min-height: 170vh;
  width: 100%;

  background-image: url('assets/hoodie.png');
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: 900px;

  animation-name: cover-back-scale;
  animation-delay: var(--tt-scroll-cover);
  animation-timing-function: ease-out;

  will-change: scroll-position;
}

#cover .cover-fixed {
  position: fixed;

  height: 100vh;
  width: 100%;
  padding-bottom: 300px;

  overflow: hidden;

  animation-name: cover-fixed-display;
  animation-delay: var(--tt-scroll-cover);
}

#cover .cover-title {
  max-height: 0px;

  font-family: 'Ubuntu', 'Helvetica Neue', 'Verdana', 'Arial', sans-serif;
  font-size: 42px;
  text-align: center;

  color: #aaa;
}

#cover .cover-title.title-first {
  animation-name: cover-fade-title-first;
  animation-delay: var(--tt-scroll-cover);
}

#cover .cover-title.title-second {
  margin-top: -2px;
  animation-name: cover-fade-title-second;
  animation-delay: var(--tt-scroll-cover);
}

#cover .cover-fixed svg {
  width: 300px;
  height: auto;
  transform: rotate(0deg) skew(0deg, 0deg) scale(1, 1);
  animation-name: cover-tree-fade;
  animation-delay: var(--tt-scroll-cover);
  animation-timing-function: ease-in;

  will-change: transform, opacity;
}

@media (max-width: 576px) {
  #cover .cover-title {
    font-size: 32px;
  }

  #cover .cover-fixed svg {
    width: 220px;
  }
}

#cover svg .tree-leaves {
  animation-name: cover-tree-leaves-fade;
  animation-delay: var(--tt-scroll-cover);
}

#cover svg .tree-trunk {
  animation-name: cover-tree-trunk-fade;
  animation-delay: var(--tt-scroll-cover);
}

@keyframes cover-fade-title-first {
  0% { opacity: 1; color: #aaa; transform: scale(1, 1); }
  37% { opacity: 1; color: #aaa; transform: scale(1, 1); }
  42% { opacity: 1; color: #fff; }
  46% { opacity: 0; color: #fff; transform: scale(1.4, 1.4); }
  100% { opacity: 0; color: #fff; }
}

@keyframes cover-fade-title-second {
  0% { opacity: 0; color: #fff; }
  42% { opacity: 0; color: #fff; transform: translateY(17px) scale(0.8, 0.8); }
  46% { opacity: 1; color: #fff; }
  54% { opacity: 1; color: #fff; }
  61% { opacity: 0; color: #fff; transform: translateY(17px) scale(1.8, 1.8); }
  100% { opacity: 0; color: #fff; }
}

@keyframes cover-tree-fade {
  0% { opacity: 1; transform: translateY(0px) rotate(0deg) skew(0deg, 0deg) scale(1, 1); }
  48% { opacity: 1; transform: translateY(0px) rotate(0deg) skew(0deg, 0deg) scale(1, 1); }
  64% { opacity: 0; transform: translateY(-100px) rotate(-7deg) skew(-25deg, 20deg) scale(2, 2); }
  100% { opacity: 0; transform: translateY(-100px) rotate(-7deg) skew(-25deg, 20deg) scale(2, 2); }
}

@keyframes cover-back-scale {
  0% { background-color: #000000; background-size: 34vh; }
  46% { background-color: #000000; background-size: 34vh; }
  53% { background-color: #0b183a; }
  56% { background-color: #0b183a; }
  60% { background-color: #000000; background-size: 900px; }
  100% { background-color: #000000; background-size: 900px; }
}

@keyframes cover-tree-leaves-fade {
  0% { fill: #3d5d0f; }
  42% { fill: #3d5d0f; }
  45% { fill: #ffffff; }
  100% { fill: #ffffff; }
}

@keyframes cover-tree-trunk-fade {
  0% { fill: #3f3d22; }
  42% { fill: #3f3d22; }
  45% { fill: #ffffff; }
  100% { fill: #ffffff; }
}

@keyframes cover-fixed-display {
  0% { padding-bottom: 300px; position: fixed; }
  37% { padding-bottom: 300px; }
  60% { padding-bottom: 400px; }
  70% { position: fixed; }
  70.1% { position: absolute; }
  100% { padding-bottom: 400px; position: absolute; }
}



.info-container {
  width: 100%;
}

.info-container > .width-container {
  width: 100%;
  max-width: 780px;
}

.info-container > .width-container.box-wide > div {
  width: 100%;
}

.info-container > .width-container.box-wide .info-box {
  width: 100%;
  height: auto;
  margin: 0px 10px;

  min-height: 100px;
  max-width: 700px;
}

.info-container > .width-container.box-wide .info-box > * {
  min-width: 340px;
}

.info-box {
  width: 340px;
  height: 420px;
  border-radius: 18px;

  background-color: #ccc;
  color: #666;

  overflow: hidden;
}

.info-box.box-pad,
.info-box .box-pad {
  padding: 30px;
}

.box-blur {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.box-title {
  font-family: 'Ubuntu', 'Helvetica Neue', 'Verdana', 'Arial', sans-serif;
  font-size: 1.3em;
  color: #000;
}

.box-dark {
  background-color: #333333;
  color: #aaa;
}

.box-dark .box-title {
  color: #fff;
}

.box-slide-first {
  animation-name: box-slide-first;
  animation-timing-function: ease-out;
}

.box-slide-second {
  animation-name: box-slide-second;
  animation-timing-function: ease-out;
}

@keyframes box-slide-first {
  0% { transform: translateY(160px); }
  36% { transform: translateY(0px); }
  100% { transform: translateY(0px); }
}

@keyframes box-slide-second {
  0% { transform: translateY(240px); }
  42% { transform: translateY(0px); }
  100% { transform: translateY(0px); }
}



.box-back:before {
  content: '';

  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  z-index: -1;
}



#first-info {
  background: linear-gradient(#00000000 42px, #000000ff 300px);

  margin-top: -340px;
  margin-bottom: -300px;
  padding-bottom: 300px;
}



.hoodies-box {
  animation-delay: var(--tt-scroll-hoodies-box);
}

.hoodies-box:before {
  background-color: #1d2d52;
  background-image: url('assets/hoodie-folded.png');
  background-size: 660px;
  background-position: 80px 180px;

  animation-name: hoodies-box;
  animation-delay: var(--tt-scroll-hoodies-box);
}

.hoodies-box > div {
  background-color: transparent; /* #3442706b */
}

@keyframes hoodies-box {
  0% { filter: brightness(30%); }
  10% { filter: brightness(30%); }
  42% { filter: brightness(100%); }
  100% { filter: brightness(100%); }
}



.old-school-box {
  animation-delay: var(--tt-scroll-old-school-box);
}

.old-school-box:before {
  background-color: #0c3449;
  background-image: url('assets/hoodie-green.png');
}



.canada-box {
  animation-delay: var(--tt-scroll-canada-box);
}

.canada-box:before {
  background-image: url('assets/canada-flag.svg');
  background-size: 480px;
  transform: translateY(190px) rotate(-10deg);

  animation-name: canada-box;
  animation-delay: var(--tt-scroll-canada-box);

  will-change: background-size, transform;
}

@keyframes canada-box {
  0% { background-size: 370px; transform: translateY(190px) rotate(-20deg); }
  70% { background-size: 560px; transform: translateY(190px) rotate(-10deg); }
  100% { background-size: 560px; transform: translateY(190px) rotate(-10deg); }
}



.embroidered-box {
  animation-delay: var(--tt-scroll-embroidered-box);
}

.embroidered-box:before {
  background-image: url('assets/hoodie-logo.jpg');
  background-size: 560px;
}

.embroidered-box > div {
  background-color: #27345f6b;
}



[tt-scroll='hoodie-inception'] > .info-box {
  animation-delay: var(--tt-scroll-hoodie-inception);
}

.hoodie-inception {
  min-height: 300px;

  background-color: #0b183a;
  background-image: url('assets/hoodie-cut.png'), url('assets/hoodie-cut.png'), url('assets/hoodie-cut.png'), url('assets/hoodie-cut.png');
  background-size: 90%, 100%, 110%, 120%;
  background-position: -20px bottom;
  background-repeat: no-repeat;

  animation-name: hoodie-inception;
  animation-delay: var(--tt-scroll-hoodie-inception);
  animation-timing-function: ease-out;

  will-change: background-size;
}

@keyframes hoodie-inception {
  0% { background-size: 50%, 70%, 90%, 110% }
  80% { background-size: 90%, 100%, 110%, 120% }
  100% { background-size: 90%, 100%, 110%, 120% }
}



[tt-scroll='zipper-box'] > .info-box {
  animation-delay: var(--tt-scroll-zipper-box);
}

[tt-scroll='pocket-box'] > .info-box {
  animation-delay: var(--tt-scroll-pocket-box);
}

[tt-scroll='extra-box'] > .info-box {
  animation-delay: var(--tt-scroll-extra-box);
}



#footer {
  background-color: #000000;
  width: 100%;
  height: 33vh;
  min-height: 180px;

  text-align: center;
  font-size: 0.8em;

  margin-bottom: 20px;
}



#buy-bar {
  position: sticky;
  bottom: 40px;

  width: 100%;
}

#buy-bar > .bar-box {
  position: relative;
  top: 0px;

  border-radius: 16px;
  width: 700px;
  padding: 0px 20px;
  margin: 0px 10px;

  overflow: hidden;

  background-color: #ffffffab;
  color: #000;
  font-size: 0.7em;

  box-shadow: 0px 2px 8px -4px #000;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);

  animation-name: buy-bar-slide, buy-bar-back;
  animation-delay: var(--tt-scroll-cover), var(--tt-scroll-extra-box);
  animation-timing-function: ease-out, linear;

  min-height: 60px;
  max-height: 60px;
  transition: max-height 300ms ease-in-out;
}

#buy-bar > .bar-box.bar-expanded {
  --tt-scroll-cover: -100s;
}

#buy-bar > .bar-box * {
  --op-flex-gap-horizontal: 10px;
  --op-flex-gap-vertical: 10px;
}

#buy-bar > .bar-box > .bar-content {
  min-height: 60px;
  max-height: 60px;
}

#buy-bar > .bar-box .bar-button {
  background-color: #383838;
  color: #fff;

  border-radius: 42px;
  padding: 2px 14px;

  cursor: pointer;
  user-select: none;
}

#buy-bar > .bar-box #buy-button {
  background-color: #1e3e9e;
}

#buy-bar > .bar-box.bar-expanded #buy-button,
#buy-bar > .bar-box.bar-collapsed #close-button {
  display: none;
}

@keyframes buy-bar-slide {
  0% { top: 56px; }
  37% { top: 56px; }
  48% { top: 0px; }
  100% { top: 0px; }
}

@keyframes buy-bar-back {
  0% { background-color: #ffffffcc; }
  6% { background-color: #ccccccff; }
  100% { background-color: #ccccccff; }
}

#learn-more {
  cursor: pointer;
  color: #0029a6;
  text-decoration: underline;
  animation-name: learn-more-hide;
  animation-delay: var(--tt-scroll-hoodies-box);
}

@keyframes learn-more-hide {
  0% { opacity: 1; cursor: pointer; }
  13% { opacity: 1; cursor: pointer; }
  14% { opacity: 0; cursor: default; }
  100% { opacity: 0; cursor: default; }
}



.size-chart {
  margin: 10px;
}