webshop/static/dist/styles-JIS64YTB.css

/* static/css/styles.css */
@font-face {
  font-family: "IBM Plex Mono Light";
  src:
    url("./fonts/IBMPlexMono-Light.woff2") format("woff2"),
    url("./fonts/IBMPlexMono-Light.woff") format("woff"),
    font-style: normal;
  font-weight: 100;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono Light Italic";
  src:
    url("./fonts/IBMPlexMono-LightItalic.woff2") format("woff2"),
    url("./fonts/IBMPlexMono-LightItalic.woff") format("woff"),
    font-style: italic;
  font-weight: 100;
  font-display: swap;
}
@font-face {
  font-family: "Inter Bold";
  src:
    url("./fonts/Inter-Bold.woff2") format("woff2"),
    url("./fonts/Inter-Bold.woff") format("woff"),
    font-style: normal;
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "Inter Bold Italic";
  src:
    url("./fonts/Inter-BoldItalic.woff2") format("woff2"),
    url("./fonts/Inter-BoldItalic.woff") format("woff"),
    font-style: italic;
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "Weiss Rund Gotisch";
  src:
    url("./fonts/weissrundgotisch.regular.woff2") format("woff2"),
    url("./fonts/weissrundgotisch.regular.woff") format("woff"),
    font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  --nav-height: 35px;
  --c-white: #ffffff;
  --c-anon-gray: #a5a5a5;
  --c-light-gray: #dbdbdb;
  --c-gray: #b7b7b7;
  --c-pink: #ffbcfc;
  --c-dark-bright-brown: #241b18;
  --c-dark-rubin: #3d230b;
  --c-rubin: #610000;
  --c-dark-red: #520000;
  --c-deep-brown: #2B2222;
  --c-terre: #AA9494;
  --c-green: #8dff98;
  --c-forest-green: #4c8042;
  --c-light-green: #f2ffcd;
  --c-light-blue: #bffbff;
  --c-another-blue: #80d1ff;
  --c-cyan: #00ffff;
  --c-bluegreen: #002f10;
  --c-dark-green: #002C29;
  --c-dark-bluegreen: #001b1d;
  --c-blue: #00114c;
  --c-dark-blue: #00111d;
  --c-brown: #2f2a00;
  --c-dark-brown: #1a1d00;
  --c-gray: #4b4b4b;
  --c-dark-gray: #555353;
  --c-bright-black: #020713;
  --c-gaow: #160E0E;
  --c-blackish: #11181d;
  --c-dark-black: #090d10;
  --c-black: #090909;
  --c-yet-gray: #292929;
  --f-mono: "IBM Plex Mono Light", monospace;
  --f-mono-italic: "IBM Plex Mono Light Italic", monospace;
  --f-sans: "Inter Bold", sans-serif;
  --f-sans-italic: "Inter Bold Italic", sans-serif;
  --f-gothic: "Weiss Rund Gotisch", serif;
}
@media screen and (min-width: 760px) {
  :root {
    --nav-height: 47px;
  }
}
html {
  box-sizing: border-box;
  scroll-padding-top: var(--nav-height);
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
html,
body {
  scroll-behavior: smooth;
}
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul,
li,
figure {
  margin: 0;
  padding: 0;
}
figure img {
  display: block;
}
ol,
ul {
  padding-left: 1rem;
}
img {
  max-width: 100%;
  height: auto;
}
button {
  font-family: inherit;
  font-size: inherit;
  border: none;
  border-radius: 0;
  margin: 0;
  padding: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
body {
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  width: 100%;
  height: 100%;
}
html {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  color: var(--c-white);
  font-size: 12px;
  font-family: var(--f-mono);
}
a {
  text-decoration: none;
  color: inherit;
}
input,
select,
textarea {
  background-color: inherit;
  color: inherit;
  border: 0;
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit;
  font-size: inherit;
  margin: 0;
  padding: 0;
}
input::placeholder,
textarea::placeholder {
  opacity: 1;
  color: #9f879b;
}
fieldset {
  border: 0;
  padding: 0;
}
.fs-small {
  font-size: 10px;
}
.fs-medium {
  font-size: 1rem;
}
.fs-biggish {
  font-size: 14px;
}
.fs-big {
  font-size: 15px;
}
.fs-bigger {
  font-size: 16px;
}
.fs-large {
  font-size: 18px;
}
.fs-larger {
  font-size: 20px;
}
.fs-huge {
  font-size: 24px;
}
.fs-wide {
  font-size: 30px;
}
.ff-sans {
  font-family: var(--f-sans);
}
.ff-sans em,
.ff-sans italic {
  font-family: var(--f-sans-italic);
  font-style: normal;
}
.ff-mono em,
.ff-mono italic {
  font-family: var(--f-mono-italic);
  font-style: normal;
}
@media screen and (min-width: 540px) {
  .sm-fs-medium {
    font-size: 1rem;
  }
  .sm-fs-biggish {
    font-size: 14px;
  }
  .sm-fs-big {
    font-size: 15px;
  }
  .sm-fs-large {
    font-size: 18px;
  }
  .sm-fs-larger {
    font-size: 20px;
  }
  .sm-fs-huge {
    font-size: 24px;
  }
}
@media screen and (min-width: 1920px) {
  .lg-fs-big {
    font-size: 15px;
  }
}
.tac {
  text-align: center;
}
.tar {
  text-align: right;
}
@media screen and (min-width: 540px) {
  .sm-tar {
    text-align: right;
  }
}
.copy h3,
.copy h4,
.copy h5,
.copy h6,
.copy p,
.copy table {
  max-width: 700px;
}
.copy-h-reset-weight h1,
.copy-h-reset-weight h2,
.copy-h-reset-weight h3,
.copy-h-reset-weight h4,
.copy-h-reset-weight h5,
.copy-h-reset-weight h6 {
  font-weight: inherit;
}
.copy-h-reset h1,
.copy-h-reset h2,
.copy-h-reset h3,
.copy-h-reset h4,
.copy-h-reset h5,
.copy-h-reset h6 {
  font-size: inherit;
  font-style: inherit;
}
.copy-h h1,
.copy-h h2 {
  font-size: 30px;
  font-family: var(--f-gothic);
  padding: 15px 20px;
  border-bottom: 1px solid var(--c-gray);
}
@media screen and (min-width: 1920px) {
  .copy-h-front h1,
  .copy-h-front h2,
  .copy-h-page h1,
  .copy-h-page h2 {
    padding: 2.5rem 4.2rem;
  }
}
.copy-h-page h3,
.copy-h-page h4,
.copy-h-page h5,
.copy-h-page h6 {
  font-size: inherit;
}
.copy-page h3,
.copy-page h4,
.copy-page h5,
.copy-page h6,
.copy-page p {
  padding: 0.75rem 0.75rem 2.5rem 0.7rem;
}
.copy-page table {
  margin: 0 0.75rem 2.45em 0.7rem;
}
.copy-page table td {
  width: 7.5rem;
}
.copy a {
  color: var(--c-cyan);
}
.ttu {
  text-transform: uppercase;
}
.hvc:hover {
  color: var(--c-green);
}
.checkout-image {
  width: 120px;
}
@media screen and (min-width: 540px) {
  .checkout-image {
    width: 220px;
  }
}
.img-page img {
  max-height: 1000px;
}
@media screen and (min-width: 2400px) {
  .img-page img {
    max-height: 12000px;
  }
}
.bd-white {
  border: 1px solid var(--c-white);
}
.bdb-pink {
  border-bottom: 1px solid var(--c-pink);
}
.bdb-dark-green {
  border-bottom: 1px solid var(--c-dark-green);
}
.bd-dark-rubin {
  border: 1px solid var(--c-dark-rubin);
}
.bdb-dark-red {
  border-bottom: 1px solid var(--c-dark-red);
}
.bd-yet-gray {
  border: 1px solid var(--c-yet-gray);
}
.bd-deep-brown {
  border: 1px solid var(--c-deep-brown);
}
.bdt-gray {
  border-top: 1px solid var(--c-gray);
}
.bdb-gray {
  border-bottom: 1px solid var(--c-gray);
}
.bd-dark-gray {
  border: 1px solid var(--c-dark-gray);
}
.bd-brown {
  border: 1px solid var(--c-brown);
}
.bd-blue {
  border: 1px solid var(--c-blue);
}
.bd-bluegreen {
  border: 1px solid var(--c-bluegreen);
}
@media screen and (min-width: 760px) {
  .md-bdl-pink {
    border-left: 1px solid var(--c-pink);
  }
  .md-bdl-rubin {
    border-left: 1px solid var(--c-rubin);
  }
}
@media screen and (min-width: 1920px) {
  .lg-bdr-gray {
    border-right: 1px solid var(--c-gray);
  }
  .lg-bdl-gray {
    border-left: 1px solid var(--c-gray);
  }
  .lg-bdl-pink {
    border-left: 1px solid var(--c-pink);
  }
}
.brad-6 {
  border-radius: 6px;
}
.vh {
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.dn {
  display: none;
}
.dib {
  display: inline-block;
}
.db {
  display: block;
}
.x {
  display: flex;
}
.xw {
  flex-wrap: wrap;
}
.xdr {
  flex-direction: row;
}
.xdc {
  flex-direction: column;
}
.xaic {
  align-items: center;
}
.xaib {
  align-items: baseline;
}
.xjsb {
  justify-content: space-between;
}
.xo1 {
  order: 1;
}
.xo2 {
  order: 2;
}
.xo3 {
  order: 3;
}
@media screen and (min-width: 400px) {
  .tn-xdr {
    flex-direction: row;
  }
}
@media screen and (min-width: 540px) {
  .sm-xaic {
    align-items: center;
  }
  .sm-xo1 {
    order: 1;
  }
  .sm-xo2 {
    order: 2;
  }
  .sm-xo3 {
    order: 3;
  }
}
@media screen and (min-width: 760px) {
  .md-dn {
    display: none;
  }
  .md-db {
    display: block;
  }
  .md-x {
    display: flex;
  }
  .md-xdc {
    flex-direction: column;
  }
  .md-xdr {
    flex-direction: row;
  }
  .md-xw {
    flex-wrap: wrap;
  }
  .md-xo1 {
    order: 1;
  }
  .md-xo2 {
    order: 2;
  }
  .md-xo3 {
    order: 3;
  }
}
@media screen and (min-width: 1920px) {
  .lg-x {
    display: flex;
  }
  .lg-xdr {
    flex-direction: row;
  }
  .lg-xw {
    flex-wrap: wrap;
  }
  .lg-xdc {
    flex-direction: column;
  }
  .lg-xo1 {
    order: 1;
  }
  .lg-xo2 {
    order: 2;
  }
  .lg-xo3 {
    order: 3;
  }
  .lg-xjsb {
    justify-content: space-between;
  }
}
.dg {
  display: grid;
}
.z1 {
  z-index: 1;
}
.z2 {
  z-index: 2;
}
.psr {
  position: relative;
}
.psf {
  position: fixed;
}
.psa {
  position: absolute;
}
.t0 {
  top: 0;
}
.b0 {
  bottom: 0;
}
.l0 {
  left: 0;
}
.t50 {
  top: 50%;
}
.l50 {
  left: 50%;
}
.ttcx {
  transform: translateX(-50%);
}
.ttcc {
  transform: translate(-50%, -50%);
}
.mta {
  margin-top: auto;
}
.mla {
  margin-left: auto;
}
.mra {
  margin-right: auto;
}
.mt1 {
  margin-top: 1rem;
}
.mr1 {
  margin-right: 1rem;
}
.mr0-5 {
  margin-right: 0.5rem;
}
.ml0-5 {
  margin-left: 0.5rem;
}
.ml1 {
  margin-left: 1rem;
}
.mb1-25 {
  margin-bottom: 1.25rem;
}
.mb4-25 {
  margin-bottom: 4.25rem;
}
.pt0-25 {
  padding-top: 0.25rem;
}
.pr0-25 {
  padding-right: 0.25rem;
}
.pb0-25 {
  padding-bottom: 0.25rem;
}
.pl0-25 {
  padding-left: 0.25rem;
}
.pt0-5 {
  padding-top: 0.5rem;
}
.pr0-5 {
  padding-right: 0.5rem;
}
.pb0-5 {
  padding-bottom: 0.5rem;
}
.pl0-5 {
  padding-left: 0.5rem;
}
.pt0-75 {
  padding-top: 0.75rem;
}
.pr0-75 {
  padding-right: 0.75rem;
}
.pb0-75 {
  padding-bottom: 0.75rem;
}
.pl0-75 {
  padding-left: 0.75rem;
}
.pt0-85 {
  padding-top: 0.85rem;
}
.pr0-85 {
  padding-right: 0.85rem;
}
.pb0-85 {
  padding-bottom: 0.85rem;
}
.pl0-85 {
  padding-left: 0.85rem;
}
.pt1 {
  padding-top: 1rem;
}
.pb1 {
  padding-bottom: 1rem;
}
.pb1-25 {
  padding-bottom: 1.25rem;
}
.pt1-7 {
  padding-top: 1.7rem;
}
.pb1-7 {
  padding-bottom: 1.7rem;
}
.pb2 {
  padding-bottom: 2rem;
}
.pt3-5 {
  padding-top: 3.5rem;
}
.pb3 {
  padding-bottom: 3rem;
}
.pt4-25 {
  padding-top: 4.25rem;
}
.pb4-25 {
  padding-bottom: 4.25rem;
}
.pt4-75 {
  padding-top: 4.75rem;
}
.pb4-75 {
  padding-bottom: 4.75rem;
}
.pb5-5 {
  padding-bottom: 5.5rem;
}
.pt7 {
  padding-top: 7rem;
}
.pb7 {
  padding-bottom: 7rem;
}
@media screen and (min-width: 540px) {
  .sm-pr0 {
    padding-right: 0;
  }
  .sm-pl0 {
    padding-left: 0;
  }
}
@media screen and (min-width: 760px) {
  .md-pt0-5 {
    padding-top: 0.5rem;
  }
  .md-pr0-5 {
    padding-right: 0.5rem;
  }
  .md-pb0-5 {
    padding-bottom: 0.5rem;
  }
  .md-pl0-5 {
    padding-left: 0.5rem;
  }
  .md-pt1 {
    padding-top: 1rem;
  }
  .md-pr1 {
    padding-right: 1rem;
  }
  .md-pb1 {
    padding-bottom: 1rem;
  }
  .md-pl1 {
    padding-left: 1rem;
  }
  .md-pr1-3 {
    padding-right: 1.3rem;
  }
  .md-pl1-3 {
    padding-left: 1.3rem;
  }
  .md-pt3-35 {
    padding-top: 3.35rem;
  }
  .md-pr3-35 {
    padding-right: 3.35rem;
  }
  .md-pb3-35 {
    padding-bottom: 3.35rem;
  }
  .md-pl3-35 {
    padding-left: 3.35rem;
  }
  .md-pt4-2 {
    padding-top: 4.2rem;
  }
  .md-pr4-2 {
    padding-right: 4.2rem;
  }
  .md-pb4-2 {
    padding-bottom: 4.2rem;
  }
  .md-pl4-2 {
    padding-left: 4.2rem;
  }
}
@media screen and (min-width: 1920px) {
  .lg-pb0 {
    padding-bottom: 0;
  }
  .lg-pr2 {
    padding-right: 2;
  }
  .lg-pt0-42 {
    padding-top: 0.42rem;
  }
  .lg-pr0-42 {
    padding-right: 0.42rem;
  }
  .lg-pb0-42 {
    padding-bottom: 0.42rem;
  }
  .lg-pl0-42 {
    padding-left: 0.42rem;
  }
  .lg-pt4-2 {
    padding-top: 4.2rem;
  }
  .lg-pr4-2 {
    padding-right: 4.2rem;
  }
  .lg-pb4-2 {
    padding-bottom: 4.2rem;
  }
  .lg-pl4-2 {
    padding-left: 4.2rem;
  }
  .lg-pt8-3 {
    padding-top: 8.3rem;
  }
  .lg-pr8-3 {
    padding-right: 8.3rem;
  }
  .lg-pb8-3 {
    padding-bottom: 8.3rem;
  }
  .lg-pl8-3 {
    padding-left: 8.3rem;
  }
}
.logo-eye {
  width: 27px;
  height: 22.7px;
}
.logo-hardware {
  width: 120px;
  height: 14px;
}
@media screen and (min-width: 760px) {
  .logo-hardware {
    width: 160px;
    height: 18px;
  }
}
.bgc-white {
  background-color: var(--c-white);
}
.bgc-gr-black {
  background:
    linear-gradient(
      180deg,
      var(--c-blackish) 0%,
      var(--c-dark-black) 100%);
  background: var(--c-dark-black);
}
.bgc-black {
  background-color: var(--c-black);
}
.bgc-gaow {
  background-color: var(--c-gaow);
}
.bgc-bright-black {
  background-color: var(--c-bright-black);
}
.fgc-terre {
  color: var(--c-terre);
}
.fgc-gray {
  color: var(--c-gray);
}
.fgc-dark-gray {
  color: var(--c-dark-gray);
}
.bgc-dark-brown {
  background-color: var(--c-dark-brown);
}
.bgc-dark-bright-brown {
  background-color: var(--c-dark-bright-brown);
}
.fgc-light-gray {
  color: var(--c-light-gray);
}
.fgc-anon-gray {
  color: var(--c-anon-gray);
}
.fgc-green {
  color: var(--c-green);
}
.fgc-light-blue {
  color: var(--c-light-blue);
}
.bgc-dark-blue {
  background-color: var(--c-dark-blue);
}
.bgc-dark-bluegreen {
  background-color: var(--c-dark-bluegreen);
}
.fgc-cyan {
  color: var(--c-cyan);
}
.btn-product-code {
  padding: 2px 4px 3px 4px;
}
.btn-checkout-remove {
  padding: 5px 7px;
}
.btn-submit {
  padding: 8px 12px 10px 12px;
}
.btn-product-soldout {
  border: 1px solid var(--c-dark-rubin);
  background-color: var(--c-dark-bright-brown);
  color: var(--c-light-gray);
}
.btn-product-unselectable {
  border: 1px solid var(--c-bluegreen);
  background-color: var(--c-dark-black);
  color: var(--c-light-gray);
}
.btn-product-available {
  cursor: pointer;
  border: 1px solid var(--c-bluegreen);
  background-color: var(--c-dark-bluegreen);
  color: var(--c-cyan);
}
.payment-buttons {
  gap: 1rem;
}
.btn-stripe {
  width: 88px;
  height: 42px;
}
.btn-nowpayments {
  width: 170px;
  height: 42px;
}
@media screen and (min-width: 540px) {
  .btn-stripe {
    width: 116px;
    height: 55px;
  }
  .btn-nowpayments {
    width: 220px;
    height: 55px;
  }
}
.product-size-guide h1,
.product-size-guide h2,
.product-size-guide h3,
.product-size-guide h4,
.product-size-guide h5,
.product-size-guide h6 {
  color: var(--c-another-blue);
  text-transform: uppercase;
  padding-bottom: 1.7rem;
}
.product-size-guide table {
  width: 100%;
}
.copy table {
  table-layout: fixed;
  border-collapse: collapse;
}
.copy th,
.copy td {
  padding: 4px 0;
  text-transform: uppercase;
  font-size: 10px;
}
.copy td {
  border-bottom: 1px solid var(--c-forest-green);
  text-align: center;
}
.copy td:first-child {
  text-align: left;
  color: var(--c-light-green);
}
.related-products {
  grid-template-columns: repeat(2, 1fr);
  overflow: hidden;
  --gap: 4px;
  --line-offset: calc(var(--gap) / 2);
  --line-thickness: 1px;
  --line-color: var(--c-gray);
}
@media screen and (min-width: 760px) {
  .related-products {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media screen and (min-width: 2400px) {
  .related-products {
    grid-template-columns: repeat(5, 1fr);
  }
}
.related-products::after {
  content: "";
  background-color: var(--c-gray);
  width: 1000%;
  height: 1px;
  margin-top: auto;
}
.related-products-child {
  border-bottom: 1px solid var(--c-gray);
  border-right: 1px solid var(--c-gray);
}
.copy-checkout-disclaimer {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media screen and (min-width: 760px) {
  .copy-checkout-disclaimer {
    gap: 34px;
  }
}
.sunset {
  width: 100%;
  height: 15vh;
  background-repeat: no-repeat;
  background-position: bottom;
}
.curp {
  cursor: pointer;
}
.cura {
  cursor: auto;
}
.w5r {
  width: 5rem;
}
.w30 {
  width: 30%;
}
.w50 {
  width: 50%;
}
.w70 {
  width: 70%;
}
.w100 {
  width: 100%;
}
.mw-680px {
  max-width: 680px;
}
.h15vh {
  height: 15vh;
}
.h100 {
  height: 100%;
}
@media screen and (min-width: 540px) {
  .sm-w30 {
    width: 30%;
  }
  .sm-w70 {
    width: 70%;
  }
  .sm-w100 {
    width: 100%;
  }
}
@media screen and (min-width: 760px) {
  .md-w25 {
    width: 25%;
  }
  .md-w50 {
    width: 50%;
  }
  .md-w100 {
    width: 100%;
  }
  .md-h100 {
    height: 100%;
  }
}
@media screen and (min-width: 1920px) {
  .lg-w25 {
    width: 25%;
  }
  .lg-w75 {
    width: 75%;
  }
  .lg-w50 {
    width: 50%;
  }
}
@media screen and (min-width: 2400px) {
  .hg-w1200 {
    width: 1200px;
  }
  .hg-x1 {
    flex: 1;
  }
}
.nav-height {
  padding-top: 34.7px;
}
@media screen and (min-width: 760px) {
  .nav-height {
    padding-top: 46.7px;
  }
}
.form-input {
  padding: 14.5px 10px;
  background-color: #00120e;
  border: 1px solid #213f38;
}
.icon-p {
  width: 12px;
  height: 12px;
}