|
|
@@ -1,1211 +0,0 @@
|
|
|
-/* 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-dark-teal: #005669;
|
|
|
- --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-blackest: #000000;
|
|
|
- --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: 1280px) {
|
|
|
- .bg-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 h1,
|
|
|
- .copy-h h2 {
|
|
|
- padding: 30px 50px;
|
|
|
- }
|
|
|
- .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: 1280px) {
|
|
|
- .bg-bdr-gray {
|
|
|
- border-right: 1px solid var(--c-gray);
|
|
|
- }
|
|
|
- .bg-bdl-gray {
|
|
|
- border-left: 1px solid var(--c-gray);
|
|
|
- }
|
|
|
-}
|
|
|
-@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: 1280px) {
|
|
|
- .bg-xw {
|
|
|
- flex-wrap: wrap;
|
|
|
- }
|
|
|
- .bg-xdr {
|
|
|
- flex-direction: row;
|
|
|
- }
|
|
|
- .bg-xjsb {
|
|
|
- justify-content: space-between;
|
|
|
- }
|
|
|
- .bg-xo1 {
|
|
|
- order: 1;
|
|
|
- }
|
|
|
- .bg-xo2 {
|
|
|
- order: 2;
|
|
|
- }
|
|
|
- .bg-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-ml1-25 {
|
|
|
- margin-left: 1.25rem;
|
|
|
- }
|
|
|
- .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: 1280px) {
|
|
|
- .bg-pb0 {
|
|
|
- padding-bottom: 0;
|
|
|
- }
|
|
|
- .bg-pt1-25 {
|
|
|
- padding-top: 1.25rem;
|
|
|
- }
|
|
|
- .bg-pr1-25 {
|
|
|
- padding-right: 1.25rem;
|
|
|
- }
|
|
|
- .bg-pb1-25 {
|
|
|
- padding-bottom: 1.25rem;
|
|
|
- }
|
|
|
- .bg-pl1-25 {
|
|
|
- padding-left: 1.25rem;
|
|
|
- }
|
|
|
- .bg-pt1-7 {
|
|
|
- padding-top: 1.7rem;
|
|
|
- }
|
|
|
- .bg-pr1-7 {
|
|
|
- padding-right: 1.7rem;
|
|
|
- }
|
|
|
- .bg-pb1-7 {
|
|
|
- padding-bottom: 1.7rem;
|
|
|
- }
|
|
|
- .bg-pl1-7 {
|
|
|
- padding-left: 1.7rem;
|
|
|
- }
|
|
|
-}
|
|
|
-@media screen and (min-width: 1280px) {
|
|
|
- .bg-pt4-2 {
|
|
|
- padding-top: 4.2rem;
|
|
|
- }
|
|
|
- .bg-pr8-3 {
|
|
|
- padding-right: 8.3rem;
|
|
|
- }
|
|
|
- .bg-pb4-2 {
|
|
|
- padding-bottom: 4.2rem;
|
|
|
- }
|
|
|
- .bg-pl4-2 {
|
|
|
- padding-left: 4.2rem;
|
|
|
- }
|
|
|
- .bg-pl8-3 {
|
|
|
- padding-left: 8.3rem;
|
|
|
- }
|
|
|
-}
|
|
|
-@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-blackest {
|
|
|
- background-color: var(--c-blackest);
|
|
|
-}
|
|
|
-.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);
|
|
|
-}
|
|
|
-.btn-product-available:hover {
|
|
|
- cursor: pointer;
|
|
|
- border: 1px solid var(--c-dark-teal);
|
|
|
- background-color: var(--c-blackish);
|
|
|
- color: var(--c-another-blue);
|
|
|
-}
|
|
|
-.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);
|
|
|
-}
|
|
|
-.related-products a:hover {
|
|
|
- color: var(--c-cyan);
|
|
|
- border-right: 1px solid var(--c-gray);
|
|
|
-}
|
|
|
-.cart-icon:hover {
|
|
|
- color: var(--c-cyan);
|
|
|
-}
|
|
|
-.fgc-cyan:hover {
|
|
|
- color: var(--c-pink);
|
|
|
-}
|
|
|
-.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-w30 {
|
|
|
- width: 30%;
|
|
|
- }
|
|
|
- .md-w50 {
|
|
|
- width: 50%;
|
|
|
- }
|
|
|
- .md-w70 {
|
|
|
- width: 70%;
|
|
|
- }
|
|
|
- .md-w100 {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- .md-h100 {
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-}
|
|
|
-@media screen and (min-width: 1280px) {
|
|
|
- .bg-w25 {
|
|
|
- width: 25%;
|
|
|
- }
|
|
|
- .bg-w50 {
|
|
|
- width: 50%;
|
|
|
- }
|
|
|
- .bg-w75 {
|
|
|
- width: 75%;
|
|
|
- }
|
|
|
- .bg-w100 {
|
|
|
- width: 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;
|
|
|
-}
|
|
|
-@media screen and (min-width: 760px) {
|
|
|
- .sticky-prod-info {
|
|
|
- position: -webkit-sticky;
|
|
|
- position: sticky;
|
|
|
- top: 48px;
|
|
|
- }
|
|
|
-}
|
|
|
-.icon-p {
|
|
|
- width: 12px;
|
|
|
- height: 12px;
|
|
|
-}
|