From 670fa2161a3df294730cd9bb4a1c472257337f0b Mon Sep 17 00:00:00 2001 From: Shawn King Date: Mon, 3 Jun 2019 09:25:34 -0400 Subject: [PATCH] FTR - More CSS and template work for the product and listing pages --- .vs/config/applicationhost.config | 8 + .vs/fortherun/v15/.suo | Bin 14848 -> 14336 bytes BC-Home.html | 26 ++ BC-Layout.html | 22 +- BC-Product.html | 40 +-- assets/css/_components.button.scss | 4 +- assets/css/_components.callouts.scss | 33 +- assets/css/_components.cart.scss | 4 +- assets/css/_components.custom-page.scss | 4 +- assets/css/_components.footer.scss | 47 ++- assets/css/_components.header.scss | 8 +- assets/css/_components.navigation.scss | 4 +- assets/css/_components.product.scss | 105 ++++--- assets/css/_components.products-listing.scss | 89 +++--- assets/css/_components.similar-products.scss | 33 +- assets/css/styles.css | 302 +++++++++++-------- assets/css/styles.min.css | 2 +- 17 files changed, 442 insertions(+), 289 deletions(-) diff --git a/.vs/config/applicationhost.config b/.vs/config/applicationhost.config index 2d53993..f5190f2 100644 --- a/.vs/config/applicationhost.config +++ b/.vs/config/applicationhost.config @@ -192,6 +192,14 @@ + + + + + + + + diff --git a/.vs/fortherun/v15/.suo b/.vs/fortherun/v15/.suo index d8689b9f9f9dac49b56c020e569e3b86ddd66d02..dcdd6d4c683ed712c1221119070bf84bfdc8f7db 100644 GIT binary patch delta 517 zcmYk2%S%F05XR@+tkkrZBG)1{Ex6DFg`jO@4{8yF1TI<>)*`TyyahcLXVJ1v%_brW zs%3(DHw7&!sHjbCYT2fLp$EFqWF;=gjZpNL?n9VaNYA{5q4@a6`#8`)V=5Ea|JBGo|wy3LwD_ntUoOHk5CWn zWP?)Rb#SXH2FpgVHK3s1|0bR==N~U$=~x0C=7HBgG@q7GRMShgn#G9!Su-40Etbb99>XKk+si8+-olTpR4y m61mHVBXV5&juTZu*(pz@N>;o2FsRs2x(D!Dix?3t)$j{>&bOZc delta 409 zcmZXPF;Bu!6oub?Riua&w6q`{8Zd;xL5Xp4XyWKVh>6jJpTNNI24S(ICY|2>1BU44 zAiTxNVBB1o{3i@f=)Ea1B);V2HeXK8IgR_Vdg)2$@cpUL_P?MggqRj_m>J?+wr%l4 zuRsiE;Q`)Qcd(7HRzF=3wh8m~=(25tE?XT^e#uRmV_v4qbyd=89Z%dN#xob=4uZ~gP1kv}CQg{a zuvNzo>&U290@^#XAxAcjq#te?xHlr#% qV;Ee)s~H5h62HsmoQ$fHOpasFjrd{{ product.name }} - + {{ head_content }} @@ -36,6 +36,7 @@ + +
+
{{ bigcartel_credit }}
+
diff --git a/BC-Product.html b/BC-Product.html index 6a192b1..1314d6e 100644 --- a/BC-Product.html +++ b/BC-Product.html @@ -8,6 +8,12 @@ {% assign product_status = 'Coming soon' %} {% endcase %}
+ +
+ {% if product_status != blank %}{{ product_status }}{% endif %} +

{{ product.name }}

+
+
    @@ -19,7 +25,7 @@ {% endfor %}
    - {% for image in product.images %} + {% for image in product.images %}
  • @@ -33,30 +39,24 @@
- -
- {% if product_status != blank %}{{ product_status }}{% endif %} -

{{ product.name }}

+ {% if product.description != blank %} +
+ {{ product.description | paragraphs }}
+ {% endif %}
- {% if product.description != blank %} -
- {{ product.description | paragraphs }} -
- {% endif %} - {% if product.status == 'active' %} {% if theme.show_inventory_bars %}
Availability
    - {% for option in product.options %} + {% for option in product.options %}
  • +
    Only 1 left
    + {% endif %}--> {% unless product.has_default_option %}
    {{ option.name }}
    {% endunless %} @@ -76,12 +76,12 @@

    {{ product.name }}

    {% else %}
    + {% for category in product.categories %} + {% if category.name == 'Shirts' %} +
    Your content
    + {% endif %} + {% endfor %} + --> {% for category in categories.active %} {% if category.name == 'Shirts' %} diff --git a/assets/css/_components.button.scss b/assets/css/_components.button.scss index 255aa57..1e30c06 100644 --- a/assets/css/_components.button.scss +++ b/assets/css/_components.button.scss @@ -15,7 +15,7 @@ button { transition: background .2s ease; display: inline-block; padding: .5rem 1rem; - font-family: $thick-text; + font-family: $brand-text; font-size: 1rem; line-height: 1em; color: white; @@ -29,7 +29,7 @@ button { padding: 1.25rem 2rem; font-size: 1.5rem; font-weight: 900; - letter-spacing: .0625rem; + //letter-spacing: .0625rem; } // &.negative { diff --git a/assets/css/_components.callouts.scss b/assets/css/_components.callouts.scss index 3eba342..8bce310 100644 --- a/assets/css/_components.callouts.scss +++ b/assets/css/_components.callouts.scss @@ -18,8 +18,20 @@ grid-gap: 0; } // - margin-top: 2rem; - margin-bottom: 4rem; + position: relative; + //margin-top: 2rem; + padding-bottom: 4rem; + // + &:before { + content: ""; + position: absolute; + z-index: -1; + top: 0; + right: -20vw; + bottom: 0; + left: -20vw; + background: #f9fafb; + } } // .callout { @@ -28,7 +40,7 @@ display: flex; justify-content: space-between; align-items: center; - height: 16rem; + height: 12rem; } // &__about { @@ -79,22 +91,11 @@ } } // - &--link { + .button { position: relative; z-index: 1; margin-right: 4rem; - padding: 1rem 1.5rem; - height: 4rem; - font-family: $brand-text; - font-size: 1.25rem; - line-height: 2rem; - text-align: right; - text-transform: uppercase; - text-decoration: none; - color: white; - background: darken($blue, 20%); - border-radius: 2rem; - box-shadow: 0 0 0 .0625rem lighten($blue, 15%); + background: darken($blue, 10%); } } // diff --git a/assets/css/_components.cart.scss b/assets/css/_components.cart.scss index c0a5e35..7d1b89e 100644 --- a/assets/css/_components.cart.scss +++ b/assets/css/_components.cart.scss @@ -21,8 +21,8 @@ // position: relative; //margin-bottom: 2rem; - padding-top: 4rem; - padding-bottom: 4rem; + padding-top: 3rem; + padding-bottom: 3rem; min-height: 60vh; //background: $fafafa; // diff --git a/assets/css/_components.custom-page.scss b/assets/css/_components.custom-page.scss index 100c96d..7e09a4e 100644 --- a/assets/css/_components.custom-page.scss +++ b/assets/css/_components.custom-page.scss @@ -6,8 +6,8 @@ &-page { position: relative; //margin-bottom: 2rem; - padding-top: 4rem; - padding-bottom: 4rem; + padding-top: 3rem; + padding-bottom: 3rem; // &:before { content: ""; diff --git a/assets/css/_components.footer.scss b/assets/css/_components.footer.scss index 3ebe697..7752304 100644 --- a/assets/css/_components.footer.scss +++ b/assets/css/_components.footer.scss @@ -39,15 +39,16 @@ list-style: none; } // - &--link { + &--link, + a { transition: box-shadow .3s ease; display: inline-block; margin-right: .5rem; margin-left: .5rem; padding: .5rem 0; font-family: $brand-text; - font-size: 1.125rem; - font-weight: 500; + font-size: 1rem; + font-weight: 900; text-transform: uppercase; text-decoration: none; color: $white; @@ -68,3 +69,43 @@ } } } +// +// +// +.footer__credit { + // CSS GRID: Target browsers that support the `display: grid` and `grid-template-columns` (maybe only using repeat?) properties. + // These properties are exclusive to browsers that support the `display: grid` and `grid-template-columns` properties. + @supports (display: grid) and (grid-template-columns: repeat(2, 1fr)) { + grid-column: 1 / span 3; + grid-row: 2; + } + // + position: relative; + margin: 0 auto; + padding: .25rem 0; + width: 80vw; + background: darken($black, 20%); + // + &:before, + &:after { + content: ""; + position: absolute; + top: 0; + bottom: 0; + width: 20vw; + background: darken($black, 20%); + } + // + &:before { + right: 100%; + } + // + &:after { + left: 100%; + } +} +// +.credit__badge a { + font-size: .75rem; + color: $white; +} diff --git a/assets/css/_components.header.scss b/assets/css/_components.header.scss index be9915f..1fb453a 100644 --- a/assets/css/_components.header.scss +++ b/assets/css/_components.header.scss @@ -85,8 +85,8 @@ align-items: center; margin-top: 0; margin-bottom: 0; - padding-top: 4rem; - padding-bottom: 4rem; + padding-top: 3rem; + padding-bottom: 3rem; //height: 30vh; //text-align: center; //margin: 0; @@ -96,8 +96,8 @@ // &__link { //display: inline-block; - width: 9.375rem; - height: 9.375rem; + width: 20rem; + //height: 9.375rem; //box-shadow: -1rem 0 0 $white, -1.0625rem 0 0 $orange, -1.1875rem 0 0 $white, -1.25rem 0 0 $red, -1.375rem 0 0 $white, -1.4375rem 0 0 $purple; } } \ No newline at end of file diff --git a/assets/css/_components.navigation.scss b/assets/css/_components.navigation.scss index 7770398..5fb7f7a 100644 --- a/assets/css/_components.navigation.scss +++ b/assets/css/_components.navigation.scss @@ -59,8 +59,8 @@ margin-left: .5rem; padding: .5rem 0; font-family: $brand-text; - font-size: 1.125rem; - font-weight: 500; + font-size: 1rem; + font-weight: 900; text-transform: uppercase; text-decoration: none; color: $black; diff --git a/assets/css/_components.product.scss b/assets/css/_components.product.scss index c8ad40c..c271f8b 100644 --- a/assets/css/_components.product.scss +++ b/assets/css/_components.product.scss @@ -21,8 +21,8 @@ // position: relative; //margin-bottom: 2rem; - padding-top: 4rem; - padding-bottom: 4rem; + padding-top: 0; // Removed padding to accomodate header moving + padding-bottom: 3rem; //background: $fafafa; // &:before { @@ -39,12 +39,59 @@ } } // + // + &__page--headings { + // CSS GRID: Target browsers that support the `display: grid` and `grid-template-columns` (maybe only using repeat?) properties. + // These properties are exclusive to browsers that support the `display: grid` and `grid-template-columns` properties. + @supports (display: grid) and (grid-template-columns: repeat(2, 1fr)) { + grid-column: 1 / span 2; + grid-row: 1; + } + // + position: relative; + margin-bottom: 3rem; + padding-top: 2rem; + padding-bottom: 2rem; + // + &:before { + content: ""; + position: absolute; + right: -20vw; + bottom: 0; + left: -20vw; + height: .0625rem; + box-shadow: 0 .0625rem 0 darken(#f9fafb, 10%); + } + } + // + &-status { + display: inline-block; + margin-bottom: .5rem; + padding: .3125rem .75rem; + font-family: $brand-text; + font-weight: 700; + font-size: 95%; + color: $white; + background: $red; + border-radius: .125rem; + } + // + &--title { + margin: 0; + font-family: $brand-text; + font-size: 2rem; + font-weight: 900; + line-height: .875em; + text-transform: uppercase; + color: $black; + } + // &__images { // CSS GRID: Target browsers that support the `display: grid` and `grid-template-columns` (maybe only using repeat?) properties. // These properties are exclusive to browsers that support the `display: grid` and `grid-template-columns` properties. @supports (display: grid) and (grid-template-columns: repeat(2, 1fr)) { grid-column: 1; - grid-row: 1; + grid-row: 2; } } // @@ -53,8 +100,10 @@ // These properties are exclusive to browsers that support the `display: grid` and `grid-template-columns` properties. @supports (display: grid) and (grid-template-columns: repeat(2, 1fr)) { grid-column: 2; - grid-row: 1; + grid-row: 2; } + // + padding-left: 2rem; } // &__slides { @@ -127,42 +176,8 @@ } } // - &__page--headings, &__details { - padding-left: 2rem; - } - // - &__page--headings { - // CSS GRID: Target browsers that support the `display: grid` and `grid-template-columns` (maybe only using repeat?) properties. - // These properties are exclusive to browsers that support the `display: grid` and `grid-template-columns` properties. - @supports (display: grid) and (grid-template-columns: repeat(2, 1fr)) { - grid-column: 2; - grid-row: 1; - } - } - // - &-status { - display: inline-block; - margin-bottom: .5rem; - padding: .3125rem .75rem; - font-family: $brand-text; - font-weight: 700; - font-size: 95%; - color: $white; - background: $red; - border-radius: .125rem; - } - // - &--title { - margin: 0 0 2rem 0; - padding-bottom: 2rem; - font-family: $thick-text; - font-size: 2.75rem; - font-weight: 900; - line-height: .875em; - text-transform: none; - color: $black; - border-bottom: .0625rem solid darken(#f9fafb, 20%); + //padding-left: 2rem; } // &__details { @@ -202,6 +217,8 @@ } // &--description { + margin-bottom: 3rem; + font-family: $brand-text; font-size: 1.25rem; line-height: 125%; color: $black; @@ -270,16 +287,20 @@ &__select-label { display: block; margin-bottom: .25rem; + font-family: $brand-text; font-size: 85%; + font-weight: 900; + text-transform: uppercase; } // &__form { - margin-top: 2rem; - padding-top: 2rem; - box-shadow: 0 -.0625rem 0 darken(#f9fafb, 10%); + //margin-top: 2rem; + //padding-top: 2rem; + //box-shadow: 0 -.0625rem 0 darken(#f9fafb, 5%); // select { padding: .5rem; + width: 100%; font-size: 1.125rem; color: $black; border: .0625rem solid $black; diff --git a/assets/css/_components.products-listing.scss b/assets/css/_components.products-listing.scss index af71149..83b4167 100644 --- a/assets/css/_components.products-listing.scss +++ b/assets/css/_components.products-listing.scss @@ -28,10 +28,10 @@ &__list--wrapper { position: relative; z-index: 0; - padding-top: 4rem; - padding-bottom: 4rem; + padding-top: 3rem; + padding-bottom: 3rem; height: auto; - min-height: 44rem; + //min-height: 44rem; background: $white; } // @@ -40,7 +40,7 @@ // These properties are exclusive to browsers that support the `display: grid` and `grid-template-columns` properties. @supports (display: grid) and (grid-template-columns: repeat(2, 1fr)) { display: grid; - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(4, 1fr); grid-template-rows: auto; // 25rem; grid-gap: 0; } @@ -50,8 +50,8 @@ // &__item { position: relative; - height: 50vh; - min-height: 34rem; + height: 27rem; + //min-height: 34rem; text-decoration: none; background: $white; box-shadow: inset .0625rem -.0625rem 0 rgba($black, .1); @@ -67,38 +67,7 @@ background: white; } // - &:nth-child(1) { - // CSS GRID: Target browsers that support the `display: grid` and `grid-template-columns` (maybe only using repeat?) properties. - // These properties are exclusive to browsers that support the `display: grid` and `grid-template-columns` properties. - @supports (display: grid) and (grid-template-columns: repeat(2, 1fr)) { - grid-column: 1; - grid-row: 1; - } - // - //background: $yellow; - box-shadow: inset 0 -.0625rem 0 rgba($black, .1); - } - // - &:nth-child(2) { - // CSS GRID: Target browsers that support the `display: grid` and `grid-template-columns` (maybe only using repeat?) properties. - // These properties are exclusive to browsers that support the `display: grid` and `grid-template-columns` properties. - @supports (display: grid) and (grid-template-columns: repeat(2, 1fr)) { - grid-column: 2; - grid-row: 1; - } - // - //background: $orange; - } - // - &:nth-child(3n) { - // CSS GRID: Target browsers that support the `display: grid` and `grid-template-columns` (maybe only using repeat?) properties. - // These properties are exclusive to browsers that support the `display: grid` and `grid-template-columns` properties. - @supports (display: grid) and (grid-template-columns: repeat(2, 1fr)) { - grid-column: 3; - grid-row: 1; - } - // - //background: $red; + &:nth-child(4n) { &:after { display: none; } @@ -109,8 +78,8 @@ margin: 0; overflow: hidden; width: 100%; - height: 40vh; - min-height: 26rem; + height: 20rem; + //min-height: 26rem; // img { position: absolute; @@ -127,10 +96,10 @@ justify-content: center; align-items: center; width: 100%; - height: 10vh; - min-height: 8rem; + height: 7rem; + //min-height: 8rem; text-align: center; - background: #f9fafb; + background: $white; // #f9fafb; } // &--headers { @@ -156,17 +125,17 @@ // &--name { margin: 0; - font-family: $thick-text; - font-size: 1.375rem; - font-weight: 700; - //text-transform: uppercase; - color: lighten($black, 5%); + font-family: $brand-text; + font-size: 1rem; + font-weight: 900; + text-transform: uppercase; + color: $black; } // &--price { margin: .25rem 0 0 0; font-family: $thick-text; - font-size: 1rem; + font-size: .875rem; font-weight: 700; color: lighten($black, 20%); // @@ -192,12 +161,24 @@ top: 0; right: -20vw; left: -20vw; - height: 50vh; - min-height: 32rem; + height: 27rem; background: $black; background-image: url(../images/polygon-background.svg), linear-gradient(30deg, $yellow 0%, $orange 33%, $red 66%, $purple 100%); background-size: cover; } + // + &:after { + content: ""; + position: absolute; + z-index: -2; + top: 0; + right: -20vw; + bottom: 0; + left: -20vw; + //height: 50vh; + //min-height: 32rem; + background: #f9fafb; + } } } // @@ -216,8 +197,8 @@ // position: relative; //margin-bottom: 2rem; - padding-top: 4rem; - padding-bottom: 4rem; + padding-top: 3rem; + padding-bottom: 3rem; //background: $fafafa; // &:before { @@ -285,7 +266,7 @@ // These properties are exclusive to browsers that support the `display: grid` and `grid-template-columns` properties. @supports (display: grid) and (grid-template-columns: repeat(2, 1fr)) { display: grid; - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(4, 1fr); grid-template-rows: auto; // 25rem; grid-gap: 0; } diff --git a/assets/css/_components.similar-products.scss b/assets/css/_components.similar-products.scss index 99caa8a..2efecfb 100644 --- a/assets/css/_components.similar-products.scss +++ b/assets/css/_components.similar-products.scss @@ -5,7 +5,7 @@ .similar__product { &s--wrapper { position: relative; - padding: 4rem 0; + padding: 3rem 0; width: 80vw; max-width: 100rem; // @@ -26,23 +26,31 @@ .product-list-item { overflow: hidden; width: 12rem; + text-decoration: none; border-radius: .25rem; + box-shadow: 0 0 0 .125rem $white; // figure { margin: 0 0 -.25rem 0; } // img { - width: 100%; + width: 105%; } } // + .product-list-item-container { + overflow: hidden; + height: 12rem; + } + // .product-list-item-info { padding: 1rem; background: $white; } // .product-list-item-info-headers { + height: 3.5rem; color: $black; } // @@ -52,8 +60,10 @@ } // .product-list-item-name { - font-family: $thick-text; + font-family: $brand-text; font-size: 1rem; + font-weight: 900; + text-transform: uppercase; color: $black; } // @@ -65,14 +75,23 @@ // &s--title { margin: 0 0 1em 0; - font-family: $thick-text; - font-size: 2.25rem; + font-family: $brand-text; + font-size: 2rem; + font-weight: 900; line-height: 1em; - letter-spacing: .0625rem; + text-transform: uppercase; color: $white; } // &--list { - display: flex; + // CSS GRID: Target browsers that support the `display: grid` and `grid-template-columns` (maybe only using repeat?) properties. + // These properties are exclusive to browsers that support the `display: grid` and `grid-template-columns` properties. + @supports (display: grid) and (grid-template-columns: repeat(2, 1fr)) { + display: grid; + grid-template-columns: 12rem 12rem 12rem 12rem auto; + grid-template-rows: auto; // 25rem; + grid-gap: 1rem; + } + // } } \ No newline at end of file diff --git a/assets/css/styles.css b/assets/css/styles.css index 60fba7a..5ee8210 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -419,15 +419,14 @@ body { align-items: center; margin-top: 0; margin-bottom: 0; - padding-top: 4rem; - padding-bottom: 4rem; } + padding-top: 3rem; + padding-bottom: 3rem; } @supports (display: grid) and (grid-template-columns: repeat(2, 1fr)) { .header__title { grid-column: 2; grid-row: 1; } } .header__link { - width: 9.375rem; - height: 9.375rem; } + width: 20rem; } .main { padding: 0; @@ -469,7 +468,7 @@ button { transition: background .2s ease; display: inline-block; padding: .5rem 1rem; - font-family: "Titillium Web", sans-serif; + font-family: "Raleway", sans-serif; font-size: 1rem; line-height: 1em; color: white; @@ -481,8 +480,7 @@ button { .button.large { padding: 1.25rem 2rem; font-size: 1.5rem; - font-weight: 900; - letter-spacing: .0625rem; } + font-weight: 900; } .button.negative { background: #ff2727; } .button.negative:hover { @@ -529,23 +527,21 @@ button { .products__list--wrapper { position: relative; z-index: 0; - padding-top: 4rem; - padding-bottom: 4rem; + padding-top: 3rem; + padding-bottom: 3rem; height: auto; - min-height: 44rem; background: #fff; } @supports (display: grid) and (grid-template-columns: repeat(2, 1fr)) { .feature__list, .products__list { display: grid; - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(4, 1fr); grid-template-rows: auto; grid-gap: 0; } } .feature__item, .products__item { position: relative; - height: 50vh; - min-height: 34rem; + height: 27rem; text-decoration: none; background: #fff; box-shadow: inset 0.0625rem -0.0625rem 0 rgba(48, 48, 48, 0.1); } @@ -559,26 +555,8 @@ button { width: .0625rem; height: 100%; background: white; } - .feature__item:nth-child(1), - .products__item:nth-child(1) { - box-shadow: inset 0 -0.0625rem 0 rgba(48, 48, 48, 0.1); } - @supports (display: grid) and (grid-template-columns: repeat(2, 1fr)) { - .feature__item:nth-child(1), - .products__item:nth-child(1) { - grid-column: 1; - grid-row: 1; } } - @supports (display: grid) and (grid-template-columns: repeat(2, 1fr)) { - .feature__item:nth-child(2), - .products__item:nth-child(2) { - grid-column: 2; - grid-row: 1; } } - @supports (display: grid) and (grid-template-columns: repeat(2, 1fr)) { - .feature__item:nth-child(3n), - .products__item:nth-child(3n) { - grid-column: 3; - grid-row: 1; } } - .feature__item:nth-child(3n):after, - .products__item:nth-child(3n):after { + .feature__item:nth-child(4n):after, + .products__item:nth-child(4n):after { display: none; } .feature__item--image, .products__item--image { @@ -586,8 +564,7 @@ button { margin: 0; overflow: hidden; width: 100%; - height: 40vh; - min-height: 26rem; } + height: 20rem; } .feature__item--image img, .products__item--image img { position: absolute; @@ -602,10 +579,9 @@ button { justify-content: center; align-items: center; width: 100%; - height: 10vh; - min-height: 8rem; + height: 7rem; text-align: center; - background: #f9fafb; } + background: #fff; } .feature__item--headers, .products__item--headers { z-index: 1; @@ -627,15 +603,16 @@ button { .feature__item--name, .products__item--name { margin: 0; - font-family: "Titillium Web", sans-serif; - font-size: 1.375rem; - font-weight: 700; - color: #3d3d3d; } + font-family: "Raleway", sans-serif; + font-size: 1rem; + font-weight: 900; + text-transform: uppercase; + color: #303030; } .feature__item--price, .products__item--price { margin: .25rem 0 0 0; font-family: "Titillium Web", sans-serif; - font-size: 1rem; + font-size: .875rem; font-weight: 700; color: #636363; } .feature__item--price .currency_sign, @@ -650,16 +627,25 @@ button { top: 0; right: -20vw; left: -20vw; - height: 50vh; - min-height: 32rem; + height: 27rem; background: #303030; background-image: url(../images/polygon-background.svg), linear-gradient(30deg, #dbfc35 0%, #ffa357 33%, #ff5a5a 66%, #ff57e7 100%); background-size: cover; } +.feature__list--wrapper:after { + content: ""; + position: absolute; + z-index: -2; + top: 0; + right: -20vw; + bottom: 0; + left: -20vw; + background: #f9fafb; } + .products__page { position: relative; - padding-top: 4rem; - padding-bottom: 4rem; } + padding-top: 3rem; + padding-bottom: 3rem; } @supports (display: grid) and (grid-template-columns: repeat(2, 1fr)) { .products__page { grid-column: 1 / span 3; @@ -711,7 +697,7 @@ button { @supports (display: grid) and (grid-template-columns: repeat(2, 1fr)) { .products__list { display: grid; - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(4, 1fr); grid-template-rows: auto; grid-gap: 0; } } @@ -771,8 +757,8 @@ button { margin-left: .5rem; padding: .5rem 0; font-family: "Raleway", sans-serif; - font-size: 1.125rem; - font-weight: 500; + font-size: 1rem; + font-weight: 900; text-transform: uppercase; text-decoration: none; color: #303030; @@ -806,8 +792,8 @@ button { color: #303030; } .callouts { - margin-top: 2rem; - margin-bottom: 4rem; } + position: relative; + padding-bottom: 4rem; } @supports (display: grid) and (grid-template-columns: repeat(2, 1fr)) { .callouts { grid-column: 1 / span 3; @@ -818,12 +804,21 @@ button { grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; grid-gap: 0; } } + .callouts:before { + content: ""; + position: absolute; + z-index: -1; + top: 0; + right: -20vw; + bottom: 0; + left: -20vw; + background: #f9fafb; } .callout__about, .callout__social { display: flex; justify-content: space-between; align-items: center; - height: 16rem; } + height: 12rem; } .callout__about { position: relative; @@ -858,22 +853,11 @@ button { color: #fff; line-height: 2rem; text-shadow: 0 0 1rem rgba(0, 0, 0, 0.3); } - .callout__about--link { + .callout__about .button { position: relative; z-index: 1; margin-right: 4rem; - padding: 1rem 1.5rem; - height: 4rem; - font-family: "Raleway", sans-serif; - font-size: 1.25rem; - line-height: 2rem; - text-align: right; - text-transform: uppercase; - text-decoration: none; - color: white; - background: #007af3; - border-radius: 2rem; - box-shadow: 0 0 0 0.0625rem #a7d3ff; } + background: #2794ff; } .callout__social { justify-content: center; @@ -1029,8 +1013,8 @@ button { }*/ } .product__page { position: relative; - padding-top: 4rem; - padding-bottom: 4rem; } + padding-top: 0; + padding-bottom: 3rem; } @supports (display: grid) and (grid-template-columns: repeat(2, 1fr)) { .product__page { display: grid; @@ -1052,14 +1036,51 @@ button { width: calc(100% + 40vw); background: #f9fafb; border-top: 0.0625rem solid #e1e6eb; } + .product__page--headings { + position: relative; + margin-bottom: 3rem; + padding-top: 2rem; + padding-bottom: 2rem; } + @supports (display: grid) and (grid-template-columns: repeat(2, 1fr)) { + .product__page--headings { + grid-column: 1 / span 2; + grid-row: 1; } } + .product__page--headings:before { + content: ""; + position: absolute; + right: -20vw; + bottom: 0; + left: -20vw; + height: .0625rem; + box-shadow: 0 0.0625rem 0 #dae1e7; } + .product-status { + display: inline-block; + margin-bottom: .5rem; + padding: .3125rem .75rem; + font-family: "Raleway", sans-serif; + font-weight: 700; + font-size: 95%; + color: #fff; + background: #ff5a5a; + border-radius: .125rem; } + .product--title { + margin: 0; + font-family: "Raleway", sans-serif; + font-size: 2rem; + font-weight: 900; + line-height: .875em; + text-transform: uppercase; + color: #303030; } @supports (display: grid) and (grid-template-columns: repeat(2, 1fr)) { .product__images { grid-column: 1; - grid-row: 1; } } - @supports (display: grid) and (grid-template-columns: repeat(2, 1fr)) { - .product__info { - grid-column: 2; - grid-row: 1; } } + grid-row: 2; } } + .product__info { + padding-left: 2rem; } + @supports (display: grid) and (grid-template-columns: repeat(2, 1fr)) { + .product__info { + grid-column: 2; + grid-row: 2; } } .product__slides { overflow: hidden; margin: 0; @@ -1107,32 +1128,6 @@ button { height: .1875rem; background: #ff5a5a; border-radius: 0 0 1rem 1rem; } - .product__page--headings, .product__details { - padding-left: 2rem; } - @supports (display: grid) and (grid-template-columns: repeat(2, 1fr)) { - .product__page--headings { - grid-column: 2; - grid-row: 1; } } - .product-status { - display: inline-block; - margin-bottom: .5rem; - padding: .3125rem .75rem; - font-family: "Raleway", sans-serif; - font-weight: 700; - font-size: 95%; - color: #fff; - background: #ff5a5a; - border-radius: .125rem; } - .product--title { - margin: 0 0 2rem 0; - padding-bottom: 2rem; - font-family: "Titillium Web", sans-serif; - font-size: 2.75rem; - font-weight: 900; - line-height: .875em; - text-transform: none; - color: #303030; - border-bottom: 0.0625rem solid #bcc7d2; } @supports (display: grid) and (grid-template-columns: repeat(2, 1fr)) { .product__details { grid-column: 2; @@ -1144,6 +1139,8 @@ button { .product--image { width: 100%; } .product--description { + margin-bottom: 3rem; + font-family: "Raleway", sans-serif; font-size: 1.25rem; line-height: 125%; color: #303030; } @@ -1180,19 +1177,19 @@ button { .product__select-label { display: block; margin-bottom: .25rem; - font-size: 85%; } - .product__form { - margin-top: 2rem; - padding-top: 2rem; - box-shadow: 0 -0.0625rem 0 #dae1e7; } - .product__form select { - padding: .5rem; - font-size: 1.125rem; - color: #303030; - border: 0.0625rem solid #303030; - border-radius: .25rem; } - .product__form svg { - display: none; } + font-family: "Raleway", sans-serif; + font-size: 85%; + font-weight: 900; + text-transform: uppercase; } + .product__form select { + padding: .5rem; + width: 100%; + font-size: 1.125rem; + color: #303030; + border: 0.0625rem solid #303030; + border-radius: .25rem; } + .product__form svg { + display: none; } .product__purchase { display: flex; align-items: center; } @@ -1252,7 +1249,7 @@ button { .similar__products--wrapper { position: relative; - padding: 4rem 0; + padding: 3rem 0; width: 80vw; max-width: 100rem; } .similar__products--wrapper:before { @@ -1270,22 +1267,30 @@ button { .similar__products--wrapper .product-list-item { overflow: hidden; width: 12rem; - border-radius: .25rem; } + text-decoration: none; + border-radius: .25rem; + box-shadow: 0 0 0 0.125rem #fff; } .similar__products--wrapper .product-list-item figure { margin: 0 0 -.25rem 0; } .similar__products--wrapper .product-list-item img { - width: 100%; } + width: 105%; } + .similar__products--wrapper .product-list-item-container { + overflow: hidden; + height: 12rem; } .similar__products--wrapper .product-list-item-info { padding: 1rem; background: #fff; } .similar__products--wrapper .product-list-item-info-headers { + height: 3.5rem; color: #303030; } .similar__products--wrapper .product-list-item-status { font-size: .75rem; color: #ff5a5a; } .similar__products--wrapper .product-list-item-name { - font-family: "Titillium Web", sans-serif; + font-family: "Raleway", sans-serif; font-size: 1rem; + font-weight: 900; + text-transform: uppercase; color: #303030; } .similar__products--wrapper .product-list-item-price { display: none; @@ -1293,19 +1298,24 @@ button { .similar__products--title { margin: 0 0 1em 0; - font-family: "Titillium Web", sans-serif; - font-size: 2.25rem; + font-family: "Raleway", sans-serif; + font-size: 2rem; + font-weight: 900; line-height: 1em; - letter-spacing: .0625rem; + text-transform: uppercase; color: #fff; } -.similar__product--list { - display: flex; } +@supports (display: grid) and (grid-template-columns: repeat(2, 1fr)) { + .similar__product--list { + display: grid; + grid-template-columns: 12rem 12rem 12rem 12rem auto; + grid-template-rows: auto; + grid-gap: 1rem; } } .cart__page { position: relative; - padding-top: 4rem; - padding-bottom: 4rem; + padding-top: 3rem; + padding-bottom: 3rem; min-height: 60vh; } @supports (display: grid) and (grid-template-columns: repeat(2, 1fr)) { .cart__page { @@ -1389,8 +1399,8 @@ button { .custom-page { position: relative; - padding-top: 4rem; - padding-bottom: 4rem; } + padding-top: 3rem; + padding-bottom: 3rem; } .custom-page:before { content: ""; position: absolute; @@ -1439,23 +1449,53 @@ button { .footer__navigation--list-item { display: inline-block; list-style: none; } - .footer__navigation--link { + .footer__navigation--link, + .footer__navigation a { transition: box-shadow .3s ease; display: inline-block; margin-right: .5rem; margin-left: .5rem; padding: .5rem 0; font-family: "Raleway", sans-serif; - font-size: 1.125rem; - font-weight: 500; + font-size: 1rem; + font-weight: 900; text-transform: uppercase; text-decoration: none; color: #fff; box-shadow: 0 .125rem 0 transparent; } - .footer__navigation--link:hover { + .footer__navigation--link:hover, + .footer__navigation a:hover { color: #ff5a5a; box-shadow: 0 0.125rem 0 #5aadff; } - .footer__navigation--list-item:first-of-type .footer__navigation--link { + .footer__navigation--list-item:first-of-type .footer__navigation--link, .footer__navigation--list-item:first-of-type + .footer__navigation a { margin-left: 0; } - .footer__navigation--list-item:last-of-type .footer__navigation--link { + .footer__navigation--list-item:last-of-type .footer__navigation--link, .footer__navigation--list-item:last-of-type + .footer__navigation a { margin-right: 0; } + +.footer__credit { + position: relative; + margin: 0 auto; + padding: .25rem 0; + width: 80vw; + background: black; } + @supports (display: grid) and (grid-template-columns: repeat(2, 1fr)) { + .footer__credit { + grid-column: 1 / span 3; + grid-row: 2; } } + .footer__credit:before, .footer__credit:after { + content: ""; + position: absolute; + top: 0; + bottom: 0; + width: 20vw; + background: black; } + .footer__credit:before { + right: 100%; } + .footer__credit:after { + left: 100%; } + +.credit__badge a { + font-size: .75rem; + color: #fff; } diff --git a/assets/css/styles.min.css b/assets/css/styles.min.css index a980424..07127b5 100644 --- a/assets/css/styles.min.css +++ b/assets/css/styles.min.css @@ -1,2 +1,2 @@ /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ -html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block;}audio,canvas,progress,video{display:inline-block;vertical-align:baseline;}audio:not([controls]){display:none;height:0;}[hidden],template{display:none;}a{background-color:transparent;}a:active,a:hover{outline:0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}h1{font-size:2em;margin:.67em 0;}mark{background:#ff0;color:#000;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-.5em;}sub{bottom:-.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:1em 40px;}hr{box-sizing:content-box;height:0;}pre{overflow:auto;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0;}button{overflow:visible;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}input{line-height:normal;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto;}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em;}legend{border:0;padding:0;}textarea{overflow:auto;}optgroup{font-weight:bold;}table{border-collapse:collapse;border-spacing:0;}td,th{padding:0;}html{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}*,*:before,*:after{-webkit-box-sizing:inherit;-moz-box-sizing:inherit;box-sizing:inherit;}body{margin:0;padding:0;color:#303030;background:#fff;}.site__container{overflow:hidden;}.ftr__logo{fill:#fff;}.ftr__logo--f{fill:#ffa357;}.ftr__logo--o,.ftr__logo--heart{fill:#ff5a5a;}.ftr__logo--r{fill:#ff57e7;}.ftr__logo--the{fill:#303030;}.ftr__logo--r1{fill:#5aadff;}.ftr__logo--u{fill:#57eec7;}.ftr__logo--n{fill:#dbfc35;}.header{position:relative;padding:0;background:#fff;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.header{grid-column:1 / span 3;grid-row:1;}}.header:before{content:"";position:absolute;top:0;right:100%;bottom:0;width:50vw;background:#fff;}.header:after{content:"";position:absolute;top:0;left:100%;bottom:0;width:50vw;background:#fff;}.header__title{display:flex;justify-content:center;align-items:center;margin-top:0;margin-bottom:0;padding-top:4rem;padding-bottom:4rem;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.header__title{grid-column:2;grid-row:1;}}.header__link{width:9.375rem;height:9.375rem;}.main{padding:0;background:transparent;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.main{grid-column:1 / span 3;grid-row:2;}}#cart_page .main,#contact_page .main,#maintenance_page .main,#product_page .main,.custom .main{padding-top:0;background:transparent !important;}.project{margin:0 auto;padding:0;width:80vw;max-width:100rem;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.project{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto;grid-gap:0;}}button{margin:0;padding:0;cursor:pointer;background:transparent;border:none;outline:0;}.button{transition:background .2s ease;display:inline-block;padding:.5rem 1rem;font-family:"Titillium Web",sans-serif;font-size:1rem;line-height:1em;color:#fff;text-shadow:0 0 .125rem rgba(0,0,0,.2);text-transform:uppercase;text-decoration:none;border:none;border-radius:10rem;}.button.large{padding:1.25rem 2rem;font-size:1.5rem;font-weight:900;letter-spacing:.0625rem;}.button.negative{background:#ff2727;}.button.negative:hover{background:#f30000;}.button.positive{background:#29e9b8;}.button.positive:hover{background:#14cb9b;}.button.flat{color:#636363;background:transparent;}.button.flat.negative{color:#ff2727;}.button.flat.negative:hover{color:#f30000;}.button.flat.positive{color:#29e9b8;}.button.flat.positive:hover{color:#14cb9b;}.feature__list--wrapper,.products__list--wrapper{position:relative;z-index:0;padding-top:4rem;padding-bottom:4rem;height:auto;min-height:44rem;background:#fff;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.feature__list,.products__list{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto;grid-gap:0;}}.feature__item,.products__item{position:relative;height:50vh;min-height:34rem;text-decoration:none;background:#fff;box-shadow:inset .0625rem -.0625rem 0 rgba(48,48,48,.1);}.feature__item:after,.products__item:after{content:"";position:absolute;top:0;right:0;bottom:0;width:.0625rem;height:100%;background:#fff;}.feature__item:nth-child(1),.products__item:nth-child(1){box-shadow:inset 0 -.0625rem 0 rgba(48,48,48,.1);}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.feature__item:nth-child(1),.products__item:nth-child(1){grid-column:1;grid-row:1;}}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.feature__item:nth-child(2),.products__item:nth-child(2){grid-column:2;grid-row:1;}}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.feature__item:nth-child(3n),.products__item:nth-child(3n){grid-column:3;grid-row:1;}}.feature__item:nth-child(3n):after,.products__item:nth-child(3n):after{display:none;}.feature__item--image,.products__item--image{position:relative;margin:0;overflow:hidden;width:100%;height:40vh;min-height:26rem;}.feature__item--image img,.products__item--image img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:100%;}.feature__item--info,.products__item--info{position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:10vh;min-height:8rem;text-align:center;background:#f9fafb;}.feature__item--headers,.products__item--headers{z-index:1;width:100%;}.feature__item--status,.products__item--status{position:absolute;top:-.75rem;left:50%;transform:translateX(-50%);padding:.3125rem .75rem;font-family:"Raleway",sans-serif;font-weight:700;font-size:95%;line-height:1rem;color:#fff;background:#ff5a5a;border-radius:.125rem;}.feature__item--name,.products__item--name{margin:0;font-family:"Titillium Web",sans-serif;font-size:1.375rem;font-weight:700;color:#3d3d3d;}.feature__item--price,.products__item--price{margin:.25rem 0 0 0;font-family:"Titillium Web",sans-serif;font-size:1rem;font-weight:700;color:#636363;}.feature__item--price .currency_sign,.products__item--price .currency_sign{font-size:1rem;letter-spacing:0;}.feature__list--wrapper:before{content:"";position:absolute;z-index:-1;top:0;right:-20vw;left:-20vw;height:50vh;min-height:32rem;background:#303030;background-image:url(../images/polygon-background.svg),linear-gradient(30deg,#dbfc35 0%,#ffa357 33%,#ff5a5a 66%,#ff57e7 100%);background-size:cover;}.products__page{position:relative;padding-top:4rem;padding-bottom:4rem;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.products__page{grid-column:1 / span 3;grid-row:2;}}.products__page:before{content:"";position:absolute;z-index:-1;top:0;right:-20vw;bottom:0;left:-20vw;width:calc(100% + 40vw);background:#f9fafb;border-top:.0625rem solid #e1e6eb;}.products__category--nav{padding:0 0 2rem 0;}.products__categories--title{display:inline-block;margin-right:.5rem;}.products__categories--list{display:inline-block;margin:0 0 .5rem 0;padding:0;list-style:none;}.products__categories--list li{display:inline-block;margin-right:.25rem;}.products__categories--list li a{display:block;padding:.5rem 1rem;font-family:"Raleway",sans-serif;font-size:1.125rem;font-weight:500;text-transform:uppercase;text-decoration:none;color:#303030;background:#fff;border-radius:10rem;box-shadow:0 0 0 .0625rem #bcc7d2;}.products__categories--list li.selected a{color:#fff;background:#ff5a5a;box-shadow:0 0 0 .0625rem #f30000;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.products__list{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto;grid-gap:0;}}.products__item:after{content:"";position:absolute;top:0;right:0;bottom:0;width:.0625rem;height:100%;background:#f9fafb;}.products__item--info{background:#fff;}.navigation__list,.cart__list{margin:0;padding:0;width:100%;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.navigation{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto;grid-gap:0;}}.navigation__left{display:flex;align-items:center;text-align:left;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.navigation__left{grid-column:1;grid-row:1;}}.navigation__right{display:flex;align-items:center;text-align:right;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.navigation__right{grid-column:3;grid-row:1;}}.navigation__list-item{display:inline-block;list-style:none;}.navigation__link,.navigation__list-item a{transition:box-shadow .3s ease;display:inline-block;margin-right:.5rem;margin-left:.5rem;padding:.5rem 0;font-family:"Raleway",sans-serif;font-size:1.125rem;font-weight:500;text-transform:uppercase;text-decoration:none;color:#303030;box-shadow:0 .125rem 0 transparent;}.navigation__link:hover,.navigation__list-item a:hover{color:#ff5a5a;box-shadow:0 .125rem 0 #5aadff;}.navigation__list-item:first-of-type .navigation__link,.navigation__list-item:first-of-type .navigation__list-item a{margin-left:0;}.navigation__list-item:last-of-type .navigation__link,.navigation__list-item:last-of-type .navigation__list-item a{margin-right:0;}.cart{display:flex;align-items:center;text-align:right;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.cart{grid-column:3;grid-row:1;}}.cart__list-item{display:inline-block;}.cart__link{font-family:"Raleway",sans-serif;font-size:1rem;text-transform:uppercase;text-decoration:none;color:#303030;}.callouts{margin-top:2rem;margin-bottom:4rem;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.callouts{grid-column:1 / span 3;grid-row:3;}}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.callouts{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto;grid-gap:0;}}.callout__about,.callout__social{display:flex;justify-content:space-between;align-items:center;height:16rem;}.callout__about{position:relative;z-index:0;overflow:hidden;background:#5aadff;box-shadow:inset -.0625rem 0 0 #fff;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.callout__about{grid-column:1 / span 2;grid-row:1;}}.callout__about:before{content:"";position:absolute;z-index:1;top:-50%;left:-50%;transform:rotate(13deg);opacity:.5;width:200%;height:200%;background-image:url(../images/ftr-heart-angle.svg);background-size:3%;background-position:-2%;}.callout__about--text{position:relative;z-index:1;margin:0;padding:2rem 4rem;font-size:1.5rem;font-family:"Raleway",sans-serif;color:#fff;line-height:2rem;text-shadow:0 0 1rem rgba(0,0,0,.3);}.callout__about--link{position:relative;z-index:1;margin-right:4rem;padding:1rem 1.5rem;height:4rem;font-family:"Raleway",sans-serif;font-size:1.25rem;line-height:2rem;text-align:right;text-transform:uppercase;text-decoration:none;color:#fff;background:#007af3;border-radius:2rem;box-shadow:0 0 0 .0625rem #a7d3ff;}.callout__social{justify-content:center;background:#57eec7;background-image:linear-gradient(135deg,#85f3d6 0%,#109c78 100%);}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.callout__social{grid-column:3;grid-row:1;}}.callout__social .ig__brand{display:inline-block;width:100%;text-align:center;text-decoration:none;}.callout__social .ig__brand--logo{display:block;margin-bottom:1rem;width:100%;}.callout__social .ig__brand--logo svg{transform:scale(1.5);}.callout__social .ig__brand--logo path{fill:white !important;stroke:white;}.callout__social .ig__brand--text{position:relative;display:block;padding-top:.25rem;font-family:"Raleway",sans-serif;font-size:1.125rem;font-weight:700;color:#fff;}.callout__social .ig__brand--name{position:relative;display:block;margin-bottom:1rem;font-size:2rem;}.callout__social .ig__brand--name:after{content:"";position:absolute;bottom:-.5rem;left:calc(50% - 1rem);width:2rem;height:.1875rem;background:#0b6e54;}.content{font-family:"Frank Ruhl Libre",serif;color:#303030;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.content{grid-column:1 / span 3;grid-row:2;}}.content__header{position:relative;padding:2rem 0;}.content__header:before{content:"";position:absolute;z-index:-1;top:0;right:-20vw;bottom:0;left:-20vw;background:#303030;background-image:url(../images/polygon-background.svg),linear-gradient(30deg,#dbfc35 0%,#ffa357 33%,#ff5a5a 66%,#ff57e7 100%);background-size:cover;}.content__title{margin:0;font-family:"Raleway",sans-serif;font-size:3rem;font-weight:700;color:#fff;}.content__title .sub-title{display:block;margin-top:.5rem;font-size:1rem;}.content h3,.content h4,.content h5{margin:1em 0 .5em 0;font-family:"Raleway",sans-serif;}.content h3{font-size:2.25rem;color:#c00000;}.content h4{font-size:2rem;color:#f30000;}.content p{font-size:1.4125rem;}.content__charity-breakdown{margin:0;padding:0;list-style:none;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.content__charity-breakdown{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto;grid-gap:2rem;}}.charity--example{padding:4rem 2rem;font-family:"Raleway",sans-serif;font-size:1.4125rem;text-align:center;color:#fff;}.charity--example:nth-child(1){background:#ff57e7;background:linear-gradient(30deg,#ff24e0 0%,#bd00a2 100%);}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.charity--example:nth-child(1){grid-column:1;grid-row:1;}}.charity--example:nth-child(2){background:#5aadff;background:linear-gradient(30deg,#2794ff 0%,#0061c0 100%);}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.charity--example:nth-child(2){grid-column:2;grid-row:1;}}.charity--example:nth-child(3){background:#57eec7;background:linear-gradient(30deg,#29e9b8 0%,#109c78 100%);}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.charity--example:nth-child(3){grid-column:3;grid-row:1;}}.charity--example strong{font-size:1.75rem;}.charity--example span{display:block;padding-top:1rem;padding-bottom:1rem;}.product__page{position:relative;padding-top:4rem;padding-bottom:4rem;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.product__page{display:grid;grid-template-columns:60% 40%;grid-template-rows:auto;grid-gap:0;}}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.product__page{grid-column:1 / span 3;grid-row:2;}}.product__page:before{content:"";position:absolute;z-index:-1;top:0;right:-20vw;bottom:0;left:-20vw;width:calc(100% + 40vw);background:#f9fafb;border-top:.0625rem solid #e1e6eb;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.product__images{grid-column:1;grid-row:1;}}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.product__info{grid-column:2;grid-row:1;}}.product__slides{overflow:hidden;margin:0;padding:0;list-style:none;min-height:50vh;max-height:100vh;}.product__slide{display:none;}.product__slide.active{display:block;}.product--image{width:100%;}.product__thumbnails{display:block;margin:2rem 0 0 0;padding:0;list-style:none;text-align:center;}.product__thumbnail{display:inline-block;padding:.125rem;width:5rem;box-shadow:0 0 0 .0625rem #fff;}.product__thumbnail--link{position:relative;display:block;}.product__thumbnail--link:before{content:"";position:absolute;top:-1rem;right:-1.5rem;left:-1.5rem;width:calc(100% + 3rem);height:.0625rem;background:#cbd4dc;}.product__thumbnail--link:hover{box-shadow:0 0 0 .0625rem #bcc7d2;}.product__thumbnail--link.active:after{content:"";position:absolute;top:-.9375rem;left:calc(50% - 1.25rem);width:2.5rem;height:.1875rem;background:#ff5a5a;border-radius:0 0 1rem 1rem;}.product__page--headings,.product__details{padding-left:2rem;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.product__page--headings{grid-column:2;grid-row:1;}}.product-status{display:inline-block;margin-bottom:.5rem;padding:.3125rem .75rem;font-family:"Raleway",sans-serif;font-weight:700;font-size:95%;color:#fff;background:#ff5a5a;border-radius:.125rem;}.product--title{margin:0 0 2rem 0;padding-bottom:2rem;font-family:"Titillium Web",sans-serif;font-size:2.75rem;font-weight:900;line-height:.875em;text-transform:none;color:#303030;border-bottom:.0625rem solid #bcc7d2;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.product__details{grid-column:2;grid-row:2;}}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.product--image-wrapper{grid-column:1;grid-row:1;}}.product--image{width:100%;}.product--description{font-size:1.25rem;line-height:125%;color:#303030;}.product--content{height:6rem;}.product__select{margin-bottom:2rem;}.product--sizing{float:left;width:40%;}.product--quantity{margin-bottom:1rem;width:20%;}.product--select-color,.product--select-size,.product--select-quantity{padding:.25rem .5rem;width:100%;color:#303030;font-size:1rem;border:.125rem solid #303030;}.product .form--label{display:block;margin-bottom:.25rem;padding-right:1rem;padding-left:1rem;font-family:"Raleway",sans-serif;font-size:.75rem;font-weight:700;text-transform:uppercase;color:#303030;}.product__inventory{padding:2rem 0;}.product--info{color:#303030;}.product__select-label{display:block;margin-bottom:.25rem;font-size:85%;}.product__form{margin-top:2rem;padding-top:2rem;box-shadow:0 -.0625rem 0 #dae1e7;}.product__form select{padding:.5rem;font-size:1.125rem;color:#303030;border:.0625rem solid #303030;border-radius:.25rem;}.product__form svg{display:none;}.product__purchase{display:flex;align-items:center;}.product__purchase .button{flex-basis:100%;}.product--price{padding-right:2rem;width:19rem;font-family:"Titillium Web",sans-serif;font-size:3rem;line-height:1.25em;letter-spacing:-.0625rem;color:#4a4a4a;}.currency_sign{display:inline-block;vertical-align:top;font-size:1.5rem;letter-spacing:-.125rem;}.inventory__info{margin:0;padding:0;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.inventory__info{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:auto;grid-gap:.5rem;}}.inventory__header{margin-bottom:1rem;font-size:1.5rem;font-weight:bold;color:#303030;}.inventory__box{position:relative;padding:.5rem 1rem;box-shadow:0 0 0 .0625rem #dae1e7;border-radius:.125rem;}.inventory__name{font-size:1rem;font-weight:bold;color:#303030;}.inventory__quantity{display:inline-block;font-size:1.25rem;color:#303030;}.inventory__label{display:inline-block;font-size:1rem;color:#565656;}.similar__products--wrapper{position:relative;padding:4rem 0;width:80vw;max-width:100rem;}.similar__products--wrapper:before{content:"";position:absolute;z-index:-1;top:0;right:-20vw;left:-20vw;height:100%;min-height:20rem;background:#ff5a5a;background-image:url(../images/polygon-background.svg),linear-gradient(30deg,#dbfc35 0%,#ffa357 33%,#ff5a5a 66%,#ff57e7 100%);background-size:cover;}.similar__products--wrapper .product-list-item{overflow:hidden;width:12rem;border-radius:.25rem;}.similar__products--wrapper .product-list-item figure{margin:0 0 -.25rem 0;}.similar__products--wrapper .product-list-item img{width:100%;}.similar__products--wrapper .product-list-item-info{padding:1rem;background:#fff;}.similar__products--wrapper .product-list-item-info-headers{color:#303030;}.similar__products--wrapper .product-list-item-status{font-size:.75rem;color:#ff5a5a;}.similar__products--wrapper .product-list-item-name{font-family:"Titillium Web",sans-serif;font-size:1rem;color:#303030;}.similar__products--wrapper .product-list-item-price{display:none;visibility:hidden;}.similar__products--title{margin:0 0 1em 0;font-family:"Titillium Web",sans-serif;font-size:2.25rem;line-height:1em;letter-spacing:.0625rem;color:#fff;}.similar__product--list{display:flex;}.cart__page{position:relative;padding-top:4rem;padding-bottom:4rem;min-height:60vh;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.cart__page{display:grid;grid-template-columns:auto;grid-template-rows:auto;grid-gap:0;}}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.cart__page{grid-column:1 / span 3;grid-row:2;}}.cart__page:before{content:"";position:absolute;z-index:-1;top:0;right:-20vw;bottom:0;left:-20vw;width:calc(100% + 40vw);background:#f9fafb;border-top:.0625rem solid #e1e6eb;}.cart--title{margin:0 0 .5em 0;font-family:"Titillium Web",sans-serif;font-size:2.75rem;font-weight:900;line-height:.875em;text-transform:none;color:#303030;}.cart--empty-message{font-size:1.25rem;line-height:125%;color:#303030;}.cart__items{margin:0;padding:0;list-style:none;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.cart__item{display:grid;grid-template-columns:16rem auto;grid-template-rows:auto;grid-gap:0;}}.cart__item--image{width:14rem;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.cart__item--image{grid-column:1;grid-row:1;}}.cart__item--image img{width:100%;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.cart__item--details{grid-column:2;grid-row:1;}}.cart__item--adjustments{padding-top:1rem;padding-bottom:1rem;}.cart__item--quantity-holder{display:inline-block;}.cart__item--remove{display:inline-block;}.cart__footer{padding:2rem;background:#fff;box-shadow:0 0 0 .0625rem #bcc7d2;}.cart__summary{box-shadow:0 .0625rem 0 #f9fafb;}.custom-page{position:relative;padding-top:4rem;padding-bottom:4rem;}.custom-page:before{content:"";position:absolute;z-index:-1;top:0;right:-20vw;bottom:0;left:-20vw;width:calc(100% + 40vw);background:#f9fafb;border-top:.0625rem solid #e1e6eb;}.custom-page-header{margin:0 0 .5em 0;font-family:"Titillium Web",sans-serif;font-size:2.75rem;font-weight:900;line-height:.875em;text-transform:none;color:#303030;}.custom-page-content{font-size:1.25rem;line-height:125%;color:#303030;}.module__footer{background:#303030;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.module__footer{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto;grid-gap:0;}}.footer__content{margin:0 auto;padding:4rem 0;width:80vw;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.footer__content{grid-column:1 / span 3;grid-row:1;}}.footer__navigation{margin:0;padding:0;}.footer__navigation--list-item{display:inline-block;list-style:none;}.footer__navigation--link{transition:box-shadow .3s ease;display:inline-block;margin-right:.5rem;margin-left:.5rem;padding:.5rem 0;font-family:"Raleway",sans-serif;font-size:1.125rem;font-weight:500;text-transform:uppercase;text-decoration:none;color:#fff;box-shadow:0 .125rem 0 transparent;}.footer__navigation--link:hover{color:#ff5a5a;box-shadow:0 .125rem 0 #5aadff;}.footer__navigation--list-item:first-of-type .footer__navigation--link{margin-left:0;}.footer__navigation--list-item:last-of-type .footer__navigation--link{margin-right:0;} \ No newline at end of file +html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block;}audio,canvas,progress,video{display:inline-block;vertical-align:baseline;}audio:not([controls]){display:none;height:0;}[hidden],template{display:none;}a{background-color:transparent;}a:active,a:hover{outline:0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}h1{font-size:2em;margin:.67em 0;}mark{background:#ff0;color:#000;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-.5em;}sub{bottom:-.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:1em 40px;}hr{box-sizing:content-box;height:0;}pre{overflow:auto;}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em;}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0;}button{overflow:visible;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}input{line-height:normal;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto;}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em;}legend{border:0;padding:0;}textarea{overflow:auto;}optgroup{font-weight:bold;}table{border-collapse:collapse;border-spacing:0;}td,th{padding:0;}html{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}*,*:before,*:after{-webkit-box-sizing:inherit;-moz-box-sizing:inherit;box-sizing:inherit;}body{margin:0;padding:0;color:#303030;background:#fff;}.site__container{overflow:hidden;}.ftr__logo{fill:#fff;}.ftr__logo--f{fill:#ffa357;}.ftr__logo--o,.ftr__logo--heart{fill:#ff5a5a;}.ftr__logo--r{fill:#ff57e7;}.ftr__logo--the{fill:#303030;}.ftr__logo--r1{fill:#5aadff;}.ftr__logo--u{fill:#57eec7;}.ftr__logo--n{fill:#dbfc35;}.header{position:relative;padding:0;background:#fff;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.header{grid-column:1 / span 3;grid-row:1;}}.header:before{content:"";position:absolute;top:0;right:100%;bottom:0;width:50vw;background:#fff;}.header:after{content:"";position:absolute;top:0;left:100%;bottom:0;width:50vw;background:#fff;}.header__title{display:flex;justify-content:center;align-items:center;margin-top:0;margin-bottom:0;padding-top:3rem;padding-bottom:3rem;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.header__title{grid-column:2;grid-row:1;}}.header__link{width:20rem;}.main{padding:0;background:transparent;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.main{grid-column:1 / span 3;grid-row:2;}}#cart_page .main,#contact_page .main,#maintenance_page .main,#product_page .main,.custom .main{padding-top:0;background:transparent !important;}.project{margin:0 auto;padding:0;width:80vw;max-width:100rem;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.project{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto;grid-gap:0;}}button{margin:0;padding:0;cursor:pointer;background:transparent;border:none;outline:0;}.button{transition:background .2s ease;display:inline-block;padding:.5rem 1rem;font-family:"Raleway",sans-serif;font-size:1rem;line-height:1em;color:#fff;text-shadow:0 0 .125rem rgba(0,0,0,.2);text-transform:uppercase;text-decoration:none;border:none;border-radius:10rem;}.button.large{padding:1.25rem 2rem;font-size:1.5rem;font-weight:900;}.button.negative{background:#ff2727;}.button.negative:hover{background:#f30000;}.button.positive{background:#29e9b8;}.button.positive:hover{background:#14cb9b;}.button.flat{color:#636363;background:transparent;}.button.flat.negative{color:#ff2727;}.button.flat.negative:hover{color:#f30000;}.button.flat.positive{color:#29e9b8;}.button.flat.positive:hover{color:#14cb9b;}.feature__list--wrapper,.products__list--wrapper{position:relative;z-index:0;padding-top:3rem;padding-bottom:3rem;height:auto;background:#fff;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.feature__list,.products__list{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:auto;grid-gap:0;}}.feature__item,.products__item{position:relative;height:27rem;text-decoration:none;background:#fff;box-shadow:inset .0625rem -.0625rem 0 rgba(48,48,48,.1);}.feature__item:after,.products__item:after{content:"";position:absolute;top:0;right:0;bottom:0;width:.0625rem;height:100%;background:#fff;}.feature__item:nth-child(4n):after,.products__item:nth-child(4n):after{display:none;}.feature__item--image,.products__item--image{position:relative;margin:0;overflow:hidden;width:100%;height:20rem;}.feature__item--image img,.products__item--image img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:100%;}.feature__item--info,.products__item--info{position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:7rem;text-align:center;background:#fff;}.feature__item--headers,.products__item--headers{z-index:1;width:100%;}.feature__item--status,.products__item--status{position:absolute;top:-.75rem;left:50%;transform:translateX(-50%);padding:.3125rem .75rem;font-family:"Raleway",sans-serif;font-weight:700;font-size:95%;line-height:1rem;color:#fff;background:#ff5a5a;border-radius:.125rem;}.feature__item--name,.products__item--name{margin:0;font-family:"Raleway",sans-serif;font-size:1rem;font-weight:900;text-transform:uppercase;color:#303030;}.feature__item--price,.products__item--price{margin:.25rem 0 0 0;font-family:"Titillium Web",sans-serif;font-size:.875rem;font-weight:700;color:#636363;}.feature__item--price .currency_sign,.products__item--price .currency_sign{font-size:1rem;letter-spacing:0;}.feature__list--wrapper:before{content:"";position:absolute;z-index:-1;top:0;right:-20vw;left:-20vw;height:27rem;background:#303030;background-image:url(../images/polygon-background.svg),linear-gradient(30deg,#dbfc35 0%,#ffa357 33%,#ff5a5a 66%,#ff57e7 100%);background-size:cover;}.feature__list--wrapper:after{content:"";position:absolute;z-index:-2;top:0;right:-20vw;bottom:0;left:-20vw;background:#f9fafb;}.products__page{position:relative;padding-top:3rem;padding-bottom:3rem;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.products__page{grid-column:1 / span 3;grid-row:2;}}.products__page:before{content:"";position:absolute;z-index:-1;top:0;right:-20vw;bottom:0;left:-20vw;width:calc(100% + 40vw);background:#f9fafb;border-top:.0625rem solid #e1e6eb;}.products__category--nav{padding:0 0 2rem 0;}.products__categories--title{display:inline-block;margin-right:.5rem;}.products__categories--list{display:inline-block;margin:0 0 .5rem 0;padding:0;list-style:none;}.products__categories--list li{display:inline-block;margin-right:.25rem;}.products__categories--list li a{display:block;padding:.5rem 1rem;font-family:"Raleway",sans-serif;font-size:1.125rem;font-weight:500;text-transform:uppercase;text-decoration:none;color:#303030;background:#fff;border-radius:10rem;box-shadow:0 0 0 .0625rem #bcc7d2;}.products__categories--list li.selected a{color:#fff;background:#ff5a5a;box-shadow:0 0 0 .0625rem #f30000;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.products__list{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:auto;grid-gap:0;}}.products__item:after{content:"";position:absolute;top:0;right:0;bottom:0;width:.0625rem;height:100%;background:#f9fafb;}.products__item--info{background:#fff;}.navigation__list,.cart__list{margin:0;padding:0;width:100%;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.navigation{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto;grid-gap:0;}}.navigation__left{display:flex;align-items:center;text-align:left;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.navigation__left{grid-column:1;grid-row:1;}}.navigation__right{display:flex;align-items:center;text-align:right;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.navigation__right{grid-column:3;grid-row:1;}}.navigation__list-item{display:inline-block;list-style:none;}.navigation__link,.navigation__list-item a{transition:box-shadow .3s ease;display:inline-block;margin-right:.5rem;margin-left:.5rem;padding:.5rem 0;font-family:"Raleway",sans-serif;font-size:1rem;font-weight:900;text-transform:uppercase;text-decoration:none;color:#303030;box-shadow:0 .125rem 0 transparent;}.navigation__link:hover,.navigation__list-item a:hover{color:#ff5a5a;box-shadow:0 .125rem 0 #5aadff;}.navigation__list-item:first-of-type .navigation__link,.navigation__list-item:first-of-type .navigation__list-item a{margin-left:0;}.navigation__list-item:last-of-type .navigation__link,.navigation__list-item:last-of-type .navigation__list-item a{margin-right:0;}.cart{display:flex;align-items:center;text-align:right;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.cart{grid-column:3;grid-row:1;}}.cart__list-item{display:inline-block;}.cart__link{font-family:"Raleway",sans-serif;font-size:1rem;text-transform:uppercase;text-decoration:none;color:#303030;}.callouts{position:relative;padding-bottom:4rem;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.callouts{grid-column:1 / span 3;grid-row:3;}}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.callouts{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto;grid-gap:0;}}.callouts:before{content:"";position:absolute;z-index:-1;top:0;right:-20vw;bottom:0;left:-20vw;background:#f9fafb;}.callout__about,.callout__social{display:flex;justify-content:space-between;align-items:center;height:12rem;}.callout__about{position:relative;z-index:0;overflow:hidden;background:#5aadff;box-shadow:inset -.0625rem 0 0 #fff;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.callout__about{grid-column:1 / span 2;grid-row:1;}}.callout__about:before{content:"";position:absolute;z-index:1;top:-50%;left:-50%;transform:rotate(13deg);opacity:.5;width:200%;height:200%;background-image:url(../images/ftr-heart-angle.svg);background-size:3%;background-position:-2%;}.callout__about--text{position:relative;z-index:1;margin:0;padding:2rem 4rem;font-size:1.5rem;font-family:"Raleway",sans-serif;color:#fff;line-height:2rem;text-shadow:0 0 1rem rgba(0,0,0,.3);}.callout__about .button{position:relative;z-index:1;margin-right:4rem;background:#2794ff;}.callout__social{justify-content:center;background:#57eec7;background-image:linear-gradient(135deg,#85f3d6 0%,#109c78 100%);}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.callout__social{grid-column:3;grid-row:1;}}.callout__social .ig__brand{display:inline-block;width:100%;text-align:center;text-decoration:none;}.callout__social .ig__brand--logo{display:block;margin-bottom:1rem;width:100%;}.callout__social .ig__brand--logo svg{transform:scale(1.5);}.callout__social .ig__brand--logo path{fill:white !important;stroke:white;}.callout__social .ig__brand--text{position:relative;display:block;padding-top:.25rem;font-family:"Raleway",sans-serif;font-size:1.125rem;font-weight:700;color:#fff;}.callout__social .ig__brand--name{position:relative;display:block;margin-bottom:1rem;font-size:2rem;}.callout__social .ig__brand--name:after{content:"";position:absolute;bottom:-.5rem;left:calc(50% - 1rem);width:2rem;height:.1875rem;background:#0b6e54;}.content{font-family:"Frank Ruhl Libre",serif;color:#303030;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.content{grid-column:1 / span 3;grid-row:2;}}.content__header{position:relative;padding:2rem 0;}.content__header:before{content:"";position:absolute;z-index:-1;top:0;right:-20vw;bottom:0;left:-20vw;background:#303030;background-image:url(../images/polygon-background.svg),linear-gradient(30deg,#dbfc35 0%,#ffa357 33%,#ff5a5a 66%,#ff57e7 100%);background-size:cover;}.content__title{margin:0;font-family:"Raleway",sans-serif;font-size:3rem;font-weight:700;color:#fff;}.content__title .sub-title{display:block;margin-top:.5rem;font-size:1rem;}.content h3,.content h4,.content h5{margin:1em 0 .5em 0;font-family:"Raleway",sans-serif;}.content h3{font-size:2.25rem;color:#c00000;}.content h4{font-size:2rem;color:#f30000;}.content p{font-size:1.4125rem;}.content__charity-breakdown{margin:0;padding:0;list-style:none;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.content__charity-breakdown{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto;grid-gap:2rem;}}.charity--example{padding:4rem 2rem;font-family:"Raleway",sans-serif;font-size:1.4125rem;text-align:center;color:#fff;}.charity--example:nth-child(1){background:#ff57e7;background:linear-gradient(30deg,#ff24e0 0%,#bd00a2 100%);}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.charity--example:nth-child(1){grid-column:1;grid-row:1;}}.charity--example:nth-child(2){background:#5aadff;background:linear-gradient(30deg,#2794ff 0%,#0061c0 100%);}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.charity--example:nth-child(2){grid-column:2;grid-row:1;}}.charity--example:nth-child(3){background:#57eec7;background:linear-gradient(30deg,#29e9b8 0%,#109c78 100%);}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.charity--example:nth-child(3){grid-column:3;grid-row:1;}}.charity--example strong{font-size:1.75rem;}.charity--example span{display:block;padding-top:1rem;padding-bottom:1rem;}.product__page{position:relative;padding-top:0;padding-bottom:3rem;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.product__page{display:grid;grid-template-columns:60% 40%;grid-template-rows:auto;grid-gap:0;}}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.product__page{grid-column:1 / span 3;grid-row:2;}}.product__page:before{content:"";position:absolute;z-index:-1;top:0;right:-20vw;bottom:0;left:-20vw;width:calc(100% + 40vw);background:#f9fafb;border-top:.0625rem solid #e1e6eb;}.product__page--headings{position:relative;margin-bottom:3rem;padding-top:2rem;padding-bottom:2rem;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.product__page--headings{grid-column:1 / span 2;grid-row:1;}}.product__page--headings:before{content:"";position:absolute;right:-20vw;bottom:0;left:-20vw;height:.0625rem;box-shadow:0 .0625rem 0 #dae1e7;}.product-status{display:inline-block;margin-bottom:.5rem;padding:.3125rem .75rem;font-family:"Raleway",sans-serif;font-weight:700;font-size:95%;color:#fff;background:#ff5a5a;border-radius:.125rem;}.product--title{margin:0;font-family:"Raleway",sans-serif;font-size:2rem;font-weight:900;line-height:.875em;text-transform:uppercase;color:#303030;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.product__images{grid-column:1;grid-row:2;}}.product__info{padding-left:2rem;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.product__info{grid-column:2;grid-row:2;}}.product__slides{overflow:hidden;margin:0;padding:0;list-style:none;min-height:50vh;max-height:100vh;}.product__slide{display:none;}.product__slide.active{display:block;}.product--image{width:100%;}.product__thumbnails{display:block;margin:2rem 0 0 0;padding:0;list-style:none;text-align:center;}.product__thumbnail{display:inline-block;padding:.125rem;width:5rem;box-shadow:0 0 0 .0625rem #fff;}.product__thumbnail--link{position:relative;display:block;}.product__thumbnail--link:before{content:"";position:absolute;top:-1rem;right:-1.5rem;left:-1.5rem;width:calc(100% + 3rem);height:.0625rem;background:#cbd4dc;}.product__thumbnail--link:hover{box-shadow:0 0 0 .0625rem #bcc7d2;}.product__thumbnail--link.active:after{content:"";position:absolute;top:-.9375rem;left:calc(50% - 1.25rem);width:2.5rem;height:.1875rem;background:#ff5a5a;border-radius:0 0 1rem 1rem;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.product__details{grid-column:2;grid-row:2;}}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.product--image-wrapper{grid-column:1;grid-row:1;}}.product--image{width:100%;}.product--description{margin-bottom:3rem;font-family:"Raleway",sans-serif;font-size:1.25rem;line-height:125%;color:#303030;}.product--content{height:6rem;}.product__select{margin-bottom:2rem;}.product--sizing{float:left;width:40%;}.product--quantity{margin-bottom:1rem;width:20%;}.product--select-color,.product--select-size,.product--select-quantity{padding:.25rem .5rem;width:100%;color:#303030;font-size:1rem;border:.125rem solid #303030;}.product .form--label{display:block;margin-bottom:.25rem;padding-right:1rem;padding-left:1rem;font-family:"Raleway",sans-serif;font-size:.75rem;font-weight:700;text-transform:uppercase;color:#303030;}.product__inventory{padding:2rem 0;}.product--info{color:#303030;}.product__select-label{display:block;margin-bottom:.25rem;font-family:"Raleway",sans-serif;font-size:85%;font-weight:900;text-transform:uppercase;}.product__form select{padding:.5rem;width:100%;font-size:1.125rem;color:#303030;border:.0625rem solid #303030;border-radius:.25rem;}.product__form svg{display:none;}.product__purchase{display:flex;align-items:center;}.product__purchase .button{flex-basis:100%;}.product--price{padding-right:2rem;width:19rem;font-family:"Titillium Web",sans-serif;font-size:3rem;line-height:1.25em;letter-spacing:-.0625rem;color:#4a4a4a;}.currency_sign{display:inline-block;vertical-align:top;font-size:1.5rem;letter-spacing:-.125rem;}.inventory__info{margin:0;padding:0;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.inventory__info{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:auto;grid-gap:.5rem;}}.inventory__header{margin-bottom:1rem;font-size:1.5rem;font-weight:bold;color:#303030;}.inventory__box{position:relative;padding:.5rem 1rem;box-shadow:0 0 0 .0625rem #dae1e7;border-radius:.125rem;}.inventory__name{font-size:1rem;font-weight:bold;color:#303030;}.inventory__quantity{display:inline-block;font-size:1.25rem;color:#303030;}.inventory__label{display:inline-block;font-size:1rem;color:#565656;}.similar__products--wrapper{position:relative;padding:3rem 0;width:80vw;max-width:100rem;}.similar__products--wrapper:before{content:"";position:absolute;z-index:-1;top:0;right:-20vw;left:-20vw;height:100%;min-height:20rem;background:#ff5a5a;background-image:url(../images/polygon-background.svg),linear-gradient(30deg,#dbfc35 0%,#ffa357 33%,#ff5a5a 66%,#ff57e7 100%);background-size:cover;}.similar__products--wrapper .product-list-item{overflow:hidden;width:12rem;text-decoration:none;border-radius:.25rem;box-shadow:0 0 0 .125rem #fff;}.similar__products--wrapper .product-list-item figure{margin:0 0 -.25rem 0;}.similar__products--wrapper .product-list-item img{width:105%;}.similar__products--wrapper .product-list-item-container{overflow:hidden;height:12rem;}.similar__products--wrapper .product-list-item-info{padding:1rem;background:#fff;}.similar__products--wrapper .product-list-item-info-headers{height:3.5rem;color:#303030;}.similar__products--wrapper .product-list-item-status{font-size:.75rem;color:#ff5a5a;}.similar__products--wrapper .product-list-item-name{font-family:"Raleway",sans-serif;font-size:1rem;font-weight:900;text-transform:uppercase;color:#303030;}.similar__products--wrapper .product-list-item-price{display:none;visibility:hidden;}.similar__products--title{margin:0 0 1em 0;font-family:"Raleway",sans-serif;font-size:2rem;font-weight:900;line-height:1em;text-transform:uppercase;color:#fff;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.similar__product--list{display:grid;grid-template-columns:12rem 12rem 12rem 12rem auto;grid-template-rows:auto;grid-gap:1rem;}}.cart__page{position:relative;padding-top:3rem;padding-bottom:3rem;min-height:60vh;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.cart__page{display:grid;grid-template-columns:auto;grid-template-rows:auto;grid-gap:0;}}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.cart__page{grid-column:1 / span 3;grid-row:2;}}.cart__page:before{content:"";position:absolute;z-index:-1;top:0;right:-20vw;bottom:0;left:-20vw;width:calc(100% + 40vw);background:#f9fafb;border-top:.0625rem solid #e1e6eb;}.cart--title{margin:0 0 .5em 0;font-family:"Titillium Web",sans-serif;font-size:2.75rem;font-weight:900;line-height:.875em;text-transform:none;color:#303030;}.cart--empty-message{font-size:1.25rem;line-height:125%;color:#303030;}.cart__items{margin:0;padding:0;list-style:none;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.cart__item{display:grid;grid-template-columns:16rem auto;grid-template-rows:auto;grid-gap:0;}}.cart__item--image{width:14rem;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.cart__item--image{grid-column:1;grid-row:1;}}.cart__item--image img{width:100%;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.cart__item--details{grid-column:2;grid-row:1;}}.cart__item--adjustments{padding-top:1rem;padding-bottom:1rem;}.cart__item--quantity-holder{display:inline-block;}.cart__item--remove{display:inline-block;}.cart__footer{padding:2rem;background:#fff;box-shadow:0 0 0 .0625rem #bcc7d2;}.cart__summary{box-shadow:0 .0625rem 0 #f9fafb;}.custom-page{position:relative;padding-top:3rem;padding-bottom:3rem;}.custom-page:before{content:"";position:absolute;z-index:-1;top:0;right:-20vw;bottom:0;left:-20vw;width:calc(100% + 40vw);background:#f9fafb;border-top:.0625rem solid #e1e6eb;}.custom-page-header{margin:0 0 .5em 0;font-family:"Titillium Web",sans-serif;font-size:2.75rem;font-weight:900;line-height:.875em;text-transform:none;color:#303030;}.custom-page-content{font-size:1.25rem;line-height:125%;color:#303030;}.module__footer{background:#303030;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.module__footer{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto;grid-gap:0;}}.footer__content{margin:0 auto;padding:4rem 0;width:80vw;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.footer__content{grid-column:1 / span 3;grid-row:1;}}.footer__navigation{margin:0;padding:0;}.footer__navigation--list-item{display:inline-block;list-style:none;}.footer__navigation--link,.footer__navigation a{transition:box-shadow .3s ease;display:inline-block;margin-right:.5rem;margin-left:.5rem;padding:.5rem 0;font-family:"Raleway",sans-serif;font-size:1rem;font-weight:900;text-transform:uppercase;text-decoration:none;color:#fff;box-shadow:0 .125rem 0 transparent;}.footer__navigation--link:hover,.footer__navigation a:hover{color:#ff5a5a;box-shadow:0 .125rem 0 #5aadff;}.footer__navigation--list-item:first-of-type .footer__navigation--link,.footer__navigation--list-item:first-of-type .footer__navigation a{margin-left:0;}.footer__navigation--list-item:last-of-type .footer__navigation--link,.footer__navigation--list-item:last-of-type .footer__navigation a{margin-right:0;}.footer__credit{position:relative;margin:0 auto;padding:.25rem 0;width:80vw;background:#000;}@supports (display:grid)and(grid-template-columns:repeat(2,1fr)){.footer__credit{grid-column:1 / span 3;grid-row:2;}}.footer__credit:before,.footer__credit:after{content:"";position:absolute;top:0;bottom:0;width:20vw;background:#000;}.footer__credit:before{right:100%;}.footer__credit:after{left:100%;}.credit__badge a{font-size:.75rem;color:#fff;} \ No newline at end of file