// Abstracted components
$local-font-size: 16px;
@function morph($color, $turbo: false) {
$lightness: lightness($color);
$light-color: false;
$multiplier: 2;
@if $lightness > 10% { $light-color: true; }
@if $turbo { $multiplier: 3; }
@if $light-color {
$lightness: ($lightness / 20) * $multiplier;
$color: darken($color, $lightness);
} @else {
@if $lightness < 2.5% {
$lightness: 30%;
} @else if $lightness < 7.5% {
$lightness: 15%;
}
$lightness: ($lightness / 10) * $multiplier;
$color: lighten($color, $lightness);
}
$saturation: saturation($color);
$saturated-color: false;
@if $saturation > 0% { $saturated-color: true; }
$saturation: ($saturation / 20) * $multiplier;
@if $saturated-color {
@if $light-color {
$color: desaturate($color, $saturation);
} @else {
$color: saturate($color, $saturation);
}
}
@return $color;
}
@function strip-units($value) {
@return ($value / ($value * 0 + 1));
}
// Calculate a rem value, based on a passed value
@function rem($pxval, $base: $local-font-size) {
@return (strip-units($pxval) / strip-units($base)) * 1rem;
}
/*! normalize.css v1.1.0 | MIT License | git.io/normalize */
/*! normalize.css v1.1.0 | HTML5 Display Definitions | MIT License | git.io/normalize */
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; height: 0; }
[hidden] { display: none; }
/*! normalize.css v1.1.0 | Base | MIT License | git.io/normalize */
html { font-size: 100%; font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { font-family: sans-serif; }
body { margin: 0; }
/*! normalize.css v1.1.0 | Links | MIT License | git.io/normalize */
a:focus { outline: thin dotted; }
a:active, a:hover { outline: 0; }
/*! normalize.css v1.1.0 | Typography | MIT License | git.io/normalize */
h1 { font-size: 2em; margin: 0.67em 0; }
h2 { font-size: 1.5em; margin: 0.83em 0; }
h3 { font-size: 1.17em; margin: 1em 0; }
h4 { font-size: 1em; margin: 1.33em 0; }
h5 { font-size: 0.83em; margin: 1.67em 0; }
h6 { font-size: 0.67em; margin: 2.33em 0; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { box-sizing: content-box; height: 0; }
mark { background: #ff0; color: #000; }
p, pre { margin: 1em 0; }
code, kbd, pre, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: "\201C" "\201D" "\2018" "\2019"; }
q { quotes: none; }
q:before, q:after { content: ''; content: none; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
dl, menu, ol, ul { margin: 1em 0; }
dd { margin: 0 0 0 40px; }
menu, ol, ul { padding: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; }
/*! normalize.css v1.1.0 | Embedded Content | MIT License | git.io/normalize */
img { border: 0; -ms-interpolation-mode: bicubic; }
svg:not(:root) { overflow: hidden; }
/*! normalize.css v1.1.0 | Figures | MIT License | git.io/normalize */
figure { margin: 0; }
/*! normalize.css v1.1.0 | Forms | MIT License | git.io/normalize */
form { margin: 0; }
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
legend { border: 0; padding: 0; white-space: normal; *margin-left: -7px; }
button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; }
button, select { text-transform: none; }
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; *overflow: visible; }
button[disabled], html input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *height: 13px; *width: 13px; }
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; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; }
/*! normalize.css v1.1.0 | Tables | MIT License | git.io/normalize */
table { border-collapse: collapse; border-spacing: 0; }
//************************************************************************//
// Prefixer
//************************************************************************//
// Variable settings for /addons/prefixer.scss
$prefix-for-webkit: true;
$prefix-for-mozilla: true;
$prefix-for-microsoft: true;
$prefix-for-opera: true;
$prefix-for-spec: true; // required for keyframe mixin
@mixin prefixer($property, $value, $prefixes) {
@each $prefix in $prefixes {
@if $prefix == webkit {
@if $prefix-for-webkit {
-webkit-#{$property}: $value;
}
} @else if $prefix == moz {
@if $prefix-for-mozilla {
-moz-#{$property}: $value;
}
} @else if $prefix == ms {
@if $prefix-for-microsoft {
-ms-#{$property}: $value;
}
} @else if $prefix == o {
@if $prefix-for-opera {
-o-#{$property}: $value;
}
} @else if $prefix == spec {
@if $prefix-for-spec {
#{$property}: $value;
}
} @else {
@warn "Unrecognized prefix: #{$prefix}";
}
}
}
//************************************************************************//
// Transitions
//************************************************************************//
// Shorthand mixin. Supports multiple parentheses-deliminated values for each variable.
// Example: @include transition (all 2s ease-in-out);
// @include transition (opacity 1s ease-in 2s, width 2s ease-out);
// @include transition-property (transform, opacity);
@mixin transition($properties...) {
// Fix for vendor-prefix transform property
$needs-prefixes: false;
$webkit: ();
$moz: ();
$spec: ();
// Create lists for vendor-prefixed transform
@each $list in $properties {
@if nth($list, 1) == "transform" {
$needs-prefixes: true;
$list1: -webkit-transform;
$list2: -moz-transform;
$list3: ();
@each $var in $list {
$list3: join($list3, $var);
@if $var != "transform" {
$list1: join($list1, $var);
$list2: join($list2, $var);
}
}
$webkit: append($webkit, $list1);
$moz: append($moz, $list2);
$spec: append($spec, $list3);
} @else {
// Create lists for non-prefixed transition properties
$webkit: append($webkit, $list, comma);
$moz: append($moz, $list, comma);
$spec: append($spec, $list, comma);
}
}
@if $needs-prefixes {
//scss-lint:disable VendorPrefix
transition: $spec;
} @else {
@if length($properties) >= 1 {
@include prefixer(transition, $properties, ms o spec);
} @else {
$properties: all 0.15s ease-out 0s;
@include prefixer(transition, $properties, ms o spec);
}
}
}
@mixin transition-duration($times...) {
@include prefixer(transition-duration, $times, ms spec);
}
@mixin transition-timing-function($motions...) {
// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
@include prefixer(transition-timing-function, $motions, ms o spec);
}
@mixin transition-delay($times...) {
@include prefixer(transition-delay, $times, ms o spec);
}
//************************************************************************//
// Transform
//************************************************************************//
@mixin transform($property: none) {
// none |
@include prefixer(transform, $property, webkit ms o spec);
}
@mixin transform-origin($axes: 50%) {
// x-axis - left | center | right | length | %
// y-axis - top | center | bottom | length | %
// z-axis - length
@include prefixer(transform-origin, $axes, webkit ms spec);
}
@mixin transform-style($style: flat) {
@include prefixer(transform-style, $style, webkit ms o spec);
}
@mixin animation($animate...) {
$max: length($animate);
$animations: "";
@for $i from 1 through $max {
$animations: #{$animations + nth($animate, $i)};
@if $i < $max {
$animations: #{$animations + ", "};
}
}
@include prefixer(animation, $animations, webkit ms o spec);
}
@mixin keyframes($animation-name) {
//scss-lint:disable VendorPrefix
@keyframes #{$animation-name} { @content; }
}
//scss-lint:disable VendorPrefix
@mixin breakpoint($point) {
@if $point == xl {
@media (min-width: 1281px) { @content; }
}
@if $point == l {
@media (max-width: 1280px) { @content; }
}
@if $point == m {
@media (max-width: 1020px) { @content; }
}
@if $point == s {
@media (max-width: 719px) { @content; }
}
@if $point == s-up {
@media (min-width: 720px) { @content; }
}
}
@mixin flexbox() {
display: flex;
}
@mixin flex($values) {
flex: $values;
}
@mixin order($val) {
order: $val;
}
//TODO: Rename this to kebab-case (many file refactor)
//TODO: Drop this, use svgs
@mixin iconFont($font-size: 16px, $line-height: 1) {
font-family: "Single Product Webicons Regular";
font-size: $font-size;
font-weight: 400;
line-height: $line-height;
-webkit-font-smoothing: antialiased;
}
@mixin placeholder {
//scss-lint:disable VendorPrefix
&::-webkit-input-placeholder { @content; }
&::-moz-input-placeholder { @content; }
&:-ms-input-placeholder { @content; }
}
@mixin lt-ie9 {
.lt-ie9 & {
@content;
}
}
@mixin lt-ie10 {
.lt-ie10 & {
@content;
}
}
@mixin all-elems {
p, ul, ol, dl, blockquote, table, pre, form, div, h1, h2, h3, h4, h5, h6 {
@content;
}
}
@mixin video-button($color, $color-bg, $color-bg-hover) {
.video-loading-icon {
display: none;
}
.video-play-button::after {
content: "";
@extend %loader;
right: 10px;
border-color: rgba($color, 0.15);
border-top-color: rgba($color, 0.8);
opacity: 0;
transition: opacity 200ms ease-in-out;
}
.video-loading & .video-play-button::after {
opacity: 1;
}
.video-play-icon {
color: $color;
background: $color-bg;
}
.video-play-button {
background: $color-bg;
&:hover,
&:hover .video-play-icon {
color: $color;
background: $color-bg-hover;
}
}
}
//
//
//
//
@font-face {
font-family: Montserrat;
font-weight: 400;
font-style: normal;
src: url("//jovialpet.com/cdn/fonts/montserrat/montserrat_n4.1d581f6d4bf1a97f4cbc0b88b933bc136d38d178.woff2?h1=am92aWFscGV0LmNvbQ&h2=am92aWJvd2wuY29t&h3=am92aWFsLXBldC1wcm9kdWN0cy1sbGMuYWNjb3VudC5teXNob3BpZnkuY29t&hmac=e82e33199cb2205c1b234b6ab9f5cd89608f8479fa54e1ca3e8ed905f345022f") format("woff2"),
url("//jovialpet.com/cdn/fonts/montserrat/montserrat_n4.cfce41a967758ce5a9b7d48daeb5b028fd977a9b.woff?h1=am92aWFscGV0LmNvbQ&h2=am92aWJvd2wuY29t&h3=am92aWFsLXBldC1wcm9kdWN0cy1sbGMuYWNjb3VudC5teXNob3BpZnkuY29t&hmac=64e880efcf8e7f4eed0e2e6f4eb9fb0e30ab1a03ec16383de15ddcff2e891e48") format("woff");
}
@font-face {
font-family: Montserrat;
font-weight: 400;
font-style: italic;
src: url("//jovialpet.com/cdn/fonts/montserrat/montserrat_i4.ae02483b3d5e8777d0d4a4ccf396482c364d8955.woff2?h1=am92aWFscGV0LmNvbQ&h2=am92aWJvd2wuY29t&h3=am92aWFsLXBldC1wcm9kdWN0cy1sbGMuYWNjb3VudC5teXNob3BpZnkuY29t&hmac=fbb225c61353af1ee7f4c1024736ae75131ab58d4b48c73d3e80fec545af78e6") format("woff2"),
url("//jovialpet.com/cdn/fonts/montserrat/montserrat_i4.ba28d1a04ec09448de486d83c63235903dfc0af8.woff?h1=am92aWFscGV0LmNvbQ&h2=am92aWJvd2wuY29t&h3=am92aWFsLXBldC1wcm9kdWN0cy1sbGMuYWNjb3VudC5teXNob3BpZnkuY29t&hmac=e4e45cbdca27ee9b9b5cf667d093a505123cfdc7253d9811ac1d1642214b6530") format("woff");
}
@font-face {
font-family: Montserrat;
font-weight: 700;
font-style: normal;
src: url("//jovialpet.com/cdn/fonts/montserrat/montserrat_n7.c496e9cf2031deec4c4bca338faa81971c8631d4.woff2?h1=am92aWFscGV0LmNvbQ&h2=am92aWJvd2wuY29t&h3=am92aWFsLXBldC1wcm9kdWN0cy1sbGMuYWNjb3VudC5teXNob3BpZnkuY29t&hmac=ad8687e4be9453c61c5d4267e1dabe8e138631aa3d6b6773e1b4aa8bc0fce438") format("woff2"),
url("//jovialpet.com/cdn/fonts/montserrat/montserrat_n7.78b0223375c94b39ce1af7e09a0225f2bb3d05f7.woff?h1=am92aWFscGV0LmNvbQ&h2=am92aWJvd2wuY29t&h3=am92aWFsLXBldC1wcm9kdWN0cy1sbGMuYWNjb3VudC5teXNob3BpZnkuY29t&hmac=b1943d58d92ab517a7656849f27a4130688abf69692207d38889fa56233df961") format("woff");
}
@font-face {
font-family: Montserrat;
font-weight: 700;
font-style: italic;
src: url("//jovialpet.com/cdn/fonts/montserrat/montserrat_i7.83866c3eec90071fa974c17980ffb42977f9e667.woff2?h1=am92aWFscGV0LmNvbQ&h2=am92aWJvd2wuY29t&h3=am92aWFsLXBldC1wcm9kdWN0cy1sbGMuYWNjb3VudC5teXNob3BpZnkuY29t&hmac=5d1df03ca3139ecda4e70aeb584d28cfba5e738ed164272bfc7dfd1dbe622775") format("woff2"),
url("//jovialpet.com/cdn/fonts/montserrat/montserrat_i7.25524241b12d864609c85325613d60efcf1a87e3.woff?h1=am92aWFscGV0LmNvbQ&h2=am92aWJvd2wuY29t&h3=am92aWFsLXBldC1wcm9kdWN0cy1sbGMuYWNjb3VudC5teXNob3BpZnkuY29t&hmac=c3b057e6aaedddf168333121c18e52e2f2454a208a38150c15d41bbb10a20dc6") format("woff");
}
$font-body: font_body;
$font-body-family: Montserrat, sans-serif;
$font-body-styles: ((normal, italic), (normal, italic));
$font-body-named-styles: ((initial, italic), (initial, italic));
$font-body-weights: (400, 700);
$font-body-named-weights: (initial, bolder);
@font-face {
font-family: Montserrat;
font-weight: 700;
font-style: normal;
src: url("//jovialpet.com/cdn/fonts/montserrat/montserrat_n7.c496e9cf2031deec4c4bca338faa81971c8631d4.woff2?h1=am92aWFscGV0LmNvbQ&h2=am92aWJvd2wuY29t&h3=am92aWFsLXBldC1wcm9kdWN0cy1sbGMuYWNjb3VudC5teXNob3BpZnkuY29t&hmac=ad8687e4be9453c61c5d4267e1dabe8e138631aa3d6b6773e1b4aa8bc0fce438") format("woff2"),
url("//jovialpet.com/cdn/fonts/montserrat/montserrat_n7.78b0223375c94b39ce1af7e09a0225f2bb3d05f7.woff?h1=am92aWFscGV0LmNvbQ&h2=am92aWJvd2wuY29t&h3=am92aWFsLXBldC1wcm9kdWN0cy1sbGMuYWNjb3VudC5teXNob3BpZnkuY29t&hmac=b1943d58d92ab517a7656849f27a4130688abf69692207d38889fa56233df961") format("woff");
}
@font-face {
font-family: Montserrat;
font-weight: 700;
font-style: italic;
src: url("//jovialpet.com/cdn/fonts/montserrat/montserrat_i7.83866c3eec90071fa974c17980ffb42977f9e667.woff2?h1=am92aWFscGV0LmNvbQ&h2=am92aWJvd2wuY29t&h3=am92aWFsLXBldC1wcm9kdWN0cy1sbGMuYWNjb3VudC5teXNob3BpZnkuY29t&hmac=5d1df03ca3139ecda4e70aeb584d28cfba5e738ed164272bfc7dfd1dbe622775") format("woff2"),
url("//jovialpet.com/cdn/fonts/montserrat/montserrat_i7.25524241b12d864609c85325613d60efcf1a87e3.woff?h1=am92aWFscGV0LmNvbQ&h2=am92aWJvd2wuY29t&h3=am92aWFsLXBldC1wcm9kdWN0cy1sbGMuYWNjb3VudC5teXNob3BpZnkuY29t&hmac=c3b057e6aaedddf168333121c18e52e2f2454a208a38150c15d41bbb10a20dc6") format("woff");
}
@font-face {
font-family: Montserrat;
font-weight: 900;
font-style: normal;
src: url("//jovialpet.com/cdn/fonts/montserrat/montserrat_n9.ddaed62de62f3d3d87e64f4d0463dca05fc9c8e4.woff2?h1=am92aWFscGV0LmNvbQ&h2=am92aWJvd2wuY29t&h3=am92aWFsLXBldC1wcm9kdWN0cy1sbGMuYWNjb3VudC5teXNob3BpZnkuY29t&hmac=a5c829342d2e21688aaf4f3ba6bf0250ff30c50ec0dc40f41b5a1de66437ad6a") format("woff2"),
url("//jovialpet.com/cdn/fonts/montserrat/montserrat_n9.85cc5f32e331fc9b3a109639b08869c64782e161.woff?h1=am92aWFscGV0LmNvbQ&h2=am92aWJvd2wuY29t&h3=am92aWFsLXBldC1wcm9kdWN0cy1sbGMuYWNjb3VudC5teXNob3BpZnkuY29t&hmac=01f57786ffa1dd4c74c45dfcfa57eadb0c9a23536ca9fa81d496927749b0207a") format("woff");
}
@font-face {
font-family: Montserrat;
font-weight: 900;
font-style: italic;
src: url("//jovialpet.com/cdn/fonts/montserrat/montserrat_i9.7523f2a03fdaaa8b60d141507f9ba8d5c839661a.woff2?h1=am92aWFscGV0LmNvbQ&h2=am92aWJvd2wuY29t&h3=am92aWFsLXBldC1wcm9kdWN0cy1sbGMuYWNjb3VudC5teXNob3BpZnkuY29t&hmac=d1fbd45683be49159b5061a3f6c31e21fb9f3acddee5fa7514e63d4a8b0a3bf9") format("woff2"),
url("//jovialpet.com/cdn/fonts/montserrat/montserrat_i9.fb9fe3dd44a3fefe44594bbed91d1246d54a459f.woff?h1=am92aWFscGV0LmNvbQ&h2=am92aWJvd2wuY29t&h3=am92aWFsLXBldC1wcm9kdWN0cy1sbGMuYWNjb3VudC5teXNob3BpZnkuY29t&hmac=d7c61a77e9c1461f2ead171ee143122bd043a42bd05146fc38560e8b9f536fa5") format("woff");
}
$font-heading: font_heading;
$font-heading-family: Montserrat, sans-serif;
$font-heading-styles: ((normal, italic), (normal, italic));
$font-heading-named-styles: ((initial, italic), (initial, italic));
$font-heading-weights: (700, 900);
$font-heading-named-weights: (initial, bolder);
@font-face {
font-family: Montserrat;
font-weight: 500;
font-style: normal;
src: url("//jovialpet.com/cdn/fonts/montserrat/montserrat_n5.e72d00d31ae5399d260a80ec70322c62c1819762.woff2?h1=am92aWFscGV0LmNvbQ&h2=am92aWJvd2wuY29t&h3=am92aWFsLXBldC1wcm9kdWN0cy1sbGMuYWNjb3VudC5teXNob3BpZnkuY29t&hmac=14198f8b80fa4317406d46c171f713acd6fa7643854228ddfe0d04117b458e92") format("woff2"),
url("//jovialpet.com/cdn/fonts/montserrat/montserrat_n5.18a018b6c83e89030c5d70a6d4c02c969f228500.woff?h1=am92aWFscGV0LmNvbQ&h2=am92aWJvd2wuY29t&h3=am92aWFsLXBldC1wcm9kdWN0cy1sbGMuYWNjb3VudC5teXNob3BpZnkuY29t&hmac=45e9fb2fb98cdb36cfdf9be920e626960afa3c731dc9873f494ad75d61ee202a") format("woff");
}
@font-face {
font-family: Montserrat;
font-weight: 500;
font-style: italic;
src: url("//jovialpet.com/cdn/fonts/montserrat/montserrat_i5.3a4750a300f30824a43384268712b76e0a04be8c.woff2?h1=am92aWFscGV0LmNvbQ&h2=am92aWJvd2wuY29t&h3=am92aWFsLXBldC1wcm9kdWN0cy1sbGMuYWNjb3VudC5teXNob3BpZnkuY29t&hmac=21f59c586400e30625b38975fee6de2ab87958372d1ad9b4f61df0bb6634561c") format("woff2"),
url("//jovialpet.com/cdn/fonts/montserrat/montserrat_i5.3c586d8884de1ac5627138711567f5b454adbef8.woff?h1=am92aWFscGV0LmNvbQ&h2=am92aWJvd2wuY29t&h3=am92aWFsLXBldC1wcm9kdWN0cy1sbGMuYWNjb3VudC5teXNob3BpZnkuY29t&hmac=71c2461d5b52ec2a624d9fd2f70079b2c581a8146d60fc4d514da4db1b910138") format("woff");
}
$font-button: font_button;
$font-button-family: Montserrat, sans-serif;
$font-button-styles: ((normal, italic), ());
$font-button-named-styles: ((initial, italic), ());
$font-button-weights: (500);
$font-button-named-weights: (initial);
@font-face {
font-family: Futura;
font-weight: 500;
font-style: normal;
src: url("//jovialpet.com/cdn/fonts/futura/futura_n5.5632c6d8a6da9141ef40e51d14264a007bcae7e5.woff2?h1=am92aWFscGV0LmNvbQ&h2=am92aWJvd2wuY29t&h3=am92aWFsLXBldC1wcm9kdWN0cy1sbGMuYWNjb3VudC5teXNob3BpZnkuY29t&hmac=2fe1570d85f7286ee5635ef6d8ae399d4874405d26f4993c5c8f3f9ad0ca3b27") format("woff2"),
url("//jovialpet.com/cdn/fonts/futura/futura_n5.ea788239cf399e57dbdfe80e24bba751e5c2a36c.woff?h1=am92aWFscGV0LmNvbQ&h2=am92aWJvd2wuY29t&h3=am92aWFsLXBldC1wcm9kdWN0cy1sbGMuYWNjb3VudC5teXNob3BpZnkuY29t&hmac=f123eecb74ea42c2550ccf7002524038279eb4e8dcc2220c35f936434db0a849") format("woff");
}
@font-face {
font-family: Futura;
font-weight: 500;
font-style: oblique;
src: url("//jovialpet.com/cdn/fonts/futura/futura_o5.2374ce1c635b408a1f07994a3de4a936fc50f767.woff2?h1=am92aWFscGV0LmNvbQ&h2=am92aWJvd2wuY29t&h3=am92aWFsLXBldC1wcm9kdWN0cy1sbGMuYWNjb3VudC5teXNob3BpZnkuY29t&hmac=6c4bc3b18880515878c96fef725728f61f98d40b49fa20cfd3a6e173f9c9a96f") format("woff2"),
url("//jovialpet.com/cdn/fonts/futura/futura_o5.1bf4df2c089a877c3ba2d33a9d4c7908742bfc89.woff?h1=am92aWFscGV0LmNvbQ&h2=am92aWJvd2wuY29t&h3=am92aWFsLXBldC1wcm9kdWN0cy1sbGMuYWNjb3VudC5teXNob3BpZnkuY29t&hmac=7a07b527237dc72756a4d7a8039382dd101307ff25cdb8bd8d069074460e0a4e") format("woff");
}
$font-logo: font_logo;
$font-logo-family: Futura, sans-serif;
$font-logo-styles: ((normal, oblique), ());
$font-logo-named-styles: ((initial, italic), ());
$font-logo-weights: (500);
$font-logo-named-weights: (initial);
$font-variables: ($font-body $font-heading $font-button $font-logo);
$font-variables-families: ($font-body-family $font-heading-family $font-button-family $font-logo-family);
$font-variables-weights: ($font-body-weights $font-heading-weights $font-button-weights $font-logo-weights);
$font-variables-named-weights: ($font-body-named-weights $font-heading-named-weights $font-button-named-weights $font-logo-named-weights);
$font-variables-styles: ($font-body-styles $font-heading-styles $font-button-styles $font-logo-styles);
$font-variables-named-styles: ($font-body-named-styles $font-heading-named-styles $font-button-named-styles $font-logo-named-styles);
// Find the index of the font setting for cross referencing
@function font-setting-index($font-type) {
@return index($font-variables, $font-type);
}
// Font
// --------
// Find the index of a font weight from its relative name
// - [$font-type]: Variable of font to look up
// - [$font-weight]: lighter/initial/bolder
@function font-weight-index($font-type, $font-weight: initial) {
$font-setting-index: font-setting-index($font-type);
// Look up available weights based on index of font setting
$named-weights: nth($font-variables-named-weights, $font-setting-index);
// Try to find index of desired font weight by cross referencing
$weight-index: index($named-weights, $font-weight);
// Return index of named weight, or return initial weight
@return if($weight-index, $weight-index, 1);
}
// Font
// --------
// Find the font family for a font setting
// - [$font-type]: Variable of font to look up
@function font-family($font-type) {
@return nth($font-variables-families, font-setting-index($font-type));
}
// Font
// --------
// Find a font style relative to a font weight
// - [$font-type]: Variable of font to look up
// - [$font-style]: initial/italic
// - [$font-weight]: lighter/initial/bolder
@function font-style($font-type, $font-style: initial, $font-weight: initial) {
$style: null;
$styles: null;
// Find index of font setting
$font-setting-index: font-setting-index($font-type);
// Get styles based on index of font setting
$font-styles: nth($font-variables-styles, $font-setting-index);
$font-named-styles: nth($font-variables-named-styles, $font-setting-index);
// Try to find index of desired font weight by cross referencing
$weight-named-index: font-weight-index($font-type, $font-weight);
// Get styles available for $font-weight
$named-weight-style: nth($font-styles, $weight-named-index);
$named-weight-named-style: nth($font-named-styles, $weight-named-index);
// Find position of $font-style
$style-named-index: index($named-weight-named-style, $font-style);
@if $style-named-index {
@return nth($named-weight-style, $style-named-index);
} @else {
// Return initial font style
@return nth($named-weight-style, 1);
}
}
// Font weight
// --------
// Find a font sensitive relative weight
// - [$font-type]: Variable of font to look up
// - [$font-weight]: lighter/initial/bolder
@function font-weight($font-type, $font-weight: initial) {
$weight: null;
// Find index of font setting
$font-setting-index: font-setting-index($font-type);
// Look up available weights based on index of font setting
$weights: nth($font-variables-weights, $font-setting-index);
// Try to find index of desired font weight by cross referencing
$weight-index: font-weight-index($font-type, $font-weight);
// Return numerical weight of font
@return nth($weights, $weight-index);
}
// Font
// --------
// Generate complete font styles for a font setting
// - [$font-type]: Variable of font to look up
// - [$font-family]: true/false
// - [$font-size]: unit/false
// - [$font-style]: initial/italic/false
// - [$font-weight]: lighter/initial/bolder/false
@mixin font(
$font-type,
$font-family: true,
$font-size: false,
$font-style: initial,
$font-weight: initial
) {
@if $font-family { font-family: font-family($font-type); }
@if $font-size { font-size: $font-size; }
@if $font-style { font-style: font-style($font-type, $font-style: $font-style, $font-weight: $font-weight ); }
@if $font-weight { font-weight: font-weight($font-type, $font-weight: $font-weight); }
}
// Static Variables
// ------------------------- */
// Layout
$max-width: full;
$max-width-small: 640px;
$max-width-large: 1200px;
$gutter: 30px;
$gutter-double: $gutter * 2;
$gutter-triple: $gutter * 3;
$gutter-half: $gutter / 2;
$gutter-third: $gutter / 3;
$gutter-vertical-large: 50px;
$gutter-vertical-medium: 40px;
$gutter-vertical-small: 20px;
$form-padding: 15px;
$ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
// Colors
$color-white: #fff;
$color-black: #000;
$color-error: #ff0000;
// Font sizes
$body-font-size: 16px;
// User Settings
// ------------------------- */
// General
$logo-width: 300px;
$image-body-background: #{"false"};
$color-body-background: #ffffff;
$color-body: #464648;
$color-accent: #e78e26;
$color-accent-hover: morph($color-accent);
$color-heading: #464648;
$color-meta: mix($color-body-background, $color-body, 30%);
$color-border: #f0eff2;
$color-logo: $color-heading;
$color-button-primary: #ffffff;
$color-button-secondary: $color-button-primary;
$color-button-secondary-background: mix($color-body-background, $color-body, 40%);
$color-button-secondary-background-hover: morph($color-button-secondary-background);
$color-button-disabled: darken(desaturate(mix($color-accent, #808080, 20%), 90%), 13%);
$color-button-disabled-background: desaturate(mix($color-accent, #808080, 20%), 90%);
$color-form-select: #464648;
$color-form-select-border: #f0eff2;
$color-form-select-background: #ffffff;
// Footer
$image-footer-background: #{"false"};
$color-footer-background: #464648;
$color-footer-header: #e78e26;
$color-footer-accent: #ffffff;
$color-footer-accent-hover: morph($color-footer-accent);
$color-footer-share: $color-footer-background;
$color-table-header: $color-heading;
$color-table-header-background: mix($color-form-select-background, $color-body-background);
$color-table-alt-background: mix($color-form-select-background, $color-body-background, 20%);
// Fonts
$font-body: $font-body !default;
$font-logo: $font-logo !default;
$font-logo-capitalize: true;
$font-heading: $font-heading !default;
$font-heading-capitalize: true;
$font-section-heading: $font-heading;
$font-section-heading-capitalize: true;
$font-section-heading-weight: if(false, bolder, initial);
$font-meta: $font-body;
$font-meta-capitalize: true;
$font-meta-weight: if(true, bolder, initial);
$font-button: $font-button !default;
$font-button-capitalize: true;
// Background Styles
// ------------------------- */
// Contrast style
$image-contrast-background: #{"//jovialpet.com/cdn/shop/files/contrast_color_1920x1920.png?v=1613534395"};
$color-contrast-background: mix($color-body-background, mix($color-body, $color-accent, 95%), 93%);
// Accent style:
$color-accent-text: $color-button-primary;
// "Standard" style:
$color-standard-text: $color-footer-accent;
$color-standard-text-alt: $color-footer-accent-hover;
$color-standard-background: $color-footer-background;
// Section specific
// ------------------------- */
// Header
$color-header-background: $color-body-background;
$color-action-icons: $color-button-secondary-background;
$color-action-icons-hover: morph($color-action-icons, true);
$color-header-search: $color-form-select;
$color-header-search-background: $color-form-select-background;
$header-height: 110px;
$header-height-small: 70px;
// Navigation (header)
$color-navigation-background: #ffffff;
$color-navigation: #e78e26;
$color-navigation-hover: morph($color-navigation);
$color-navigation-dropdown: $color-navigation;
$color-navigation-dropdown-hover: morph($color-navigation-dropdown);
$color-navigation-dropdown-background: darken($color-navigation-background, 3%);
$color-navigation-dropdown-border: $color-navigation-dropdown-background;
$color-header-link: #e78e26;
$color-header-dropdown: #ffffff;
// Onboarding
$color-onboarding: rgba($color-body, 0.35);
$color-onboarding-border: rgba($color-body, 0.2);
$color-onboarding-background: rgba($color-body, 0.1);
$color-accent-onboarding: $color-accent-text;
$color-accent-onboarding-border: $color-accent-text;
$color-accent-onboarding-background: rgba($color-accent-text, 0.25);
%font-smoothing {
-moz-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
%heading-font {
@extend %font-smoothing;
@include font($font-heading);
}
%heading-h1 {
margin-bottom: 20px;
font-size: rem(40px);
@if $font-heading-capitalize { font-size: rem(36px); }
}
%heading-h2 {
margin-bottom: 19px;
font-size: rem(32px);
@if $font-heading-capitalize { font-size: rem(28px); }
}
%heading-h3 {
margin-bottom: 18px;
font-size: rem(24px);
@if $font-heading-capitalize { font-size: rem(20px); }
}
%heading-h4 {
margin-bottom: 18px;
font-size: rem(20px);
@if $font-heading-capitalize { font-size: rem(16px); }
}
%heading-h5 {
margin-bottom: 10px;
font-size: rem(16px);
@if $font-heading-capitalize { font-size: rem(12px); }
}
%heading-h6 {
margin-bottom: 10px;
font-size: rem(16px);
@if $font-heading-capitalize { font-size: rem(12px); }
}
%main-content {
max-width: $max-width;
padding: 0;
margin: 0 auto $gutter-vertical-large;
@include breakpoint(s) { padding-top: $gutter-double; }
}
%clearfix {
&:before,
&:after {
display: table;
content: " ";
}
&:after { clear: both;}
}
%loader {
@include transition(right 0.2s $ease-out-quad);
@include animation(rotation 0.6s infinite linear);
position: absolute;
top: 50%;
right: 4px;
z-index: 1;
width: 30px;
height: 30px;
margin-top: -15px;
margin-left: -15px;
border: 3px solid rgba($color-accent, 0.15);
border-top-color: rgba($color-accent, 0.8);
border-radius: 100%;
.loading & {
right: -45px;
margin-left: 0;
}
}
%input-label {
font-size: rem(16px);
.inline-input-wrapper & {
display: inline-block;
margin-left: 5px;
font-size: rem(14px);
vertical-align: middle;
}
}
%home-feature-rows {
margin-top: $gutter-vertical-large * 2;
margin-bottom: $gutter-vertical-large * 2;
@include breakpoint(s) {
margin-top: $gutter-vertical-large;
margin-bottom: $gutter-vertical-large;
}
.borders & {
padding-top: $gutter-vertical-large;
margin-top: $gutter-vertical-large;
margin-bottom: $gutter-vertical-large;
border-top: 1px solid $color-border;
}
.contrast-style.borders & { border-color: $color-border; }
&:first-child {
padding-top: 0;
margin-top: 0;
border-top: 0;
}
.section-title + { margin-top: $gutter-vertical-large; }
.feature-title { margin: 0; }
.rte { margin-top: $gutter-vertical-small; }
}
@keyframes rotation {
from { transform: rotate(0deg); }
to { transform: rotate(359deg); }
}
// Reusable components
html {
&::before {
display: none;
content: "S,M,L,XL";
}
&::after {
display: none;
content: "XL";
@include breakpoint(l) {
content: "L";
}
@include breakpoint(m) {
content: "M";
}
@include breakpoint(s) {
content: "S";
}
}
}
.accordion-list { margin-top: $gutter-vertical-medium * 2; }
.accordion-item {
padding: $gutter-vertical-medium 0;
border-top: 1px solid $color-border;
&:first-child {
padding-top: 0;
border-top: 0;
}
}
.accordion-item-title {
@extend %heading-h6;
margin-top: 0;
margin-bottom: 0;
text-transform: uppercase;
a {
display: block;
font-size: 0;
color: currentColor;
}
}
.accordion-inline-title {
display: inline-block;
width: calc(100% - #{rem(32px)});
font-size: rem(16px);
vertical-align: middle;
}
.accordion-icon {
display: inline-block;
width: rem(16px);
height: rem(16px);
vertical-align: middle;
.icon-plus-vertical {
@include transition(transform 0.4s $ease-out-quad);
@include transform-origin();
.accordion-active & { @include transform(scale(1, 0)); }
}
}
.accordion-item-content { margin-top: $gutter-vertical-small; }
.black-style,
.standard-style,
.accent-style,
.contrast-style,
.default-style {
& + &:before {
display: block;
height: 1px;
margin: 0 $gutter;
background: $color-border;
content: "";
}
}
.accent-style {
color: $color-accent-text;
background-color: $color-accent;
a {
color: $color-accent-text;
&:hover { color: morph($color-accent-text); }
}
.product-list-item-title,
.section-title,
h1,
h2,
h3,
h4,
h5,
h6 {
color: $color-accent-text;
a { color: currentColor; }
}
.home-module-overlay { background-color: $color-accent; }
}
.contrast-style {
background-color: $color-contrast-background;
@if $image-contrast-background != "false" {
background: {
image: url('#{$image-contrast-background}');
position: 50% 50%;
repeat: no-repeat;
size: cover;
}
}
a {
color: $color-accent;
&:hover { color: $color-accent-hover; }
}
.product-list-item-title,
.section-title,
h1,
h2,
h3,
h4,
h5,
h6 {
color: $color-heading;
a { color: currentColor; }
}
.home-module-overlay { background-color: $color-contrast-background; }
}
.default-style {
.section-title,
h1,
h2,
h3,
h4,
h5,
h6 {
color: $color-heading;
a { color: currentColor; }
}
.home-module-overlay {
background-color: $color-body-background;
}
}
.standard-style {
color: $color-standard-text;
background-color: $color-standard-background;
//todo: flesh this out as per the other settings if it becomes widely used
a {
color: currentcolor;
&:hover { color: $color-standard-text-alt; }
}
}
.black-style {
color: $color-black;
background-color: $color-white;
a {
color: currentcolor;
&:hover { color: morph($color-white); }
}
.module-inner,
h1,
h2,
h3,
h4,
h5,
h6 {
color: $color-white;
a { color: currentColor; }
}
.home-module-overlay { background-color: $color-black; }
}
// General
//--------------------------------
body {
@extend %font-smoothing;
@include font($font-body);
font-size: $body-font-size;
line-height: 1.625;
color: $color-body;
}
// Links
a {
color: $color-accent;
text-decoration: none;
@include transition(all 0.2s $ease-out-quad);
&:hover {
color: $color-accent-hover;
}
}
// Headers
h1,
h2,
h3,
h4,
h5,
h6 {
@extend %heading-font;
@include font($font-heading);
margin-top: $gutter;
line-height: 1.25;
color: $color-heading;
@if $font-heading-capitalize {
letter-spacing: 0.1em;
text-transform: uppercase;
}
b,
strong {
font-weight: font-weight($font-heading, $font-weight: bolder);
}
em {
font-style: font-style($font-heading, $font-style: italic);
}
b em,
strong em,
em b,
em strong {
font-style: font-style($font-heading, $font-weight: bolder, $font-style: italic);
}
}
h1 { @extend %heading-h1; }
h2 { @extend %heading-h2; }
h3 { @extend %heading-h3; }
h4 { @extend %heading-h4; }
h5 { @extend %heading-h5; }
h6 { @extend %heading-h6; }
.section-title,
.pxs-newsletter-heading {
@extend %font-smoothing;
@include font($font-section-heading, $font-weight: $font-section-heading-weight);
margin-top: 0;
font-size: rem(20px);
letter-spacing: inherit;
color: $color-heading;
text-align: center;
text-transform: none;
@if $font-section-heading-capitalize {
font-size: rem(17px);
letter-spacing: 0.1em;
text-transform: uppercase;
}
}
.page-title {
margin: 0 0 $gutter-vertical-large;
text-align: center;
a {
color: currentColor;
&:hover { color: currentColor; }
}
}
.feature-title {
@extend %heading-h1;
@include breakpoint(s) { font-size: rem(30px); }
}
.meta {
@extend %font-smoothing;
@include font($font-meta, $font-weight: $font-meta-weight);
font-size: 14px;
color: $color-meta;
@if $font-meta-capitalize {
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
}
/* Basic text */
img {
max-width: 100%;
}
ul, ol, dl {
padding: 0;
margin: 23px 0;
}
ul {
list-style: outside none;
}
ol {
list-style: outside decimal;
}
li {
margin: 12px 0;
}
hr {
height: 2px;
background: $color-border;
border: none;
}
th,
b,
strong {
font-weight: font-weight($font-body, $font-weight: bolder);
}
em {
font-style: font-style($font-body, $font-style: italic);
}
th em,
b em,
strong em,
em b,
em strong {
font-style: font-style($font-body, $font-weight: bolder, $font-style: italic);
}
.button-block { display: block; }
/* iframes and embeds */
iframe {
border: none;
}
.video-wrapper,
.fluid-width-video-wrapper {
position: relative;
width: 100%;
padding: 0;
margin: $gutter 0;
iframe,
object,
embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
.video-wrapper {
position: relative;
height: auto;
max-width: 100%;
padding-bottom: 56.25%;
overflow: hidden;
}
// Icons
//--------------------------------
@font-face {
font-family: 'Single Product Webicons Regular';
src: url('//jovialpet.com/cdn/shop/t/6/assets/singleproductwebicons-regular.eot?v=148853930028068733481584400499');
src: url('//jovialpet.com/cdn/shop/t/6/assets/singleproductwebicons-regular.eot?%23iefix&v=148853930028068733481584400499') format('embedded-opentype'),
url('//jovialpet.com/cdn/shop/t/6/assets/singleproductwebicons-regular.woff?v=121403992484715806711584400501') format('woff'),
url('//jovialpet.com/cdn/shop/t/6/assets/singleproductwebicons-regular.ttf?v=171965092087479535511584400500') format('truetype'),
url('//jovialpet.com/cdn/shop/t/6/assets/singleproductwebicons-regular.svg%23singleproduct_web_iconsregular?958') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'social-icons';
src: url('//jovialpet.com/cdn/shop/t/6/assets/socicon-webfont.eot?v=31111624510843287261584400501');
src: url('//jovialpet.com/cdn/shop/t/6/assets/socicon-webfont.eot?%23iefix&v=31111624510843287261584400501') format('embedded-opentype'),
url('//jovialpet.com/cdn/shop/t/6/assets/socicon-webfont.woff?v=38221785440077609041584400503') format('woff'),
url('//jovialpet.com/cdn/shop/t/6/assets/socicon-webfont.ttf?v=35759713628081646711584400503') format('truetype'),
url('//jovialpet.com/cdn/shop/t/6/assets/socicon-webfont.svg%23sociconregular?958') format('svg');
font-weight: normal;
font-style: normal;
}
.icon {
@include iconFont();
}
.share-icon {
&:before {
@include iconFont();
margin-right: 8px;
}
}
.icon-tweet:before {
content: '\E201';
}
.icon-like:before {
content: '\E202';
}
.icon-pin:before {
content: '\E203';
}
.icon-plus:before {
content: '\E205';
}
.icon-fancy:before {
content: '\E206';
}
html {
width: 100%;
min-height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
// General styling
body {
background-color: $color-body-background;
@if $image-body-background != "false" {
background-image: url('#{$image-body-background}');
}
&.showing-drawer { overflow: hidden; }
}
.main-content { @extend %main-content; }
.clearfix { @extend %clearfix; }
@for $i from 0 through 10 {
.opacity-#{$i * 10} {
opacity: $i / 10;
}
}
// Modules
.module-container {
margin: 0;
overflow: auto; // Prevents margin collapsing
}
.module-inner {
max-width: $max-width;
padding: 0 $gutter;
margin: $gutter-vertical-large auto;
.section-title {
max-width: 500px;
margin: $gutter-vertical-large auto;
}
&.module-inline-items {
padding: 0 $gutter-half;
margin-top: $gutter-vertical-large / 2;
margin-bottom: $gutter-vertical-large / 2;
.section-title {
margin-top: $gutter-vertical-large;
margin-bottom: $gutter-vertical-large / 2;
@include breakpoint(s) {
margin-bottom: $gutter-vertical-large - $gutter-half;
}
}
}
.module-inline-item {
display: inline-block;
padding: 0 $gutter-half;
margin-top: $gutter-vertical-large / 2;
margin-bottom: $gutter-vertical-large / 2;
@include breakpoint(s) {
margin-top: $gutter-half;
margin-bottom: $gutter-half;
}
}
&.module-hidden { display: none; }
}
.newsletter-section,
.header-drawer,
.header-promotion-bar,
.main-header,
.main-content,
.footer-wrapper {
@include transition(transform 0.2s $ease-out-quad);
.showing-drawer & { @include transform(translateX(-260px)); }
}
.placeholder-svg {
display: block;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
background-color: $color-onboarding-background;
border: 1px solid $color-onboarding-border;
fill: $color-onboarding;
.accent-style & {
background-color: $color-accent-onboarding-background;
border-color: $color-accent-onboarding-border;
fill: $color-accent-onboarding;
}
}
.rte {
@extend %clearfix;
> *:first-child { margin-top: 0; }
> *:last-child { margin-bottom: 0; }
@include all-elems {
max-width: $max-width-small;
margin-right: auto;
margin-left: auto;
&.highlight {
max-width: 100%;
}
}
&.full-width-rte {
@include all-elems { max-width: 100%; }
}
ul { list-style: disc; }
ul,
ol,
dl { padding-left: $gutter; }
blockquote {
font-size: 20px;
> *:first-child { margin-top: 0; }
> *:last-child { margin-bottom: 0; }
&.highlight {
@extend %heading-font;
font-size: 24px;
color: $color-heading;
}
}
cite {
font-size: 16px;
font-style: normal;
color: $color-meta;
}
img {
height: auto;
}
.tabs {
display: block;
width: 100%;
height: 42px;
padding: 0;
margin-top: 30px;
margin-bottom: 0;
white-space: nowrap;
list-style: none;
border-bottom: 1px solid $color-border;
li {
//scss-lint:disable NestingDepth
display: inline-block;
height: 41px;
padding: 0 16px;
margin: 0;
font-size: 14px;
line-height: 42px;
cursor: pointer;
border: 1px solid transparent;
border-bottom: 0;
&:hover {
font-style: font-style($font-body, $font-weight: bolder);
font-weight: font-weight($font-body, $font-weight: bolder);
}
&.active {
height: 42px;
font-style: font-style($font-body, $font-weight: bolder);
font-weight: font-weight($font-body, $font-weight: bolder);
background-color: $color-body-background;
border-color: $color-border;
border-radius: 2px 2px 0 0;
.contrast-style & { background-color: $color-contrast-background; }
.accent-style & { background-color: $color-accent; }
}
}
}
.tabs-content {
position: relative;
display: block;
width: 100%;
height: auto;
padding: 0;
margin-top: 0;
margin-bottom: 0;
overflow: hidden;
list-style: none;
> li {
//scss-lint:disable NestingDepth
display: none;
margin: 30px 0 20px;
&.active { display: block; }
}
}
}
table {
margin: $gutter 0;
font-size: 14px;
color: $color-body;
background: transparent;
border: 1px solid $color-border;
border-collapse: separate;
border-top: 0;
border-radius: 5px;
&.clean {
font-size: 16px;
border: 0;
border-radius: 0;
}
.column-title { display: none; }
&.mobile-layout {
//scss-lint:disable ImportantRule
border-bottom: 0;
.column-title {
display: inline-block;
width: 114px;
padding-right: 23px;
font-style: font-style($font-body, $font-weight: bolder);
font-weight: font-weight($font-body, $font-weight: bolder);
}
thead { display: none; }
tr td {
display: block;
float: left; // < IE 10 fix
width: 100%;
clear: left; // < IE 10 fix
text-align: left;
border-top: 1px solid $color-border !important;
border-left: 0;
}
tr:first-child td:first-child { border-radius: 5px 5px 0 0 !important; }
td:last-child { border-bottom: 0; }
tr:last-child td:last-child {
border-bottom: 1px solid $color-border !important;
border-radius: 0 0 5px 5px !important;
}
tr:nth-child(even) td {
background: $color-table-alt-background;
}
}
}
tr {
&:first-child td:first-child,
&:first-child th:first-child {
border-top-left-radius: 5px;
thead ~ tbody & { border-radius: 0; }
}
&:first-child td:last-child {
border-top-right-radius: 5px;
thead ~ tbody & { border-radius: 0; }
}
&:last-child td:first-child,
&:last-child th:first-child { border-bottom-left-radius: 5px; }
&:last-child td:last-child { border-bottom-right-radius: 5px; }
}
thead {
background: $color-table-header-background;
.clean & { background: none; }
th:first-child { border-top-left-radius: 5px; }
th:last-child { border-top-right-radius: 5px; }
}
td,
th {
padding: $gutter / (3 / 2);
border-top: 1px solid $color-border;
.clean & { border: 0; }
}
th {
font-style: font-style($font-body, $font-weight: bolder);
font-weight: font-weight($font-body, $font-weight: bolder);
color: $color-table-header;
background: $color-table-header-background;
.clean & {
color: $color-heading;
background: none;
}
}
td {
border-left: 1px solid $color-border;
&:first-child { border-left: 0; }
}
.button {
@extend %font-smoothing;
@include font($font-button);
display: inline-block;
padding: 12px $gutter;
font-size: 16px;
line-height: 2;
cursor: pointer;
border: 0;
border-radius: 5px;
-webkit-appearance: none;
&,
.contrast-style &.secondary, // Allows .contrast-style .secondary to inherit .button styles
.contrast-style & {
color: $color-button-primary;
background: $color-accent;
&:hover {
color: $color-button-primary;
background: $color-accent-hover;
}
}
.accent-style & {
color: $color-accent;
background: $color-body-background;
&:hover {
color: $color-accent;
background: morph($color-body-background);
}
}
@if $font-button-capitalize {
font-size: 14px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
&.secondary {
color: $color-button-secondary;
background: $color-button-secondary-background;
&:hover {
color: $color-button-secondary;
background: $color-button-secondary-background-hover;
}
}
&.disabled {
color: $color-button-disabled;
background: $color-button-disabled-background;
opacity: 1; // fix for iOS
}
}
form { font-size: 14px; }
label {
@extend %input-label;
}
.input-wrapper { margin: $gutter 0; }
.inline-input-wrapper { margin: $gutter-third; }
input,
textarea {
border-radius: 0;
label ~ & { margin-top: $gutter-third; }
body:not(.user-is-tabbing) &:focus { outline: none; }
}
.input-field-textarea,
.input-field {
display: block;
width: 100%;
color: $color-body;
background-color: transparent;
border: 1px solid $color-border;
border-radius: 5px;
-webkit-appearance: none;
@include placeholder {
color: currentColor;
opacity: 0.7;
}
.contrast-style & {
color: $color-form-select;
background-color: $color-form-select-background;
border-color: transparent;
}
.accent-style & {
color: $color-accent-text;
background-color: transparent;
border-color: $color-accent-text;
&.error { color: $color-accent-text; }
}
&.error {
color: $color-error;
border: 1px solid $color-error;
@include placeholder {
color: currentColor;
opacity: 0.7;
}
}
}
.error-message,
.errors {
color: $color-error;
}
//TODO: CHANGE THESE TO A CLASS
.input-field {
height: 50px;
padding: 15px;
@include lt-ie9 {
padding: 0 15px;
line-height: 50px;
}
}
//TODO: CHANGE THIS TO A CLASS
.input-submit { cursor: pointer; }
//TODO: CHANGE THIS TO A CLASS
.input-password {
@include lt-ie9 {
font-family: Arial, sans-serif;
}
}
.input-field-textarea {
max-width: 100%;
padding: $gutter-half;
}
.select-wrapper {
position: relative;
width: 100%;
padding: 13px ($gutter + $gutter-half) 13px $gutter-half;
margin: $gutter 0;
font-size: 14px;
color: $color-form-select;
text-align: left;
cursor: pointer;
background-color: $color-form-select-background;
border: 1px solid $color-form-select-border;
border-radius: 5px;
.accent-style & {
color: $color-accent;
background-color: $color-accent-text;
border-color: $color-accent-text;
}
&:after {
@include iconFont();
position: absolute;
top: 50%;
right: $gutter-half;
z-index: 1;
margin-top: -8px;
color: $color-form-select;
content: "\E010";
.accent-style & { color: $color-accent; }
}
select {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
width: 100%; // needed for Firefox
height: 100%; // needed for IE
color: $color-black;
cursor: pointer;
opacity: 0;
-webkit-appearance: none;
}
}
.inline-field-wrapper {
margin-top: $gutter;
font-size: 0;
}
.inline-field-input {
display: inline-block;
width: calc(70% - #{$gutter-half});
margin-right: $gutter-half;
font-size: rem(14px);
vertical-align: middle;
@include breakpoint(s) {
display: block;
width: 100%;
margin-right: 0;
}
}
.inline-field-submit {
display: inline-block;
width: 30%;
font-size: rem(14px);
vertical-align: middle;
@include breakpoint(s) {
display: block;
width: 100%;
padding-left: 0;
margin-top: $gutter-half;
}
}
.input-field-title {
@extend %input-label;
display: block;
font-size: rem(15px);
}
.input-checkbox-wrapper {
display: inline-block;
margin-top: $gutter-vertical-small;
margin-right: $gutter-third;
cursor: pointer;
}
.input-checkbox { display: none; }
.input-checkbox-title {
display: inline-block;
padding: $form-padding;
font-size: rem(14px);
background-color: $color-form-select-background;
border: 1px solid $color-border;
border-radius: 5px;
.accent-style & {
color: $color-accent-text;
background-color: transparent;
border-color: $color-accent-text;
}
&:hover {
background-color: rgba($color-form-select, 0.1);
border-color: rgba($color-form-select, 0.1);
.accent-style & {
background-color: rgba($color-accent-text, 0.1);
border-color: rgba($color-accent-text, 0.1);
}
}
:checked + &,
:checked + &:hover {
font-style: font-style($font-body, $font-weight: bolder);
font-weight: font-weight($font-body, $font-weight: bolder);
color: $color-body-background;
background-color: $color-form-select;
border-color: $color-form-select;
.accent-style & {
color: $color-accent;
background-color: $color-accent-text;
border-color: $color-accent-text;
}
}
:disabled + &,
:disabled + &:hover {
background-color: $color-form-select-background;
border: 1px solid $color-border;
opacity: 0.4;
.accent-style & {
background-color: transparent;
border-color: $color-accent-text;
opacity: 0.4;
}
}
}
// Plugins
$local-grey: #333;
.flickity-enabled {
position: relative;
&:focus { outline: none; }
&.is-draggable {
-webkit-tap-highlight-color: transparent;
tap-highlight-color: transparent;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
.flickity-viewport {
cursor: move;
cursor: grab;
&.is-pointer-down {
cursor: grabbing;
}
}
}
}
.flickity-viewport {
position: relative;
height: 100%;
min-height: 100%;
overflow: hidden;
}
.flickity-slider {
position: absolute;
width: 100%;
height: 100%;
}
.flickity-prev-next-button {
@include transition(height 0.4s $ease-out-quad);
position: absolute;
top: 0;
width: 40px;
height: 100%;
padding: 0;
cursor: pointer;
background: transparent;
border: 0;
border-radius: 50%;
&:focus { outline: none; }
&:active { opacity: 0.6; }
&.previous { left: 20px; }
&.next { right: 20px; }
// Icon
svg {
position: absolute;
top: 50%;
left: 4px;
width: 32px;
height: 32px;
margin-top: -16px;
}
.arrow { fill: currentColor; }
}
// Pagination
.flickity-page-dots {
position: absolute;
bottom: -25px;
width: 100%;
padding: 0;
margin: 0;
line-height: 1;
text-align: center;
list-style: none;
.dot {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 8px;
cursor: pointer;
background: $local-grey;
border-radius: 50%;
opacity: 0.25;
&.is-selected { opacity: 1; }
}
}
// Snippets
.article-grid-item {
float: left;
width: calc(50% - #{$gutter-triple / 2});
margin-bottom: $gutter-double;
&:nth-last-child(1),
&:nth-last-child(2) {
margin-bottom: 0;
}
@include breakpoint(s) {
width: 100%;
&:nth-last-child(2) { margin-bottom: $gutter-double; }
}
&:nth-child(2n + 1) {
margin-right: $gutter-triple;
clear: left;
@include breakpoint(s) {
margin-right: 0;
clear: none;
}
}
.post-image { margin-bottom: $gutter; }
.blog-post-title {
margin-top: 0;
margin-bottom: $gutter-half;
}
.post-meta { position: relative; }
.blog-post-date {
display: inline-block;
padding: ($gutter-vertical-small / 2) $gutter-half;
margin-bottom: $gutter-vertical-small;
color: $color-accent-text;
text-transform: uppercase;
background: $color-accent;
}
&.article-has-image .blog-post-date{
position: absolute;
top: 0;
right: 0;
}
}
.article-list-item {
position: relative;
.post-meta {
float: left;
width: 120px;
text-align: right;
> *:first-child { margin-top: 4px; }
@include breakpoint(s) {
float: none;
width: 100%;
text-align: center;
}
}
.static-blog & {
margin: $gutter-triple 0 0;
font-size: 0;
text-align: center;
&:first-child { margin-top: 0; }
@include breakpoint(s-up){
.blog-post-title {
float: right;
width: calc(100% - 180px);
margin: 0 0 $gutter;
text-align: left;
@include lt-ie9 { width: 840px; }
}
}
}
.post-content {
float: right;
width: calc(100% - 120px);
padding-left: $gutter-double;
text-align: left;
@include lt-ie9 { width: 900px; }
@include breakpoint(s) {
float: none;
width: 100%;
padding-left: 0;
margin-top: 20px;
}
@include all-elems {
max-width: 600px;
margin-left: 0;
&.highlight { max-width: 100%; }
}
}
.page-title {
@include breakpoint(m) { margin-bottom: $gutter-half; }
}
.blog-post-title {
@include breakpoint(s) {
float: none;
width: 100%;
text-align: center;
}
}
}
.breadcrumbs {
margin: 0 0 $gutter-vertical-large;
color: $color-body;
text-align: center;
.product-slideshow-section + & { margin-top: $gutter-vertical-large; }
.divider { color: $color-meta; }
a {
color: $color-meta;
&:hover { color: $color-body; }
}
}
@if $image-footer-background != "false" {
.footer-wrapper {
background: {
image: url('#{$image-footer-background}');
position: 50% 50%;
repeat: no-repeat;
size: cover;
}
}
}
.footer-wrapper {
color: $color-footer-accent;
background-color: $color-footer-background;
clear: both;
&.default-style:before {
content: '';
display: block;
margin: 0 $gutter;
height: 1px;
background: $color-border;
}
@include transition(transform 0.2s $ease-out-quad);
@include breakpoint(m) {
text-align: center;
}
a {
color: $color-footer-accent;
&:hover {
color: $color-footer-accent-hover;
}
}
}
.main-footer {
max-width: $max-width;
padding: $gutter-vertical-large $gutter;
margin: 0 auto;
font-size: rem(14px);
&.show-border { border-top: 1px solid $color-border; }
.footer-title {
margin-top: 0;
margin-bottom: $gutter;
font-size: rem(16px);
color: $color-footer-header;
text-align: left;
text-transform: uppercase;
@include breakpoint(m) { text-align: center; }
@if $font-section-heading-capitalize { font-size: 14px; }
}
}
.footer-module:first-child { margin-top: 0; }
.footer-link-list {
float: left;
padding-right: $gutter;
margin-bottom: $gutter-vertical-large;
.showing-3-lists & {
width: 18.3%;
@include breakpoint(m) {
width: 33%;
}
}
.showing-2-lists & {
width: 27.5%;
@include breakpoint(m) {
width: 50%;
}
}
.showing-1-lists & {
width: 27.5%;
@include breakpoint(m) {
width: 100%;
margin-bottom: $gutter;
}
}
@include breakpoint(m) { padding: 0 $gutter-half; }
@include breakpoint(s) {
.showing-1-lists &,
.showing-2-lists &,
.showing-3-lists & {
display: block;
width: 100%;
padding: 0;
margin-bottom: $gutter-vertical-large;
li {
display: inline;
padding: 0 0 0 5px;
&:before {
content: '\002F';
margin-right: 5px;
}
&:first-child:before {
content: none;
}
}
}
}
ul {
margin: 0;
padding: 0;
}
}
.footer-link-list.social-icons {
a {
padding-left: 30px;
position: relative;
@include breakpoint(s) {
padding-left: 20px;
}
}
a:before {
font-family: 'social-icons';
position: absolute;
left: 0;
top: 50%;
margin-top: -7px;
font-style: font-style($font-body);
font-weight: font-weight($font-body);
line-height: 1;
font-size: 15px;
-webkit-font-smoothing: antialiased;
}
.twitter a:before { content: "a"; }
.facebook a:before { content: "b"; }
.pinterest a:before { content: "d"; }
.rss a:before { content: ","; }
.youtube a:before { content: "r"; }
.vimeo a:before { content: "s"; }
.instagram a:before { content: "\e902"; }
// Icons are available for the following social networks
// But we have not supplied settings/markup for them
.tumblr a:before { content: "z"; }
.foursquare a:before { content: "e"; }
.yahoo a:before { content: "f"; }
.skype a:before { content: "g"; }
.yelp a:before { content: "h"; }
.feedburner a:before { content: "i"; }
.linkedin a:before { content: "j"; }
.viadeo a:before { content: "k"; }
.xing a:before { content: "l"; }
.myspace a:before { content: "m"; }
.soundcloud a:before { content: "n"; }
.spotify a:before { content: "o"; }
.grooveshark a:before { content: "p"; }
.lastfm a:before { content: "q"; }
.dailymotion a:before { content: "t"; }
.vine a:before { content: "u"; }
.flickr a:before { content: "v"; }
.wordpress a:before { content: "y"; }
.blogger a:before { content: "A"; }
.technorati a:before { content: "B"; }
.reddit a:before { content: "C"; }
.dribbble a:before { content: "D"; }
.stumbleupon a:before { content: "E"; }
.digg a:before { content: "F"; }
.envato a:before { content: "G"; }
.behance a:before { content: "H"; }
.delicious a:before { content: "I"; }
.deviantart a:before { content: "J"; }
.forrst a:before { content: "K"; }
.play a:before { content: "L"; }
.zerply a:before { content: "M"; }
.wikipedia a:before { content: "N"; }
.apple a:before { content: "O"; }
.flattr a:before { content: "P"; }
.github a:before { content: "Q"; }
.friendfeed a:before { content: "S"; }
.newsvine a:before { content: "T"; }
.bebo a:before { content: "V"; }
.zynga a:before { content: "W"; }
.steam a:before { content: "X"; }
.xbox a:before { content: "Y"; }
.windows a:before { content: "Z"; }
.outlook a:before { content: "1"; }
.coderwall a:before { content: "2"; }
.tripadvisor a:before { content: "3"; }
.netcodes a:before { content: "4"; }
.lanyrd a:before { content: "7"; }
.slideshare a:before { content: "8"; }
.buffer a:before { content: "9"; }
.vkontakte a:before { content: ";"; }
.disqus a:before { content: ":"; }
.identi-ca a:before { content: "U"; }
.chime-in a:before { content: "R"; }
.five-hundred-px a:before { content: "w"; }
}
.footer-columns {
display: flex;
flex-direction: row;
@include breakpoint(m) {
display: block;
}
.footer-link-list {
flex: 1;
}
.social-share-section {
flex: 2;
max-width: 45%;
padding-left: $gutter;
margin-bottom: $gutter*2;
@include lt-ie9 {
padding-left: 0;
}
@include breakpoint(m) {
max-width: 100%;
display: block;
padding-left: 0;
float: none;
clear: left;
}
&:first-child {
padding-left: 0;
}
p {
margin-bottom: 25px;
&:first-child {
margin-top: 0;
}
}
.share-icon {
display: inline-block;
padding: 0 10px;
margin: 0 8px 15px 0;
font-size: 12px;
font-style: font-style($font-body, $font-weight: bolder);
font-weight: font-weight($font-body, $font-weight: bolder);
line-height: 35px;
color: $color-footer-share;
background-color: rgba($color-footer-accent, 0.9);
border-radius: 5px;
&:last-child {
margin-right: 0;
}
&:hover {
color: $color-footer-share;
background-color: $color-footer-accent-hover;
}
}
}
}
.copyright {
clear: both;
color: rgba($color-footer-accent, 0.5);
p {
margin: 0;
}
}
.payment-types {
margin-top: $gutter;
font-size: 0;
color: rgba($color-footer-accent, 0.7);
}
.payment-types-item {
display: inline-block;
width: 40px;
height: 40px;
margin: 0 $gutter-half 0 0;
@include breakpoint(m) { margin: 0 ($gutter / 4); }
svg {
display: block;
}
}
.main-header-wrapper {
@include transition(background-color 0.2s $ease-out-quad);
background-color: $color-header-background;
.template-index &:not(.sticky-header) {
z-index: 10;
position: relative;
}
&.full-bleed-slideshow {
box-shadow: none;
@include breakpoint(s-up) {
&:not(.sticky-header-scrolled) { background-color: rgba($color-header-background, 0); }
&:not(.sticky-header) {
position: absolute;
right: 0;
left: 0;
z-index: 6;
}
}
}
}
.main-header {
@extend %clearfix;
@include transform(translate3d(0, 0, 0));
@include transition(transform 0.2s $ease-out-quad);
position: relative;
z-index: 3;
max-width: 1200px;
padding: 0 $gutter;
margin: 0 auto;
.show-border & { border-bottom: 1px solid $color-border; }
@include breakpoint(s-up) {
.no-border &,
.sticky-header.show-border &,
.full-bleed-slideshow & { border: 0; }
}
.collapsed-navigation & { overflow: hidden; }
@include breakpoint(s) {
height: auto;
padding: $gutter;
text-align: center;
}
}
.sticky-header {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 99;
width: 100%;
border-bottom: 1px solid $color-border;
&.full-bleed-slideshow { border: 0; }
@include breakpoint(s) {
@include transform(translateY(0));
position: relative;
&.full-bleed-slideshow,
.main-header { border: 0 !important; }
}
.no-js & {
position: relative;
}
}
.branding {
@include transition(height 0.2s $ease-out-quad);
@include breakpoint(s-up) {
float: left;
height: $header-height;
.sticky-header-scrolled & { height: $header-height-small; }
}
.branding-title {
@extend %font-smoothing;
@include font($font-logo);
display: table;
height: 100%;
margin: 0;
font-size: 28px;
.static-password & {
width: 100%;
line-height: 1.2;
text-align: center;
}
@include breakpoint(s) {
width: 100%;
height: auto;
line-height: 1.2;
text-align: center;
}
@if $font-logo-capitalize {
font-size: 20px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
a {
display: table-cell;
vertical-align: middle;
}
}
a {
color: $color-logo;
@media (min-width: 721px) {
.header-bleed-light-colors & {
color: $color-white;
}
.header-bleed-dark-colors & {
color: $color-black;
}
}
}
}
.logo {
position: relative;
display: block;
height: 100%;
max-width: $logo-width;
padding: 10px 0;
@include breakpoint(s) {
padding-top: 0;
margin: 0 auto;
}
img {
@include transform(translateY(-50%));
position: relative;
top: 50%;
display: block;
max-width: 100%;
max-height: 100%;
@include breakpoint(s) {
@include transform(none);
position: static;
margin-right: auto;
margin-left: auto;
}
.no-js & {
top: 0;
@include transform(translateY(0));
}
}
}
.header-search-wrapper {
position: absolute;
top: 0;
right: 0;
width: 400px;
height: 100%;
overflow: hidden;
@include breakpoint(s) { display: none; }
}
.header-search-form {
@include transition(all 0.2s $ease-out-quad);
position: absolute;
right: $gutter;
bottom: 100%;
z-index: 99;
width: 300px;
padding: 0 $gutter / 2;
line-height: 36px;
color: $color-action-icons;
background: $color-header-search-background;
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-webkit-transform: translate3d(0, 0, 0);
@media (min-width: 721px) {
.header-bleed-light-colors & {
color: $color-white;
background: none;
}
.header-bleed-dark-colors & {
color: $color-black;
background: none;
}
}
.active & {
bottom: ($header-height - 42px) / 2;
@include breakpoint(s-up) {
.sticky-header-scrolled & { bottom: ($header-height-small - 42px) / 2; }
}
}
&:before {
@include iconFont(32px);
content: '\E003';
color: $color-action-icons;
@media (min-width: 721px) {
.header-bleed-light-colors & {
color: $color-white;
}
.header-bleed-dark-colors & {
color: $color-black;
}
}
}
}
input.header-search-input {
display: inline-block;
vertical-align: top;
width: auto;
margin-left: 10px;
background: none;
border: none;
border-radius: 0;
padding: 0;
height: 42px;
color: $color-header-search;
@include transition(all 0.2s $ease-out-quad);
@include lt-ie9 {
line-height: 42px;
}
@media (min-width: 721px) {
.header-bleed-light-colors & {
color: $color-white;
}
.header-bleed-dark-colors & {
color: $color-black;
}
}
@include placeholder {
color: $color-header-search;
opacity: 0.7;
@media (min-width: 721px) {
.header-bleed-light-colors & {
color: $color-white;
opacity: 0.7;
}
.header-bleed-dark-colors & {
color: $color-black;
opacity: 0.7;
}
}
}
}
.header-tools {
float: right;
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
-webkit-transform: translate3d(0, 0, 0);
@include transition(opacity 0.2s $ease-out-quad);
.header-search-wrapper.active + & {
opacity: 0;
@include lt-ie9 {
visibility: hidden;
}
}
@include breakpoint(s) {
float: none;
margin-top: $gutter/2;
}
}
.header-actions {
@include transition(line-height 0.2s $ease-out-quad);
position: relative;
display: inline-block;
line-height: $header-height;
text-align: left;
@include breakpoint(s-up) {
.sticky-header-scrolled & { line-height: $header-height-small; }
}
@include breakpoint(s) {
display: block;
line-height: 1;
text-align: center;
}
a,
span {
@include transition(color 0.2s $ease-out-quad);
@include iconFont(32px);
padding: 0 ($gutter / 2);
color: $color-action-icons;
cursor: pointer;
@media (min-width: 721px) {
.header-bleed-light-colors & { color: $color-white; }
.header-bleed-dark-colors & { color: $color-black; }
}
&:hover {
color: $color-action-icons-hover;
@media (min-width: 721px) {
.header-bleed-light-colors & { color: $color-white; }
.header-bleed-dark-colors & { color: $color-black; }
}
}
}
}
.header-actions .select-wrapper {
width: auto;
display: inline-block;
border: none;
line-height: $header-height;
height: auto;
background: none;
font-size: 16px;
padding-right: 32px;
font-style: font-style($font-body, $font-weight: bolder);
font-weight: font-weight($font-body, $font-weight: bolder);
margin: 0;
&:after, & {
color: $color-action-icons;
}
&:hover:after, &:hover {
color: $color-action-icons-hover;
}
@media (min-width: 721px) {
.header-bleed-light-colors & {
&, &:after, &:hover, &:hover:after {
color: $color-white;
}
}
.header-bleed-dark-colors & {
&, &:after, &:hover, &:hover:after {
color: $color-black;
}
}
}
}
.header-actions .selected-currency {
line-height: 1;
}
.header-actions .drawer-toggle {
display: none;
position: relative;
top: 2px;
background: $color-action-icons;
content: "";
height: 3px;
width: 23px;
padding: 0;
margin: 7px 15px;
&:before,
&:after {
position: absolute;
left: 0;
content: '';
height: 3px;
width: 23px;
}
&:before {
top: -7px;
border-top: 3px solid $color-action-icons;
padding-bottom: 11px;
}
&:after {
bottom: -7px;
border-bottom: 3px solid $color-action-icons;
}
&:hover {
border-color: $color-action-icons-hover;
}
.showing-drawer & {
border-color: $color-action-icons-hover;
}
.collapsed-navigation & {
display: inline-block;
}
@include breakpoint(s) {
display: inline-block;
}
@media (min-width: 721px) {
.header-bleed-light-colors & {
background: $color-white;
&:before,
&:after {
border-color: $color-white;
}
}
.header-bleed-dark-colors & {
background: $color-black;
&:before,
&:after {
border-color: $color-black;
}
}
}
}
.header-search-toggle {
position: relative;
top: 2px;
}
.account-link {
position: relative;
top: 2px;
.collapsed-navigation & {
display: none;
}
@include breakpoint(s) {
display: none;
}
}
.cart-link {
position: relative;
.cart-count {
position: absolute;
z-index: 10;
top: 20px;
right: 0;
left: 0;
color: $color-header-background !important;
font-style: font-style($font-body, $font-weight: bolder);
font-weight: font-weight($font-body, $font-weight: bolder);
text-align: center;
font-size: 12px;
font-family: Helvetica, Arial, sans-serif;
.ie9 &, html[data-useragent*='MSIE 10.0'] & {
top: 20px;
}
@media (min-width: 721px) {
.header-bleed-light-colors & {
color: $color-black !important;
}
.header-bleed-dark-colors & {
color: $color-white !important;
}
}
}
}
@-moz-document url-prefix() {
.cart-link .cart-count {
top: 21px;
}
}
.header-drawer {
@include transition(transform 0.2s $ease-out-quad);
position: fixed;
top: 0;
right: -260px;
z-index: 100;
width: 260px;
height: 100%;
background: $color-accent;
padding: 0 $gutter $gutter;
text-align: center;
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
.ie9 & {
width: 277px;
right: -277px;
}
.showing-drawer & {
overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch;
.ie9 & {
-ms-transform: translateX(-277px);
}
@include lt-ie9 {
right: 0;
}
}
.branding-title {
@extend %font-smoothing;
@include font($font-logo);
position: relative;
height: $header-height;
padding-bottom: $gutter;
margin-top: 0;
margin-bottom: $gutter;
font-size: 20px;
border-bottom: 1px solid;
border-color: rgba($color-button-primary, 0.3);
@if $font-logo-capitalize {
font-size: 16px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
a {
color: $color-button-primary;
position: absolute;
top: 50%;
left: 0;
width: 100%;
@include transform(translateY(-50%));
}
}
.drawer-toggle {
position: absolute;
top: 0;
right: 0;
padding: $gutter/2;
color: $color-button-primary;
cursor: pointer;
}
}
.drawer-account-link {
display: inline-block;
margin-top: $gutter;
padding: 10px;
border-radius: 5px;
border: 1px solid $color-button-primary;
color: $color-button-primary;
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
.icon {
margin-right: 10px;
}
&:hover {
opacity: 0.9;
color: $color-button-primary;
}
}
.line-item {
display: flex;
padding-top: 30px;
padding-bottom: 40px;
border-bottom: 1px solid $color-border;
@include breakpoint(s-up) {
padding-top: 40px;
padding-bottom: 40px;
}
&:first-child {
@include breakpoint(s) {
border-top: 1px solid $color-border;
}
}
}
.line-item-figure {
width: 75px;
@include breakpoint(s-up) {
width: 100px;
}
}
.line-item-anchor {
display: flex;
align-items: center;
justify-content: center;
width: 75px;
@include breakpoint(s-up) {
width: 100px;
}
}
.line-item-image {
display: block;
max-width: 75px;
@include breakpoint(s-up) {
max-width: 100px;
}
}
.line-item-info {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
margin-left: 20px;
@include breakpoint(s-up) {
align-items: center;
flex-wrap: nowrap;
margin-left: 35px;
}
}
.line-item-titling-remove {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin-bottom: 20px;
@include breakpoint(s-up) {
align-items: flex-start;
flex-direction: column;
justify-content: initial;
margin-bottom: 0;
}
}
.line-item-titling {
display: flex;
flex-direction: column;
}
.line-item-title {
@extend %heading-font;
font-size: 16px;
}
.line-item-options {
margin-top: 5px;
font-size: 14px;
color: $color-meta;
}
.line-item-remove {
padding: 0;
margin-left: 20px;
color: $color-accent;
background: transparent;
border: 0;
@include breakpoint(s-up) {
margin-top: 5px;
margin-left: 0;
}
}
.line-item-prices-discounts {
display: flex;
flex-direction: column;
width: 100%;
margin-bottom: 50px;
@include breakpoint(s-up) {
align-items: flex-end;
flex-shrink: 0;
width: 33.36%;
margin-bottom: 0;
text-align: right;
}
}
.line-item-prices {
display: flex;
flex-direction: column;
justify-content: center;
@include breakpoint(s-up) {
font-size: 16px;
}
}
.line-item-original-price {
text-decoration: line-through;
+ .line-item-final-price {
color: $color-accent;
}
}
.line-item-discounts {
display: flex;
flex-direction: column;
width: 100%;
margin-top: 10px;
}
.line-item-discount {
font-size: 14px;
color: $color-accent;
+ .line-item-discount {
margin-top: 5px;
}
}
.line-item-quantity {
display: flex;
width: 128px;
@include breakpoint(s-up) {
flex-shrink: 0;
justify-content: flex-end;
width: 20.81%;
}
}
.line-item-quantity-span-w-label {
@include breakpoint(s-up) {
display: none;
}
}
.line-item-quantity-span {
@include breakpoint(s) {
display: none;
}
}
.line-item-quantity-input {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
font-style: font-style($font-body, $font-weight: bolder);
font-weight: font-weight($font-body, $font-weight: bolder);
border: 0;
@include breakpoint(s-up) {
width: 36px;
height: 36px;
text-align: center;
}
}
.line-item-quantity-decrement,
.line-item-quantity-increment {
width: 44px;
height: 40px;
padding: 0 10px;
cursor: pointer;
background-color: transparent;
border: 1px solid $color-border;
@include breakpoint(s-up) {
width: 33px;
height: 36px;
}
}
.line-item-quantity-decrement {
border-radius: 5px 0 0 5px;
}
.line-item-quantity-increment {
border-left: 0;
border-radius: 0 5px 5px 0;
}
.line-item-line-prices {
display: flex;
flex-direction: column;
justify-content: center;
text-align: right;
@include breakpoint(s-up) {
align-items: flex-end;
flex-shrink: 0;
width: 19.12%;
font-size: 16px;
}
}
.line-item-original-line-price {
text-decoration: line-through;
+ .line-item-final-line-price {
color: $color-accent;
}
}
%modal-wrapper {
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
background: rgba($color-white, 0.6);
&.active {
display: block;
}
}
%modal {
background: $color-body-background;
padding: $gutter*3;
border: 1px solid $color-border;
max-width: 640px;
position: absolute;
top: 50%;
left: 50%;
@include transform(translate(-50%,-50%));
text-align: center;
}
%modal-action-button {
margin-top: $gutter;
}
%modal-title {
margin-bottom: 18px;
}
.header-tools .navigation {
display: inline-block;
padding: 0 $gutter 0 0;
text-align: left;
position: relative;
.dropdown-toggle {
display: none;
}
.has-dropdown .main-nav-item {
position: relative;
display: block;
&:after {
content: "\E010";
font-family: 'Single Product Webicons Regular';
font-size: 10px;
position: absolute;
top: 15px;
right: 7px;
}
}
.collapsed-navigation & {
display: none;
}
@include breakpoint(s) {
display: none;
}
ul {
margin: 0;
padding: 0;
}
li {
@include transition(line-height 0.2s $ease-out-quad);
position: relative;
display: inline-block;
line-height: 100%;
}
a {
position: relative;
color: $color-navigation;
padding: 13px 20px;
@media (min-width: 721px) {
.header-bleed-light-colors & {
color: $color-white;
}
.header-bleed-dark-colors & {
color: $color-black;
}
}
&:hover {
color: $color-navigation-hover;
@media (min-width: 721px) {
.header-bleed-light-colors & {
color: $color-white;
}
.header-bleed-dark-colors & {
color: $color-black;
}
}
}
}
& li:hover > ul {
display: block;
}
.dropdown-second-tier .has-dropdown > a {
&:after {
@include iconFont(12px);
margin-left: 5px;
font-style: font-style($font-body, $font-weight: bolder);
font-weight: font-weight($font-body, $font-weight: bolder);
content: '\E009';
}
}
ul ul {
position: absolute;
top: 100%;
left: -80px;
display: none;
width: 160px;
padding: 13px 0;
margin-left: 50%;
font-size: 14px;
text-align: center;
background: $color-navigation-dropdown-background;
border: 1px solid $color-navigation-dropdown-border;
border-radius: 5px;
@include breakpoint(s-up) {
.header-bleed-light-colors & {
background: $color-white;
border: 1px solid $color-white;
}
.header-bleed-dark-colors & {
background: $color-black;
border: 1px solid $color-black;
}
}
&:before,
&:after {
position: absolute;
bottom: 100%;
left: 50%;
width: 0;
height: 0;
pointer-events: none;
border: solid rgba(136, 183, 213, 0);
content: " ";
}
&:before {
margin-left: -8px;
border-bottom-color: $color-navigation-dropdown-border;
border-width: 8px;
@include breakpoint(s-up) {
.header-bleed-light-colors & {
border-bottom-color: $color-white;
}
.header-bleed-dark-colors & {
border-bottom-color: $color-black;
}
}
}
&:after {
margin-left: -7px;
border-bottom-color: $color-navigation-dropdown-background;
border-width: 7px;
@include breakpoint(s-up) {
.header-bleed-light-colors & {
border-bottom-color: $color-white;
}
.header-bleed-dark-colors & {
border-bottom-color: $color-black;
}
}
}
li {
display: block;
padding-bottom: 0;
margin: 5px 0;
line-height: 1.5;
}
a {
display: block;
padding: 10px;
line-height: 1.1;
color: $color-navigation-dropdown;
@include breakpoint(s-up) {
.header-bleed-light-colors & {
color: $color-black;
}
.header-bleed-dark-colors & {
color: $color-white;
}
}
&:hover {
color: $color-navigation-dropdown-hover;
@include breakpoint(s-up) {
.header-bleed-light-colors & {
color: $color-black;
}
.header-bleed-dark-colors & {
color: $color-white;
}
}
}
}
}
.dropdown-third-tier {
top: -19px;
left: 100%;
margin: 0;
&::before,
&::after {
content: none;
}
}
}
.header-navigation {
position: relative;
z-index: 1000;
background: $color-navigation-background;
@include breakpoint(s) {
display: none;
}
}
.below-header {
margin: 0 auto;
max-width: 1200px;
padding: 0 30px 0 5px;
.main-nav-item {
color: $color-navigation;
line-height: 50px;
}
.open .main-nav-item {
color: $color-navigation-hover;
}
.primary {
margin: 0;
font-size: 0;
> li {
position: relative;
display: inline-block;
font-size: 16px;
margin: 0;
padding: 0 25px;
}
> li.has-dropdown > a {
position: relative;
display: block;
padding-right: 15px;
&:after {
content: "\E010";
font-family: 'Single Product Webicons Regular';
font-size: 10px;
position: absolute;
top: 0;
right: 0;
}
}
.has-mega-nav {
position: static;
}
.simple-dropdown ul {
opacity: 0;
visibility: hidden;
min-width: 200px;
@include transition(all 0.2s $ease-out-quad);
li {
position: relative;
}
}
.dropdown-toggle {
display: none;
}
ul {
margin: 0;
position: absolute;
left: -1px;
padding: 5px 0;
background: $color-navigation-dropdown-background;
border: 1px solid $color-navigation-dropdown-border;
&.open-right {
left: auto;
right: -1px;
&.dropdown-third-tier {
right: 100%;
}
}
li.has-dropdown > a:after {
content: "\E010";
font-family: 'Single Product Webicons Regular';
font-size: 12px;
position: absolute;
top: 3px;
right: 20px;
color: $color-navigation-dropdown;
@include transform(rotate(-90deg));
}
a {
color: $color-navigation-dropdown;
display: block;
padding: 0 20px;
}
}
ul ul {
left: 100%;
top: 0;
margin-top: -17px;
margin-left: 0;
}
}
ul .secondary {
border-top: 0;
}
}
.below-header .has-dropdown {
@include transition(all 0.2s $ease-out-quad);
&.open {
background: $color-navigation-dropdown-background;
}
}
.below-header .has-dropdown:hover > ul,
.below-header .has-mega-nav:hover > .mega-nav {
display: block;
visibility: visible;
opacity: 1;
z-index: 1000;
}
.header-navigation .navigation .mega-nav {
opacity: 0;
visibility: hidden;
position: absolute;
left: 0;
right: 0;
padding: 0;
border-bottom: 1px solid $color-navigation-dropdown-border;
background: $color-navigation-dropdown-background;
overflow: hidden;
-webkit-backface-visibility: hidden;
@include transition(all 0.2s $ease-out-quad);
.secondary {
position: static;
border: 0;
display: block;
margin: 0 auto;
max-width: 1200px;
padding: 0 30px 35px;
font-size: 0;
&.animating {
@include transition(all 0.2s $ease-out-quad);
}
&.hide {
@include transform(translateY(-100%));
}
a {
display: inline-block;
position: relative;
}
> li {
margin: 30px 0 0 0;
padding: 0 50px 0 0;
display: inline-block;
font-size: 16px;
vertical-align: top;
&:last-child {
padding-right: 0;
}
> a {
font-style: font-style($font-body, $font-weight: bolder);
font-weight: font-weight($font-body, $font-weight: bolder);
color: $color-navigation-dropdown;
padding: 0;
}
&.has-dropdown > a:after {
content: "";
}
}
}
.tertiary {
display: block;
position: static;
padding: 0;
border: 0;
margin: 5px 0 0;
li {
padding: 0;
position: static;
margin: 7px 0;
line-height: 1.25;
}
li.has-dropdown > a:after{
content: "\E006";
font-family: 'Single Product Webicons Regular';
font-size: 10px;
position: absolute;
top: 6px;
right: -20px;
}
a {
padding: 0;
}
}
.quarternary {
position: static;
display: block;
max-width: 1200px;
margin: 0 auto;
padding: 0 30px;
border: 0;
font-size: 0;
li {
display: inline-block;
vertical-align: top;
font-size: 16px;
width: 25%;
padding-right: 30px;
}
}
}
.secondary > li {
.showing-1 & { width: 100%; }
.showing-2 & { width: 50%; }
.showing-3 & { width: 33%; }
.showing-4 & { width: 25%; }
.showing-5-or-more & {
width: 20%;
padding-right: 30px !important; // override crazy selector
}
}
.quarternary-wrapper {
position: absolute;
display: none;
top: 0;
left: 0;
right: 0;
padding: 30px 0 34px;
&.animating {
@include transition(all 0.2s $ease-out-quad);
}
&.hide {
@include transform(translateY(-100%));
}
}
.quarternary-breadcrumbs {
font-size: 15px;
margin: -12px 0 10px;
padding-bottom: 8px;
border-bottom: 1px solid $color-navigation-dropdown-border;
color: $color-action-icons;
.close-category {
cursor: pointer;
&:hover {
color: $color-action-icons-hover;
}
}
}
.header-drawer .navigation {
ul {
margin: 0;
}
li {
margin: $gutter 0;
}
a {
color: $color-button-primary;
display: block;
outline: none;
-webkit-tap-highlight-color: transparent;
&:hover {
opacity: 0.9;
}
}
.primary ul {
display: none;
padding: $gutter 0;
margin: $gutter 0;
border-top: 1px solid;
border-bottom: 1px solid;
border-color: rgba($color-button-primary, 0.3);
&.secondary .has-dropdown:last-child .tertiary {
padding-bottom: 0;
margin-bottom: 0;
border-bottom: 0;
}
li {
margin: 24px 0 12px;
&:first-child {
margin-top: 12px;
}
}
a {
font-size: 14px;
margin: 0;
}
}
.primary ul li:last-child ul {
border-bottom: 0;
margin-bottom: 0;
padding-bottom: 0;
}
.has-dropdown {
position: relative;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
> a {
position: relative;
padding-right: 23px;
padding-left: 23px;
.dropdown-toggle {
@include transition(transform 0.2s $ease-out-quad);
position: absolute;
top: 50%;
right: 0;
display: block;
width: 23px;
height: 23px;
transform: translateY(-50%);
svg {
display: block;
width: 23px;
height: 23px;
padding: 6px;
}
}
}
&.open > a .dropdown-toggle {
@include transition(transform 0.2s $ease-out-quad);
transform: translateY(-50%) rotate(45deg);
}
}
}
.header-navigation .navigation.below-header,
.header-drawer .navigation {
.open > ul,
.open > div {
display: block;
visibility: visible;
opacity: 1;
z-index: 1000;
}
}
.newsletter-section {
text-align: center;
.newsletter-message,
form {
max-width: 540px;
margin: $gutter-vertical-large auto;
.static-password & {
max-width: 100%;
margin-top: 0;
margin-bottom: 0;
}
}
form { font-size: 0; }
}
.newsletter-message {
font-size: 16px;
p { margin: 0; }
}
.newsletter-input[type="email"] {
display: inline-block;
width: 70%;
font-size: 14px;
vertical-align: middle;
@include breakpoint(s) {
display: block;
width: 100%;
}
}
.newsletter-submit {
display: inline-block;
width: 30%;
padding-left: $gutter-half;
vertical-align: middle;
@include breakpoint(s) {
display: block;
width: 100%;
padding-left: 0;
margin-top: $gutter-half;
}
}
.pagination {
font-size: 0;
max-width: 640px;
margin: 85px auto 100px;
.static-blog & {
max-width: 600px;
}
> div {
font-size: 14px;
display: inline-block;
width: 33.33%;
}
}
.pagination-previous, .pagination-next {
> a:before, > span:before, > a:after, > span:after {
@include iconFont()
}
@include breakpoint(s) {
.text {
display: none;
}
}
}
.pagination-previous {
> a, > span {
&:before {
content: '\E012';
margin-right: 10px;
@include breakpoint(s) {
margin-right: 0;
}
}
}
}
.pagination-next {
text-align: right;
> a, > span {
&:after {
content: '\E013';
margin-left: 10px;
@include breakpoint(s) {
margin-left: 0;
}
}
}
}
.pagination-position {
text-align: center;
}
$local-button-size: 46px;
$local-color-heading: $color-heading;
$local-color-background: $color-body-background;
.shopify-model-viewer-ui {
// These variables are passed in to the shadow-dom
#{--progress-bar-color}: $local-color-heading;
#{--progress-bar-height}: 2px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
&:not(.shopify-model-viewer-ui--fullscreen) {
.shopify-model-viewer-ui__control-icon.shopify-model-viewer-ui__control-icon--exit-fullscreen {
display: none;
}
}
&.shopify-model-viewer-ui--fullscreen {
.shopify-model-viewer-ui__control-icon.shopify-model-viewer-ui__control-icon--enter-fullscreen {
display: none;
}
}
model-viewer {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
&.shopify-model-viewer-ui__disabled {
pointer-events: none;
}
}
.shopify-model-viewer-ui__controls-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
cursor: pointer;
}
.shopify-model-viewer-ui__controls-area {
position: absolute;
right: 10px;
bottom: 10px;
z-index: 1;
display: flex;
flex-direction: column;
width: $local-button-size;
height: auto;
opacity: 0;
transition: opacity 150ms $ease-out-quad;
&:not(.shopify-model-viewer-ui__controls-area--playing) {
display: none;
}
&:focus-within {
opacity: 1;
}
}
&:hover .shopify-model-viewer-ui__controls-area {
opacity: 1;
}
.shopify-model-viewer-ui__button {
&:focus {
z-index: 1;
}
}
.shopify-model-viewer-ui__button--zoom-out,
.shopify-model-viewer-ui__button--zoom-in,
.shopify-model-viewer-ui__button--fullscreen {
cursor: pointer;
}
.shopify-model-viewer-ui__button--poster,
.shopify-model-viewer-ui__button--control {
width: $local-button-size;
height: $local-button-size;
padding: 0;
color: $local-color-heading;
background-color: $local-color-background;
border: 1px solid rgba($local-color-heading, 0.05);
transition: background-color 150ms $ease-out-quad;
body:not(.user-is-tabbing) & {
outline: none;
}
svg {
width: $local-button-size;
height: $local-button-size;
opacity: 1;
transition: opacity 150ms $ease-out-quad;
}
&:hover svg {
opacity: 0.55;
}
&:active {
background-color: mix($local-color-heading, $local-color-background, 5%);
}
}
.shopify-model-viewer-ui__button--poster {
position: absolute;
top: calc(50% - #{60px / 2});
left: calc(50% - #{60px / 2});
z-index: 1;
width: 60px;
height: 60px;
background-color: $local-color-background;
border: none;
box-shadow: 0 0 0 1px rgba($local-color-heading, 0.05);
&:hover svg {
opacity: 0.55;
}
svg {
width: 100%;
height: 100%;
border: none;
opacity: 1;
transition: opacity 150ms $ease-out-quad;
}
}
.shopify-model-viewer-ui__button--control {
&:first-child {
border-bottom: 0;
}
&:last-child {
border-top: 0;
}
}
}
// Plyr
.plyr.plyr--video {
color: $local-color-heading;
background-color: $local-color-background;
.plyr__control {
color: $local-color-heading;
background: $local-color-background;
border: 0;
}
// This is the main play button shown before play starts
> .plyr__control {
width: 60px;
height: 60px;
padding: 0;
background: $local-color-background;
box-shadow: 0 0 0 1px rgba($local-color-heading, 0.05);
> svg {
width: 100%;
height: 100%;
margin: 0;
border: 0;
transition: opacity 150ms $ease-out-quad;
}
&:hover > svg {
opacity: 0.55;
}
&:active {
opacity: 0.7;
}
}
.plyr__progress__buffer {
background: rgba($local-color-heading, 0.6);
opacity: 0.6;
}
.plyr__control--overlaid.plyr__tab-focus,
.plyr__control--overlaid:hover {
color: $local-color-heading;
}
.plyr__video-wrapper,
.plyr__poster {
background-color: $local-color-background;
}
.plyr__controls {
background: $local-color-background;
border: 0;
box-shadow: 0 0 0 1px rgba($local-color-heading, 0.05);
};
.plyr__tooltip {
color: $local-color-background;
background: $local-color-heading;
&:before {
border-top: 4px solid $local-color-heading;
}
}
// I would have grouped these in a better way in SCSS, but when different selectors
// are comma separated in Chrome, the webkit definition does not get applied. It's like
// Chrome just ignores it because there are others it doesn't recognize in the selector.
&.plyr--full-ui input[type="range"]::-webkit-slider-runnable-track {
background-image: linear-gradient(to right, $local-color-heading var(--value, 0%), rgba($local-color-heading, 0.6) var(--value, 0%));
}
&.plyr--full-ui input[type="range"].plyr__tab-focus::-webkit-slider-runnable-track {
box-shadow: 0 0 0 4px rgba($local-color-heading, 0.25);
}
&.plyr--full-ui input[type="range"].plyr__tab-focus::-moz-range-track {
box-shadow: 0 0 0 4px rgba($local-color-heading, 0.25);
}
&.plyr--full-ui input[type="range"].plyr__tab-focus::-ms-track {
box-shadow: 0 0 0 4px rgba($local-color-heading, 0.25);
}
&.plyr--full-ui input[type="range"]::-webkit-slider-thumb {
box-shadow: 2px 0 0 0 $local-color-background;
}
&.plyr--full-ui input[type="range"]::-moz-range-track {
box-shadow: 2px 0 0 0 $local-color-background;
}
&.plyr--full-ui input[type="range"]::-ms-thumb {
box-shadow: 2px 0 0 0 $local-color-background;
}
&.plyr--full-ui input[type="range"]:active::-webkit-slider-thumb {
box-shadow: 0 0 0 3px rgba($local-color-heading, 0.25);
}
&.plyr--full-ui input[type="range"]:active::-moz-range-track {
box-shadow: 0 0 0 3px rgba($local-color-heading, 0.25);
}
&.plyr--full-ui input[type="range"]:active::-ms-thumb {
box-shadow: 0 0 0 3px rgba($local-color-heading, 0.25);
}
// Volume Control
&.plyr--full-ui .plyr__volume {
background-color: $local-color-heading;
}
&.plyr--full-ui .plyr__volume input[type="range"]::-webkit-slider-runnable-track {
background-image: linear-gradient(to right, $local-color-background var(--value, 0%), rgba($local-color-background, 0.6) var(--value, 0%));
}
&.plyr--full-ui .plyr__volume input[type="range"].plyr__tab-focus::-webkit-slider-runnable-track {
box-shadow: 0 0 0 4px rgba($local-color-background, 0.25);
}
&.plyr--full-ui .plyr__volume input[type="range"].plyr__tab-focus::-moz-range-track {
box-shadow: 0 0 0 4px rgba($local-color-background, 0.25);
}
&.plyr--full-ui .plyr__volume input[type="range"].plyr__tab-focus::-ms-track {
box-shadow: 0 0 0 4px rgba($local-color-background, 0.25);
}
&.plyr--full-ui .plyr__volume input[type="range"]::-webkit-slider-thumb {
color: $local-color-background;
box-shadow: 2px 0 0 0 $local-color-heading;
}
&.plyr--full-ui .plyr__volume input[type="range"]::-moz-range-track {
color: $local-color-background;
box-shadow: 2px 0 0 0 $local-color-heading;
}
&.plyr--full-ui .plyr__volume input[type="range"]::-ms-thumb {
color: $local-color-background;
box-shadow: 2px 0 0 0 $local-color-heading;
}
&.plyr--full-ui .plyr__volume input[type="range"]:active::-webkit-slider-thumb {
box-shadow: 0 0 0 3px rgba($local-color-background, 0.25);
}
&.plyr--full-ui .plyr__volume input[type="range"]:active::-moz-range-track {
box-shadow: 0 0 0 3px rgba($local-color-background, 0.25);
}
&.plyr--full-ui .plyr__volume input[type="range"]:active::-ms-thumb {
box-shadow: 0 0 0 3px rgba($local-color-background, 0.25);
}
}
$local-color-viewinyourspace: $color-body;
$local-thumbnail-vertical-gap: 20px;
$local-thumbnail-horizontal-gap: 12px;
.product-gallery--navigation {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
justify-content: center;
margin-top: $gutter-vertical-small;
margin-bottom: -$local-thumbnail-vertical-gap;
margin-left: -$local-thumbnail-horizontal-gap;
}
.product-gallery--viewport--figure {
position: relative;
body:not(.user-is-tabbing) & {
outline: none;
}
&:not([data-product-gallery-selected="true"]) {
display: none;
}
img {
display: block;
width: 100%;
height: auto;
}
video {
display: block;
max-width: 100%;
}
&.zoom-enabled {
cursor: pointer; //IE11
cursor: zoom-in;
}
.product-gallery--media-wrapper {
position: relative;
}
&[data-media-type="model"] .product-gallery--media-wrapper {
height: 0;
padding-bottom: 100%;
model-viewer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
// Hides native video controls until Plyr overlay is added, to avoid pop-in
&[data-media-type="video"] .product-gallery--media-wrapper {
> video {
visibility: hidden;
}
}
&[data-media-type="external_video"] .product-gallery--media-wrapper {
width: 100%;
height: 0;
padding-bottom: 56.25%;
> iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
}
.product-gallery--media-thumbnail {
position: relative;
max-width: 100%;
padding: 0;
margin-bottom: $local-thumbnail-vertical-gap;
margin-left: $local-thumbnail-horizontal-gap;
background: none;
border: 0;
body:not(.user-is-tabbing) &:focus {
outline: none;
}
&::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
box-shadow: none;
transition: box-shadow 200ms $ease-out-quad;
}
&[data-product-gallery-selected="true"] {
&::after {
box-shadow: 0 0 0 2px $color-body-background, 0 0 0 3px $color-border;
}
}
img {
display: block;
width: 100%;
height: auto;
max-width: 75px;
}
svg {
position: absolute;
top: 3px;
right: 3px;
width: 20px;
height: 20px;
color: $color-heading;
background-color: $color-body-background;
box-shadow: 0 0 0 1px rgba($color-heading, 0.05);
}
}
.product-gallery--image-zoom-container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
display: none;
cursor: pointer; //IE11
cursor: zoom-out;
background: {
color: $color-white;
repeat: no-repeat;
}
&.active { display: block; }
}
.product-gallery--viewinyourspace {
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: auto;
padding: 0;
color: $local-color-viewinyourspace;
background-color: rgba($local-color-viewinyourspace, 0.08);
border: 0;
// Large breakpoints probably don't support AR, so we use `display: none` to
// avoid a gap. On the offchance a high-resolution device does support AR there
// will be a screen jump when the button becomes un-hidden. Smaller breakpoint
// likely do support AR, so we allow space for it even if it remains hidden.
&[data-shopify-xr-hidden] {
visibility: hidden;
@include breakpoint(large) {
display: none;
}
}
svg {
width: 44px;
height: 44px;
pointer-events: none;
}
}
.smart-payments {
.product-quantity-container {
display: block;
.add-to-cart {
min-width: 240px;
margin-top: 30px;
margin-left: 0;
}
}
.button:not(:disabled) {
color: $color-accent;
background: $color-body-background;
border: 1px solid $color-accent;
&:hover {
color: $color-accent-hover;
border-color: $color-accent-hover;
}
.contrast-style & {
background: $color-contrast-background;
}
.accent-style & {
color: $color-body-background;
background: $color-accent;
border: 1px solid $color-body-background;
&:hover {
color: transparentize($color-body-background, 0.2);
border-color: transparentize($color-body-background, 0.2);
}
}
}
}
.shopify-payment-button__button {
@include font($font-button);
padding: 12px $gutter;
margin-top: 14px;
overflow: hidden;
font-size: 16px;
line-height: 2;
border-radius: 5px;
transition: none;
-webkit-appearance: none;
@if $font-button-capitalize {
font-size: 14px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
}
.shopify-payment-button__button--unbranded {
background: $color-accent;
&:hover:not(:disabled) {
background: $color-accent-hover;
.accent-style & {
background: transparentize($color-body-background, 0.2);
}
}
.accent-style & {
color: $color-accent;
background: $color-body-background;
}
}
.shopify-payment-button__button--branded {
min-height: 54px;
padding: 0;
}
.shopify-payment-button__button--hidden {
display: none;
}
.shopify-payment-button__more-options {
@include font($font-body);
font-size: 16px;
color: $color-heading;
&:hover:not(:disabled) {
text-decoration: none;
}
}
.header-promotion-bar {
padding: 12px $gutter-double;
@include breakpoint(s) {
padding-right: $gutter;
padding-left: $gutter;
}
}
.header-promotion-text {
display: block;
max-width: $max-width;
margin: 0 auto;
text-align: center;
text-decoration: none;
p {
margin-top: 0;
margin-bottom: 0;
}
}
.recommended-products {
padding-top: $gutter-vertical-large;
margin-top: $gutter-vertical-large;
text-align: center;
border-top: 1px solid $color-border;
h3 { margin-bottom: $gutter-double; }
.collection-products {
margin: $gutter (-1 * $gutter-half) 0;
@include breakpoint(s) { margin: $gutter 0 0; }
&.product-count-2 {
.product-list-item {
width: 50%;
}
}
&.product-count-3 {
.product-list-item {
width: percentage(1/3);
}
}
&.product-count-4 {
.product-list-item {
width: 25%;
}
}
}
.product-list-item {
padding: 0 $gutter-half;
margin: 0;
@include breakpoint(s) {
width: 100%;
margin-bottom: $gutter;
}
&:nth-child(odd) { padding-right: $gutter-half; }
&:nth-child(even) { padding-left: $gutter-half; }
}
}
[data-rimg="lazy"],
[data-rimg="loading"],
[data-rimg="loaded"] {
@include transition(opacity 0.2s $ease-out-quad);
}
[data-rimg="lazy"] {
.js & {
opacity: 0;
}
}
[data-rimg="lazy"],
[data-rimg="loading"] {
background-color: $color-onboarding-background;
.accent-style & {
background-color: $color-accent-onboarding-background;
}
}
[data-rimg="loading"] {
opacity: 1;
}
[data-rimg="loaded"] {
background-color: transparent;
}
// Javascript disabled
.no-js img[data-rimg="lazy"] {
display: none;
}
.share-buttons {
font-size: 0;
a {
display: inline-block;
line-height: 35px;
padding: 0 13px;
border-radius: 5px;
border: 1px solid $color-border;
color: $color-body;
margin: 10px;
font-size: 12px;
.static-blog &, .static-article & {
margin-right: 0;
}
&:before {
@include iconFont();
@include transition(color 0.3s $ease-out-quad);
margin-right: 7px;
}
&:hover {
color: white;
&:before {
color: white;
}
}
}
}
.share-facebook {
&:hover {
background: #49659D;
border-color: #49659D;
}
&:before {
content: '\E202';
color: #49659D;
}
}
.share-twitter {
&:hover {
background: #09AEEC;
border-color: #09AEEC;
}
&:before {
content: '\E201';
color: #09AEEC;
}
}
.share-pinterest {
&:hover {
background: #CB1F2A;
border-color: #CB1F2A;
}
&:before {
content: '\E203';
color: #CB1F2A;
}
}
.share-fancy {
&:hover {
background: #49659D;
border-color: #49659D;
}
&:before {
content: '\E206';
color: #49659D;
}
}
/*
* * * * * * * * * * * * * * * * * * * * * * * * * * *
ShopPad App: Tracktor
https://apps.shopify.com/tracktor-2
* * * * * * * * * * * * * * * * * * * * * * * * * * */
#tracktorOrderDetails {
h1 { @extend %heading-font; }
p {
color: $color-body;
}
}
#tracktor.themeDark #tracktorOrderStatus div,
#tracktor.themeLight #tracktorOrderStatus div {
background-color: $color-form-select-background !important;
box-shadow: 0 0 0 1px $color-form-select-border;
@media screen and (max-width: 797px) {
height: auto !important;
background-color: rgba(0, 0, 0, 0) !important;
box-shadow: none !important;
}
}
#tracktorProgress {
dt {
color: $color-heading;
}
dd {
color: $color-form-select;
}
}
#tracktorLoader span,
#tracktorOrderError p {
color: $color-body;
}
#tracktorOrderForm {
h1 {
@extend %heading-font;
margin-top: 0;
}
label {
color: $color-body;
margin-bottom: 5px;
font-size: 14px;
font-style: font-style($font-body, $font-weight: bolder);
font-weight: font-weight($font-body, $font-weight: bolder);
}
input {
margin: 0;
color: $color-form-select;
background-color: $color-form-select-background;
}
}
.tracktorFulfillmentCol1 ul li ul {
background-color: $color-form-select-background !important;
border-color: $color-form-select-border !important;
}
.tracktorFulfillmentCol1 ul li ul li {
border-color: $color-form-select-border !important;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * *
ShopPad App: Bouncer
https://apps.shopify.com/bouncer
* * * * * * * * * * * * * * * * * * * * * * * * * * * */
#bouncer_modal_heading {
@extend %heading-font;
font-style: font-style($font-heading);
font-weight: font-weight($font-heading);
}
#bouncer_modal_subheading,
#bouncer_modal_exit {
@include font($font-body);
}
#bouncer_modal_datepicker {
span {
position: relative;
display: inline-block;
margin: 0;
select {
background-color: $color-form-select-background;
cursor: pointer;
border-radius: 5px;
border: 1px solid $color-form-select-border;
color: $color-form-select;
padding: 10px 35px 10px 10px;
position: relative;
text-align: left;
width: 100%;
height: 45px;
font-size: 14px;
margin: 0;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
}
&:after {
color: $color-form-select;
content: "\E010";
margin-top: -8px;
position: absolute;
right: $gutter/2;
top: 50%;
z-index: 1;
@include iconFont();
}
}
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * *
ShopPad App: Uploadery
https://apps.shopify.com/uploadery
* * * * * * * * * * * * * * * * * * * * * * * * * * */
#uploadery-container {
&:empty {
display: none !important;
}
form {
display: inline-block;
width: 100%;
background-color: inherit;
margin: 0;
margin-bottom: 15px;
}
label {
position: relative;
font-size: 14px;
font-style: font-style($font-body, $font-weight: bolder);
font-weight: font-weight($font-body, $font-weight: bolder);
color: $color-body;
width: 100%;
display: inline-block;
overflow: hidden;
.spb-fileupload {
margin-top: 5px;
}
}
input[type=file] {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
outline: none;
font-size: 14px;
color: $color-body;
padding: 0;
border: 0;
cursor: pointer;
&::-webkit-file-upload-button {
@include font($font-body);
font-size: 14px;
color: $color-form-select;
background-color: $color-form-select-background;
border: 1px solid $color-form-select-border;
border-radius: 4px;
color: $color-form-select;
box-sizing: border-box;
padding: 4px 6px;
outline: none;
}
}
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * *
ShopPad App: Infinite Options
https://apps.shopify.com/custom-options
* * * * * * * * * * * * * * * * * * * * * * * * * * */
#infiniteoptions-container {
margin-top: 16px;
&:empty {
display: none !important;
}
> div {
margin-bottom: 16px;
display: inline-block;
width: 100%;
> label {
color: $color-body;
width: 100%;
display: inline-block;
font-size: 14px;
font-style: font-style($font-body, $font-weight: bolder);
font-weight: font-weight($font-body, $font-weight: bolder);
}
> span {
width: 100%;
display: inline-block;
label {
/* radio button labels */
color: $color-form-select;
font-size: 14px;
margin-bottom: 5px;
width: 100%;
display: inline-block;
vertical-align: middle;
cursor: pointer;
position: relative;
input[type=radio] {
float: left;
margin-right: 10px;
display: inline-block;
background-color: $color-form-select-background;
border: 1px solid $color-form-select-border;
width: 20px;
height: 20px;
border-radius: 10px;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
outline: none;
&:checked:after {
content: '';
position: absolute;
width: 10px;
height: 10px;
background-color: $color-form-select;
border-radius: 10px;
top: 5px;
left: 5px;
}
}
}
}
}
.spb-select {
position: relative;
select {
background-color: $color-form-select-background;
cursor: pointer;
border-radius: 5px;
border: 1px solid $color-form-select-border;
color: $color-form-select;
padding: 13px $gutter*1.5 13px $gutter/2;
position: relative;
text-align: left;
width: 100%;
height: 50px;
font-size: 14px;
margin: 0;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
}
&:after {
color: $color-form-select;
content: "\E010";
margin-top: -8px;
position: absolute;
right: $gutter/2;
top: 50%;
z-index: 1;
@include iconFont();
}
}
input[type=text],
input[type=number],
input[type=url],
input[type=password],
input[type=email],
textarea {
color: $color-form-select;
background-color: $color-form-select-background;
border: 1px solid $color-form-select-border;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
textarea {
min-height: 75px;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
label {
color: $color-form-select;
margin-bottom: 5px;
width: 100%;
display: inline-block;
font-size: 14px;
}
input[type=checkbox] {
float: left;
margin-right: 10px;
display: inline-block;
background-color: $color-form-select-background;
border: 1px solid $color-form-select-border;
width: 20px;
height: 20px;
border-radius: 4px;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
outline: none;
&:checked:after {
content: '\2713';
position: absolute;
width: 20px;
height: 20px;
color: $color-form-select;
top: 0;
left: 0;
text-align: center;
line-height: 20px;
}
}
}
}
.cart-item-property {
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * *
ShopPad App: Coin
https://apps.shopify.com/coin
* * * * * * * * * * * * * * * * * * * * * * * * * * */
#coin-container {
position: relative;
overflow: hidden;
border-top: 1px solid rgba(255, 255, 255, .3);
margin-top: $gutter;
padding-top: $gutter;
text-align: center;
&:empty {
display: none !important;
}
&:after {
content: '';
display: block;
position: absolute;
bottom: 10px;
right: 10px;
width: 0;
height: 0;
border-style: solid;
border-width: 6px 4px 0 4px;
border-color: $color-button-primary rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}
label {
margin: 0;
color: $color-button-primary;
select {
display: inline-block;
width: 100%;
}
}
select {
display: inline-block;
width: auto;
color: $color-button-primary;
background-color: transparent;
border: 0;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
text-align: center;
cursor: pointer;
&::-ms-expand {
display: none;
}
}
}
.header-actions #coin-container {
margin-top: 0;
padding-top: 0;
display: inline-block;
line-height: 20px;
&:after {
bottom: 7px;
border-color: $color-action-icons rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}
label {
color: $color-action-icons;
select {
margin-left: 10px;
}
}
select {
width: auto;
color: $color-action-icons;
padding-right: 20px;
}
}
.header-drawer #coin-container {
text-align: left;
select {
width: auto;
padding-right: 22px;
}
label {
width: 100%;
display: inline-block;
select {
float: right;
margin-top: 2px;
}
}
}
// Templates
.template-404 {
.main-content {
text-align: center;
}
}
.static-blog {
.page-title {
@include breakpoint(s) {
margin-bottom: $gutter;
}
&.tag-page {
margin-bottom: $gutter-double;
}
}
.blog-post-title {
font-size: 24px;
a,
a:hover {
color: $color-heading;
}
}
}
.icon.rss {
display: inline-block;
margin: 7px 0 0 10px;
font-size: 32px;
color: $color-meta;
vertical-align: top;
}
.current-tag {
margin-left: $gutter * 6;
@include breakpoint(s) {
margin-left: 0;
text-align: center;
}
}
.post-meta {
a { color: $color-meta; }
.share-buttons a {
@include breakpoint(s) {
padding: 0 9px;
font-size: 12px;
line-height: 31px;
@if $font-meta-capitalize { font-size: 11px; }
&:first-child {
margin-left: 0;
}
}
}
}
.post-content {
font-size: 16px;
blockquote.highlight {
> * {
max-width: 100%;
margin-left: 0;
}
}
.highlight {
opacity: 0;
&.processed { opacity: 1; }
}
.highlight.overlapping {
max-width: calc(100% - 160px);
margin-left: 160px;
@include lt-ie9 { padding-right: 160px; }
@include breakpoint(m) { margin-left: 0; }
}
.highlight-left { float: left; }
.highlight-right { float: right; }
.highlight-left,
.highlight-right {
@include breakpoint(s) {
float: none;
margin-right: auto;
margin-left: auto;
text-align: center;
}
img {
float: none !important;
@include breakpoint(s) {
margin: 1em auto !important;
}
}
}
.photo-caption {
clear: both;
font-size: 12px;
font-style: italic;
color: $color-meta;
@include breakpoint(s) { margin: 0 !important; }
}
}
.post-image {
margin-bottom: 1em;
}
.blog-read-more {
margin: 25px 0 0;
}
.featured-image {
@include transition(opacity 0.2s $ease-out-quad);
display: block;
max-width: none;
margin: 0 auto $gutter * 2;
background: $color-border;
opacity: 0;
@include breakpoint(m) { margin: $gutter 0; }
&.contained-featured-image,
&.processed,
.no-js & {
opacity: 1;
}
&.contained-featured-image { max-width: 100%; }
}
.single-post-pagination {
max-width: 640px;
margin: $gutter-vertical-large auto 0;
@include breakpoint(s) {
margin: $gutter * 1.5 auto 0;
}
a:before,
a:after {
@include iconFont()
}
.previous-post {
&:before {
content: '\E012';
margin-right: 10px;
}
}
.next-post {
float: right;
&:after {
content: '\E013';
margin-left: 10px;
}
}
}
.post-comments {
max-width: 640px;
padding-top: $gutter-double;
margin: $gutter-double auto 0;
border-top: 1px solid $color-border;
@include breakpoint(s) {
padding-top: $gutter * 1.5;
margin: ($gutter * 1.5) auto 0;
}
> div h3 {
margin-top: 0;
}
}
.post-comment {
margin: $gutter-double 0;
@include breakpoint(s) { margin: $gutter 0; }
}
.post-comments-submit {
.post-comments-list ~ & {
padding-top: $gutter-double;
margin-top: $gutter-double;
border-top: 1px solid $color-border;
@include breakpoint(s) {
padding-top: $gutter;
margin-top: $gutter;
}
}
}
.template-cart {
.page-title {
@include breakpoint(s) {
margin-bottom: $gutter*2;
}
+ .cart-empty {
display: block;
}
}
.cart-empty {
display: none;
text-align: center;
}
}
.cart-items {
width: 100%;
@include transition(height 0.3s ease-in);
th {
font-style: font-style($font-body);
font-weight: font-weight($font-body);
color: $color-body;
text-align: right;
}
tr td, tr th {
border-bottom: 1px solid $color-border;
border-radius: 0 !important; // override regular table styles
&.first {
padding-left: 0;
}
&.last {
padding-right: 0;
text-align: right;
}
}
}
.cart-items {
@include breakpoint(s) {
tr, td {
display: block;
width: 100%;
float:left\9;
}
tr {
border-bottom: 1px solid $color-border;
overflow: hidden; // unable to user clearfix class
&.first {
border-top: 1px solid $color-border;
}
}
tr td {
border: none;
&.last {
text-align: center;
padding-right: $gutter/3;
}
}
thead, .total {
display: none;
}
}
}
.cart-item {
td {
padding: 40px 0;
}
@include transition(opacity 0.3s ease-in, height 0.3s ease-in);
&.removing {
opacity: 0;
}
}
.cart-item-product {
width: 60%;
text-align: left;
@include breakpoint(s) {
text-align: center;
border-bottom: 1px solid $color-border !important;
}
}
.cart-image {
display: inline-block;
vertical-align: middle;
img {
display: block;
max-width: 100px;
margin: 0 auto;
}
@include breakpoint(s) {
display: block;
width: 100px;
margin: 0 auto $gutter/2;
}
}
.cart-item-product-wrap {
display: inline-block;
width: calc(100% - 100px - #{$gutter * 2});
margin-left: $gutter;
vertical-align: middle;
span {
display: block;
}
@include breakpoint(s) {
display: block;
width: 100%;
margin-left: 0;
text-align: center;
}
}
.cart-title {
@extend %heading-font;
a {
color: $color-heading;
}
}
.cart-vendor, .cart-variant {
color: $color-meta;
font-size: 14px;
margin-top: $gutter/3;
}
.cart-vendor ~ .cart-variant {
margin-top: 0;
}
.cart-item-properties {
@include font($font-meta);
margin-top: 10px;
font-size: 13px;
}
.cart-item-property {
margin-top: 5px;
span {
display: inline;
}
}
.cart-item-remove {
color: $color-accent;
font-size: 13px;
margin-top: 10px;
cursor: pointer;
&:hover {
color: $color-accent-hover;
}
}
tr {
.cart-item-price, .cart-item-quantity, .cart-item-total {
text-align: right;
padding-right: 20px;
@include breakpoint(s) {
width: 100%;
padding: 0 10px;
margin: 20px 0;
text-align: center;
}
}
}
.cart-item-price:before, .cart-item-quantity:before, .cart-item-total:before {
@include breakpoint(s) {
color: $color-heading;
}
}
.cart-item-price:before {
@include breakpoint(s) {
content: 'Price: ';
}
}
.cart-item-quantity:before {
@include breakpoint(s) {
content: 'Quantity: ';
}
}
.cart-item-total:before {
@include breakpoint(s) {
content: 'Total: ';
}
}
.cart-item-quantity {
font-size: 0;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
> * {
font-size: 16px;
}
}
input.cart-item-quantity-display {
display: inline-block;
margin-right: 10px;
width: 40px;
height: auto;
padding: 0;
border: none;
font-style: font-style($font-body, $font-weight: bolder);
font-weight: font-weight($font-body, $font-weight: bolder);
text-align: right;
@include breakpoint(s) {
margin-right: 5px;
width: 30px;
text-align: left;
}
}
.cart-item-decrease, .cart-item-increase {
display: inline-block;
height: 36px;
line-height: 32px;
border: 1px solid $color-border;
padding: 0 10px;
cursor: pointer;
}
.cart-item-decrease {
border-radius: 5px 0 0 5px;
}
.cart-item-increase {
border-left: none;
border-radius: 0 5px 5px 0;
}
.cart-tools {
display: flex;
justify-content: space-between;
@include breakpoint(s) {
flex-direction: column;
}
}
.cart-instructions,
.cart-totals-checkout {
display: inline-block;
margin-top: $gutter;
font-size: 16px;
vertical-align: top;
}
.cart-instructions {
width: 60%;
@include breakpoint(s) {
width: 100%;
}
textarea {
font-size: 14px;
}
}
.cart-totals-checkout {
display: flex;
flex-direction: column;
width: 40%;
padding-left: $gutter;
text-align: right;
@include breakpoint(s) {
width: 100%;
padding-left: 0;
}
}
.cart-totals-checkout-full-width {
width: 100%;
}
.cart-message { margin: rem(16px) 0; }
.cart-checkout-buttons-wrapper {
display: flex;
justify-content: flex-end;
@include breakpoint(s) {
flex-direction: column;
justify-content: flex-start;
align-items: flex-end;
}
}
.cart-button-checkout,
.cart-button-update {
// Earliest point for `.cart-button-update`
// and `.cart-button-checkout` to appear on one line
@media screen and (max-width: 900px) {
margin-top: rem(16px);
}
}
.cart-button-checkout {
display: flex;
align-items: center;
margin-left: $gutter-half;
svg {
margin-right: $gutter / 4;
}
}
.additional-checkout-buttons {
width: 100%;
margin-top: $gutter;
}
[data-shopify-buttoncontainer] {
justify-content: flex-end;
}
.cart-price {
font-size: 20px;
color: $color-heading;
}
.cart-checkout {
margin-top: $gutter;
}
.cart-currency-note {
margin-top: $gutter;
}
.cart-modal-wrapper {
@extend %modal-wrapper;
.cart-modal { @extend %modal; }
.cart-modal .section-title { @extend %modal-title; }
.cart-modal-action { @extend %modal-action-button; }
}
.cart-item-undo {
@include breakpoint(s) {
text-align: center;
}
}
.cart-undo {
cursor: pointer;
color: $color-accent;
&:hover {
color: $color-accent-hover;
}
}
.cart-shipping-calculator-wrapper {
font-size: 0;
margin-top: $gutter*2;
}
.cart-shipping-calculator {
width: 60%;
display: inline-block;
vertical-align: top;
font-size: 16px;
@include breakpoint(s) {
width: 100%;
}
}
.cart-shipping-calculator-response {
width: 40%;
display: inline-block;
vertical-align: top;
font-size: 14px;
padding: 39px 0 0 $gutter;
text-align: right;
@include breakpoint(s) {
width: 100%;
text-align: center;
padding: 0;
}
}
.shipping-country-wrapper, .shipping-province-wrapper {
margin-top: 15px;
.select-wrapper {
margin: 0;
}
}
.cart-shipping-zip-code input {
display: inline-block;
width: auto;
font-size: 14px;
@include breakpoint(s) {
width: 100%;
margin: 0;
}
}
input[type="button"].cart-shipping-calculate {
margin-left: 15px;
@include breakpoint(s) {
margin: 15px 0 0 0;
}
}
.template-collection {
.pagination {
max-width: $max-width + $gutter-double;
padding-right: $gutter;
padding-left: $gutter;
}
.main-content {
max-width: 100%;
padding-right: 0;
padding-left: 0;
}
}
.collection-header-wrapper {
display: table;
width: 100%; // required for Firefox
max-width: $max-width;
padding-right: $gutter;
padding-left: $gutter;
margin: $gutter-vertical-large auto;
}
.collection-header-has-image {
position: relative;
max-width: 100%;
min-height: 500px;
padding-top: $gutter-vertical-large;
padding-bottom: $gutter-vertical-large;
margin-top: 0;
text-align: center;
background: {
position: center center;
repeat: no-repeat;
size: cover;
}
&:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
background: rgba($color-black, 0.15);
content: "";
}
}
.collection-header {
position: relative;
z-index: 2;
display: table-cell;
width: 100%;
vertical-align: middle;
.page-title {
margin-top: 0;
margin-bottom: 0;
}
.collection-description {
@extend %font-smoothing;
@include font($font-body);
font-size: 20px;
font-style: font-style($font-body);
font-weight: font-weight($font-body);
p {
max-width: 100%;
}
}
.collection-header-has-image & {
.page-title,
.collection-description {
color: $color-white;
text-shadow: 0 1px 4px rgba($color-black, 0.15);
}
}
}
.collection-description {
margin-top: $gutter-vertical-large;
text-align: center;
}
.collection-tag-selector {
margin-top: $gutter-vertical-large;
margin-bottom: $gutter-vertical-large;
text-align: center;
.select-wrapper {
display: inline-block;
width: auto;
margin: 0;
}
}
.collection-products {
max-width: $max-width + $gutter-triple;
margin: 0 auto;
font-size: 0;
&.products-per-row-3,
&.products-per-row-4 {
max-width: $max-width + $gutter;
}
@include breakpoint(m) { padding: 0 $gutter-half; }
@include breakpoint(s) {
padding: 0 $gutter;
margin: $gutter-vertical-large 0;
}
}
.product-list-item {
font-size: 16px;
display: inline-block;
vertical-align: top;
width: 50%;
text-align: center;
margin: 0 0 $gutter-double;
padding: 0 $gutter;
.products-per-row-3 & {
width: 33.33%;
padding: 0 $gutter-half;
}
.products-per-row-4 & {
width: 25%;
padding: 0 $gutter-half;
}
@include breakpoint(m) {
padding: 0 $gutter-half;
}
@include breakpoint(s) {
padding: 0 !important;
display: block;
width: 100% !important;
}
}
.product-list-item-title {
font-size: 16px;
a { color: $color-heading; }
}
.product-list-item-thumbnail {
position: relative;
display: block;
max-width: 100%;
a {
position: relative;
display: inline-block;
max-width: 100%;
}
.product-list-item-image {
display: block;
margin: 0 auto;
}
}
.stock-overlay {
position: absolute;
top: 50%;
left: 50%;
background: $color-accent;
color: $color-button-primary;
display: inline-block;
padding: 10px 15px;
@include transform(translate(-50%, -50%));
}
.sale-badge {
position: absolute;
bottom: -($gutter/3);
right: -($gutter/3);
background: $color-accent;
color: $color-button-primary;
display: block;
border-radius: 50%;
height: 30px;
width: 30px;
padding: 7px 7px 6px 6px;
@include iconFont();
}
.product-list-item-vendor {
margin-top: $gutter;
+ h1 {
margin-top: 20px;
}
}
.product-list-item-price {
margin-bottom: 0;
.original {
text-decoration: line-through;
opacity: 0.4;
margin-left: 7px;
}
}
.template-customers-account {
}
.template-customers-account,
.template-customers-addresses,
.template-customers-order {
.page-title {
margin-bottom: $gutter/2;
}
}
.template-customers-login,
.template-customers-register,
.template-customers-account,
.template-customers-reset_password,
.template-customers-activate_account {
.main-content {
max-width: 640px;
}
}
.logged-in-as {
margin-bottom: $gutter*2;
font-size: 14px;
text-align: center;
}
.account-info {
margin-bottom: $gutter*2;
@include breakpoint(s) {
margin-bottom: $gutter;
}
> span {
display: block;
}
}
.view-addresses-link {
font-size: 14px;
}
.orders {
width: 100%;
margin: $gutter 0;
td {
text-align: center;
}
}
.decline-activation {
margin-left: 10px;
@include breakpoint(s) {
display: block;
margin: 10px 0 0 0;
}
}
.template-customers-activate {
}
.template-customers-addresses {
.main-content {
padding-left: $gutter/2;
padding-right: $gutter/2;
max-width: 700px;
@include breakpoint(s) {
padding-left: $gutter;
padding-right: $gutter;
}
}
}
.customer-address-edit-form, .customer-new-address {
display: none;
&.show {
display: block;
}
label ~ .select-wrapper {
margin-top: $gutter/2;
}
}
.cancel-edit {
margin-left: 8px;
}
.customer-address-edit-form {
.input-wrapper:first-of-type {
margin-top: 0;
}
}
.customer-address.editing {
display: none;
}
.customer-addresses {
font-size: 0;
@include breakpoint(s) {
text-align: center;
}
}
.customer-address-wrap {
font-size: 16px;
display: inline-block;
width: 50%;
vertical-align: top;
margin: $gutter/2 0;
padding: 0 $gutter/2;
@include breakpoint(s) {
width: 100%;
text-align: center;
margin: $gutter 0;
padding: 0;
&:first-child {
margin-top: 0;
}
}
}
.customer-address {
p:first-child {
margin-top: 0;
}
p:last-child {
margin-bottom: 0;
}
}
.edit-address, .delete-address {
color: $color-accent;
cursor: pointer;
font-size: 14px;
&:hover {
color: $color-accent-hover;
}
}
.add-new-address-wrapper {
margin-top: $gutter;
padding-top: $gutter*1.5;
border-top: 1px solid $color-border;
padding-left: $gutter/2;
padding-right: $gutter/2;
@include breakpoint(s) {
text-align: center;
padding-left: 0;
padding-right: 0;
}
&.no-border {
padding-top: 0;
border-top: none;
}
.input-wrapper:first-of-type {
margin-top: 0;
}
}
.template-customers-login {
.page-title {
margin-bottom: $gutter*2;
}
}
.recover-password {
display: none;
.reset-button {
display: inline-block;
margin: 0;
}
.toggle-forgetfulness {
display: inline-block;
margin-left: 10px;
}
}
.successful-reset {
display: none;
}
.toggle-forgetfulness {
span {
cursor: pointer;
}
}
.guest-checkout, .new-customer {
margin-top: $gutter*2;
}
.template-customers-order {
.cart-item-quantity {
font-size: 16px;
}
}
.order-totals {
float: right;
width: 33%;
margin-top: $gutter;
text-align: right;
@include breakpoint(s) {
float: none;
width: 100%;
margin: $gutter auto 0;
}
td {
padding: 2px 0 2px 10px;
text-align: right;
@include breakpoint(s) {
width: 50%;
text-align: left;
}
}
td:first-child {
padding: 2px 10px 2px 0;
}
td:last-child {
@include breakpoint(s) {
text-align: right;
}
}
}
.order-total {
color: $color-heading;
font-style: font-style($font-body, $font-weight: bolder);
font-weight: font-weight($font-body, $font-weight: bolder);
}
.shipping-info {
font-size: 0;
width: 66%;
margin-top: $gutter*2;
@include breakpoint(s) {
width: 100%;
}
> div {
display: inline-block;
width: 50%;
vertical-align: top;
font-size: 16px;
@include breakpoint(s) {
text-align: center;
width: 100%;
&:last-child {
margin-top: $gutter;
}
}
}
h2 {
font-size: 24px;
margin-top: 0;
}
}
.order-header {
display: none;
padding-bottom: 30px;
font-style: font-style($font-body);
font-weight: font-weight($font-body);
color: $color-body;
border-bottom: 1px solid $color-border;
@include breakpoint(s-up) {
display: flex;
}
}
.order-header-product {
flex-grow: 1;
}
.order-header-price {
flex-shrink: 0;
// This handles horizontal alignment with line items.
// 100px from line item image, 30px from line item internal spacing.
// Percentage is represented as a fraction and sourced from _line-item.scss.
width: calc((100% - 135px) * 0.3336);
text-align: right;
}
.order-header-quantity {
flex-shrink: 0;
// This handles horizontal alignment with line items.
// 100px from line item image, 35px from line item internal spacing.
// Percentage is represented as a fraction and sourced from _line-item.scss.
width: calc((100% - 135px) * 0.2081);
text-align: right;
}
.order-header-total {
flex-shrink: 0;
// This handles horizontal alignment with line items.
// 100px from line item image, 30px from line item internal spacing.
// Percentage is represented as a fraction and sourced from _line-item.scss.
width: calc((100% - 135px) * 0.1912);
text-align: right;
}
.order-discounts {
color: $color-accent;
}
.template-index {
.shopify-section { margin: 0; }
.main-content {
@include transition(padding 0.2s $ease-out-quad, transform 0.2s $ease-out-quad);
width: 100%;
max-width: 100%;
padding: 0;
margin-bottom: 0;
}
}
.home-module-cta {
margin-top: $gutter-vertical-large;
text-align: center;
}
.home-module-cta-link {
font-size: rem(14px);
text-decoration: none;
text-transform: uppercase;
.accent-style & { color: $color-accent-text; }
}
.home-module-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
}
.collections-list {
}
.collection-list-item {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
text-align: center;
position: relative;
height: 350px;
margin: 60px 0 0;
@include lt-ie9 {
background: none!important; // override inline styles
}
@include breakpoint(s) {
background: none!important; // override inline styles
height: auto;
}
}
.collection-link {
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
z-index: 2;
background: rgba(0,0,0,0.15);
@include breakpoint(s) {
position: relative;
top: auto; right: auto;
bottom: auto; left: auto;
background: none;
}
}
.collection-details {
@include transform(translateY(-50%));
position: absolute;
top: 50%;
width: 100%;
z-index: 5;
padding: 0 $gutter;
@include lt-ie9 {
filter: glow(color=black,strength=1);
}
@include breakpoint(s) {
@include transform(none);
position: relative;
top: auto;
left: auto;
}
h1, .rte {
color: white;
text-shadow: 0px 1px 4px rgba(0,0,0,0.15);
@include breakpoint(s) {
text-shadow: none;
}
}
h1 {
font-size: 32px;
line-height: 40px;
margin: 0;
@include breakpoint(s) {
font-size: 24px;
line-height: 1.2;
color: $color-heading;
margin-top: $gutter/2;
}
}
.rte {
margin-top: $gutter/2;
@include breakpoint(s) {
color: $color-body;
}
}
}
.mobile-collection-image {
display: none;
.no-js & {
display: block;
height: 100%;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
@include lt-ie9 {
display: block;
height: 350px;
width: 100%;
overflow: hidden;
img {
width: 100%;
}
}
@include breakpoint(s) {
display: block;
}
}
$pxu-map-height-small: 500px !default;
$pxu-map-height-medium: 640px !default;
$pxu-map-height-large: 720px !default;
$pxu-map-breakpoint-small: 720px;
$pxu-map-breakpoint-large: 1020px;
$pxu-map-space-small: $gutter;
$pxu-map-space-medium: $gutter;
$pxu-map-space-large: $gutter;
$pxu-map-space-larger: $gutter;
$pxs-map-height-small: 400px !default;
$pxs-map-height-medium: 500px !default;
$pxs-map-height-large: 600px !default;
$pxs-map-breakpoint-small: 680px !default;
$pxs-map-breakpoint-large: 1024px !default;
$pxs-map-space-small: 10px !default;
$pxs-map-space-medium: 20px !default;
$pxs-map-space-large: 25px !default;
$pxs-map-space-larger: 50px !default;
$pxs-map-split-map-width: calc(50% - #{$pxs-map-space-small}) !default;
$pxs-map-split-content-width: calc(50% - #{$pxs-map-space-small}) !default;
$pxs-map-content-max-width: 40% !default;
$pxs-map-content-min-width: 280px !default;
$pxs-map-content-background-color: #fff !default;
$pxs-map-heading-margin: 26px !default;
.pxs-map {
position: relative;
display: flex;
justify-content: space-between;
margin-top: $pxs-map-space-larger;
@media (max-width: $pxs-map-breakpoint-small) {
flex-wrap: wrap;
}
}
.pxs-map-wrapper {
position: relative;
width: 100%;
height: $pxs-map-height-small * 0.7;
padding: 0;
background-size: cover;
@media (min-width: $pxs-map-breakpoint-small) {
height: $pxs-map-height-small;
.pxs-map-section-layout-x-outside-left &,
.pxs-map-section-layout-x-outside-right & {
width: $pxs-map-split-map-width;
}
}
&.pxs-map-wrapper-height-medium {
height: $pxs-map-height-medium * 0.7;
@media (min-width: $pxs-map-breakpoint-small) {
height: $pxs-map-height-medium;
}
}
&.pxs-map-wrapper-height-large {
height: $pxs-map-height-large * 0.7;
@media (min-width: $pxs-map-breakpoint-small) {
height: $pxs-map-height-large;
}
}
.pxs-map-image {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
&[data-rimg="noscript"] {
position: relative;
width: 100%;
height: 100%;
opacity: 1;
object-fit: cover;
}
}
}
.pxs-map-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
.pxs-map-section-layout-x-outside-left &,
.pxs-map-section-layout-x-outside-right & {
display: none;
}
@media (max-width: $pxs-map-breakpoint-small) {
display: none;
}
}
.pxs-map-container {
position: relative;
width: 100%;
height: 100%;
}
.pxs-map-error-message {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 100%;
height: 100%;
padding: $pxs-map-space-medium;
p {
margin: 0;
text-align: center;
}
a {
color: inherit;
}
}
.pxs-map-card-wrapper {
width: 100%;
@media (max-width: $pxs-map-breakpoint-small) {
.pxs-map-section-layout-mobile-above & {
order: -1;
margin-bottom: $pxs-map-space-medium;
}
.pxs-map-section-layout-mobile-below & {
margin-top: $pxs-map-space-medium;
}
}
@media (min-width: $pxs-map-breakpoint-small) {
position: absolute;
top: $pxs-map-space-medium;
right: $pxs-map-space-medium;
bottom: $pxs-map-space-medium;
left: 0;
display: flex;
align-items: flex-start;
justify-content: flex-start;
padding: 0 $pxs-map-space-medium;
.pxs-map-section-layout-x-outside-left &,
.pxs-map-section-layout-x-outside-right & {
position: static;
width: $pxs-map-split-content-width;
padding: 0;
background-color: $pxs-map-content-background-color;
}
.pxs-map-section-layout-x-outside-left & {
order: -1;
}
.pxs-map-section-layout-y-outside-center &,
.pxs-map-section-layout-y-overlay-center & {
align-items: center;
}
.pxs-map-section-layout-y-outside-bottom &,
.pxs-map-section-layout-y-overlay-bottom & {
align-items: flex-end;
}
.pxs-map-section-layout-x-overlay-center & {
justify-content: center;
}
.pxs-map-section-layout-x-overlay-right & {
justify-content: flex-end;
}
}
@media (min-width: $pxs-map-breakpoint-large) {
top: $pxs-map-space-large;
bottom: $pxs-map-space-large;
padding: 0 $pxs-map-space-large;
}
}
.pxs-map-card {
width: 100%;
padding: $pxs-map-space-large;
background-color: $pxs-map-content-background-color;
@media (max-width: $pxs-map-breakpoint-small) {
max-width: 100%;
}
@media (min-width: $pxs-map-breakpoint-small) {
right: auto;
bottom: $pxs-map-space-large;
left: $pxs-map-space-large;
width: auto;
max-width: $pxs-map-content-max-width;
min-width: $pxs-map-content-min-width;
.pxs-map-section-layout-x-outside-left &,
.pxs-map-section-layout-x-outside-right & {
width: 100%;
max-width: 100%;
}
}
}
.pxs-map-card-text-alignment-left {
text-align: left;
}
.pxs-map-card-text-alignment-center {
text-align: center;
}
.pxs-map-card-text-alignment-right {
text-align: right;
}
.pxs-map-card-heading {
margin: 0 0 $pxs-map-heading-margin;
}
.pxs-map-card-content p:last-child {
margin-bottom: 0;
}
.pxs-map-section-layout-x-outside-left,
.pxs-map-section-layout-x-outside-right {
@include breakpoint(s-up) {
max-width: $max-width;
padding: 0 $gutter;
margin: $gutter-vertical-large auto;
.pxs-map-card-wrapper,
.pxs-map-wrapper {
width: 50%;
}
}
}
.pxs-map-section-layout-x-outside-left {
.pxs-map-card {
@include breakpoint(s-up) {
padding: 0 $gutter 0 0;
}
}
}
.pxs-map-section-layout-x-outside-right {
.pxs-map-card {
@include breakpoint(s-up) {
padding: 0 0 0 $gutter;
}
}
}
.pxs-map-card {
padding: $gutter;
}
.pxs-map-card-wrapper {
top: $gutter-vertical-large;
bottom: $gutter-vertical-large;
max-width: $max-width;
margin: 0 auto;
@include breakpoint(s-up) {
padding: 0 $gutter-half 0 $gutter + $gutter-half;
}
}
.pxs-map-card-heading {
@extend %heading-h3;
}
$pxs-newsletter-breakpoint-small: 720px;
$pxs-newsletter-breakpoint-large: 1020px;
// Newsletter variables
$pxs-newsletter-section-width: 100% !default;
$pxs-newsletter-content-width-small: 65% !default;
$pxs-newsletter-content-width-large: 100% !default;
$pxs-newsletter-header-width: 80% !default;
$pxs-newsletter-breakpoint-small: 680px !default;
$pxs-newsletter-breakpoint-large: 1080px !default;
$pxs-newsletter-space-smaller: 12px !default;
$pxs-newsletter-space-small: 20px !default;
$pxs-newsletter-space-medium: 36px !default;
$pxs-newsletter-space-large: 50px !default;
$pxs-newsletter-space-larger: 68px !default;
.pxs-newsletter-section {
position: relative;
width: $pxs-newsletter-section-width;
.newsletter-success {
font-weight: bold;
text-align: center;
}
}
.pxs-newsletter {
position: relative;
display: flex;
align-items: center;
justify-content: center;
max-width: $pxs-newsletter-content-width-large;
padding: $pxs-newsletter-space-large 0 $pxs-newsletter-space-small;
margin: 0 auto;
@media screen and (max-width: $pxs-newsletter-breakpoint-small) {
flex-direction: column;
}
@media (min-width: $pxs-newsletter-breakpoint-large) {
max-width: $pxs-newsletter-content-width-small;
padding-top: $pxs-newsletter-space-larger;
}
}
.pxs-newsletter-figure {
position: relative;
flex-shrink: 1;
order: 0;
margin: 0;
background-size: cover;
@media screen and (max-width: $pxs-newsletter-breakpoint-small) {
.pxs-newsletter-mobile-alignment-bottom & {
order: 1;
}
}
@media screen and (min-width: $pxs-newsletter-breakpoint-small) {
.pxs-newsletter-desktop-alignment-right & {
order: 1;
}
}
}
.pxs-newsletter-content {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
order: 0;
padding: $pxs-newsletter-space-small;
@media screen and (min-width: $pxs-newsletter-breakpoint-small) {
padding: $pxs-newsletter-space-large;
}
}
.pxs-newsletter-image {
display: block;
width: 100%;
opacity: 0;
&[data-rimg="noscript"] {
opacity: 1;
}
}
.pxs-newsletter-header {
margin: 0 auto;
text-align: center;
@media (min-width: $pxs-newsletter-breakpoint-small) {
max-width: $pxs-newsletter-header-width;
}
}
.pxs-newsletter-heading {
margin-top: 0;
margin-bottom: $pxs-newsletter-space-smaller;
}
.pxs-newsletter-text {
margin-top: 0;
margin-bottom: $pxs-newsletter-space-medium;
}
.pxs-newsletter-form {
.contact-form {
margin: 0;
}
}
.pxs-newsletter-form-fields {
display: flex;
align-items: stretch;
justify-content: center;
}
.pxs-newsletter-form-label {
display: none;
}
.pxs-newsletter-form-input {
height: 100%;
margin: 0;
}
.pxs-newsletter-form-button {
height: 100%;
}
.pxs-newsletter {
max-width: 1020px;
padding: 50px 30px;
.pxs-newsletter-content,
.newsletter-section {
width: 100%;
padding: 0;
}
.pxs-newsletter-header {
padding-right: 30px;
padding-left: 30px;
}
.pxs-newsletter-heading {
margin-bottom: 34px;
}
.pxs-newsletter-text {
margin-bottom: 0;
}
.newsletter-section {
.module-inner {
margin-top: 0;
margin-bottom: 0;
}
form {
margin: 20px auto 0;
}
}
.inline-field-submit {
color: $color-button-primary;
background: $color-accent;
&:hover {
color: $color-button-primary;
background: $color-accent-hover;
}
@include breakpoint(s) {
padding-left: 30px;
}
}
}
.pxs-newsletter-figure {
width: 100%;
@include breakpoint(s-up) {
width: 50%;
margin: 0;
}
@include breakpoint(s) {
margin-bottom: 50px;
.pxs-newsletter-mobile-alignment-bottom & {
margin-top: 50px;
margin-bottom: 0;
}
}
}
.pxs-newsletter-figure + .pxs-newsletter-content {
@include breakpoint(s-up) {
width: 50%;
.input-field {
display: block;
width: 100%;
margin-right: 0;
}
.inline-field-submit {
display: block;
width: 100%;
padding-left: 0;
margin-top: $gutter-half;
}
}
}
.template-page {
}
.contact-form-wrapper {
max-width: 640px;
margin: $gutter auto 0;
border-top: 1px solid $color-border;
h2 {
margin-top: 0;
}
.error-message, .success-message {
font-size: 16px;
margin: $gutter 0;
}
}
.template-product {
.main-content { font-size: 0; }
}
.section-product { @extend %clearfix; }
.product-details,
.product-gallery,
.product-wrap {
display: inline-block;
width: 50%;
font-size: rem(16px);
vertical-align: top;
@include breakpoint(s) {
display: block;
width: 100%;
padding: 0;
}
}
.product-gallery {
float: left;
padding-right: $gutter;
@include breakpoint(s) {
float: none;
padding-right: 0;
margin-top: $gutter;
}
}
.product-wrap {
padding-left: $gutter;
@include breakpoint(s) {
padding-top: $gutter;
padding-left: 0;
}
.share-buttons {
margin-top: $gutter-vertical-small;
a { margin-left: 0; }
}
}
.product-details {
padding-left: $gutter;
text-align: left;
@include breakpoint(s) {
padding-right: $gutter;
padding-left: $gutter;
text-align: center;
}
.product-details-centered &,
.product-title-centered & {
display: block;
float: none;
width: 100%;
max-width: $max-width-small;
padding-right: $gutter;
padding-left: $gutter;
margin: 0 auto $gutter-vertical-large;
text-align: center;
}
.vendor {
margin-top: 0;
font-size: 16px;
line-height: 1;
@if $font-meta-capitalize { font-size: 14px; }
~ .product-price {
margin-top: 26px;
@include breakpoint(s) { margin-top: $gutter-half; }
}
}
}
.product-title {
margin-bottom: $gutter-half;
text-align: left;
@include breakpoint(s) { text-align: center; }
.product-details-centered &,
.product-title-centered & { text-align: center; }
}
.product-price {
margin-top: 0;
margin-bottom: 0;
font-size: rem(20px);
.original {
margin-left: 7px;
text-decoration: line-through;
opacity: 0.5;
}
.hidden { display: none; }
}
.product-options {
.product-title-centered & {
.inline-field-wrapper:first-child { margin-top: 0; }
& ~ .product-quantity { margin-top: $gutter; }
}
.select-wrapper {
margin-top: 0;
margin-bottom: 0;
}
.js-required {
display: none;
.js & { display: block; }
}
.no-js-required {
.js & { display: none; }
}
}
.product-quantity-container {
display: flex;
align-items: center;
font-size: 0;
// There is not enough room to display ATC button inline with the QTY widget
// When less than 400px, or when window is between 700px and 850px
@media screen and (min-width: 320px) and (max-width: 430px),
screen and (min-width: 700px) and (max-width: 850px) {
display: block;
}
.product-title-centered & { margin-top: 0; }
}
.product-quantity-label {
display: inline-block;
font-style: font-style($font-body);
font-weight: font-weight($font-body);
}
.product-quantity-input {
display: inline-block;
width: 55px;
margin-top: 0;
margin-left: $gutter;
font-size: rem(14px);
text-align: center;
}
//IE conditional to set product quantity input width
_:-ms-fullscreen, :root .product-quantity-input {
width: 100px;
}
.add-to-cart {
display: inline-block;
width: 100%;
margin-left: $gutter;
font-size: rem(14px);
&:first-child { margin-left: 0; }
// There is not enough room to display ATC button inline with the QTY widget
// When less than 400px, or when window is between 700px and 850px
@media screen and (min-width: 320px) and (max-width: 430px),
screen and (min-width: 700px) and (max-width: 850px) {
display: block;
margin-top: $gutter;
margin-left: 0;
}
}
.product-form-submit-wrap {
position: relative;
.button {
position: relative;
width: 100%;
z-index: 5;
}
}
.add-to-cart-loader { @extend %loader; }
.product-cart-message {
display: none;
margin-top: $gutter-vertical-small;
color: $color-meta;
font-size: rem(16px);
&.error { color: $color-error; }
&.success,
&.error { display: block; }
}
.added-product-name {
font-style: italic;
color: $color-body;
}
.product-more-info,
.product-description { margin-top: $gutter-vertical-small; }
.product-more-info {
padding-top: 20px;
}
.tabs-content + .product-more-info {
margin-top: 0;
}
.product-info-link {
position: relative;
padding-left: 25px;
margin: 12px 0;
&:before {
@include iconFont();
position: absolute;
top: 4px;
left: 0;
color: $color-accent;
}
&:hover:before { color: $color-accent-hover; }
&.info:before { content: "\E101"; }
&.question-mark:before { content: "\E102"; }
&.ruler:before { content: "\E105"; }
&.envelope:before { content: "\E104"; }
&.pencil:before { content: "\E103"; }
&.shirt:before { content: "\E106"; }
}
.product-details-centered {
.product-wrap {
display: block;
width: 100%;
padding-top: 0;
padding-right: 0;
padding-left: 0;
}
.product-gallery,
.product-form,
.product-details,
.product-description,
.product-more-info,
.share-buttons {
float: none;
width: 100%;
max-width: $max-width-small;
padding-right: $gutter;
padding-left: $gutter;
margin-right: auto;
margin-left: auto;
}
.product-gallery { display: block; }
.product-details {
margin-top: 0;
.template-product & { margin-top: $gutter-vertical-large; }
}
.product-quantity { text-align: center; }
.product-description {
margin-top: $gutter-vertical-large;
+ .share-buttons { margin-top: $gutter-vertical-small; }
}
.product-more-info { margin-top: $gutter-vertical-small; }
.tabs-content {
&,
li { margin-bottom: 0; }
}
}
.template-product-slideshow {
.section-product { margin-top: $gutter-vertical-large; }
.main-content {
width: 100%;
max-width: 100%;
padding: 0;
}
@include breakpoint(s) {
.home-slideshow-wrapper + div { padding: 0 $gutter; }
}
.product-description {
margin-top: 0;
@include breakpoint(s) { margin-top: $gutter-vertical-small; }
}
.product-more-info {
margin-top: $gutter-vertical-small;
}
.tabs-content + .product-more-info {
margin-top: 0;
}
.product-details {
float: right;
}
.product-title-centered {
.product-details {
float: none;
}
}
.product-wrap {
display: block;
width: 100%;
max-width: $max-width;
padding: 0 $gutter;
margin: 0 auto;
}
.product-form {
float: right;
width: 50%;
padding-left: $gutter;
clear: right;
@include breakpoint(s) {
float: none;
width: 100%;
padding: 0;
}
}
.product-description {
width: 50%;
@include breakpoint(s) { width: 100%; }
.tabs {
margin-top: 10px;
}
}
.recommended-products {
@extend %main-content;
margin-top: $gutter-vertical-large;
margin-bottom: 0;
}
}
.template-search {
.page-title {
margin-bottom: $gutter*2;
}
}
.search-form {
text-align: center;
font-size: 0;
max-width: 640px;
margin: 0 auto;
}
input[type="text"].search-input {
display: inline-block;
vertical-align: middle;
width: 70%;
font-size: 14px;
@include breakpoint(s) {
width: 100%;
display: block;
}
}
.search-submit {
display: inline-block;
vertical-align: middle;
width: 30%;
padding-left: $gutter/3;
@include breakpoint(s) {
width: 100%;
display: block;
margin-top: $gutter/2;
padding-left: 0;
}
input[type="submit"] {
width: 100%;
}
}
.search-results-wrapper {
margin: $gutter auto 0;
}
.search-results-count {
text-align: center;
margin: $gutter 0 $gutter*2;
ul {
list-style: none;
padding: 0;
}
}
.search-results-pages, .search-results-products {
@include breakpoint(s) {
text-align: center;
}
h3 {
margin: 0 0 $gutter;
}
}
.search-results-products {
font-size: 0;
margin: $gutter*2 (-$gutter) 0;
@include breakpoint(m) {
margin-left: -$gutter/2;
margin-right: -$gutter/2;
}
@include breakpoint(s) {
margin-left: 0;
margin-right: 0;
}
.product-list-item {
width: 33.33%;
@include breakpoint(s) {
width: 100%;
}
}
h3 {
padding: 0 $gutter;
@include breakpoint(m) {
padding: 0 $gutter/2;
}
@include breakpoint(s) {
padding: 0;
}
}
}
.search-results-products-none {
font-size: 16px;
padding: 0 $gutter;
margin-bottom: $gutter*2;
@include breakpoint(s) {
padding: 0;
}
}
.search-results-pages {
padding-top: $gutter*2;
border-top: 1px solid $color-border;
.search-result {
margin-top: $gutter*2;
}
h4 {
font-style: font-style($font-body);
font-weight: font-weight($font-body);
margin: 0 0 8px;
}
.rte {
margin-top: $gutter/2;
}
}
// Sections
.home-left-right-feature {
margin-top: $gutter-vertical-large * 2;
margin-bottom: $gutter-vertical-large * 2;
font-size: 0;
@include breakpoint(s) {
margin-top: $gutter-vertical-large;
margin-bottom: $gutter-vertical-large;
}
.borders & {
padding-top: $gutter-vertical-large;
margin-top: $gutter-vertical-large;
margin-bottom: $gutter-vertical-large;
border-top: 1px solid $color-border;
}
.contrast-style.borders & { border-color: $color-border; }
&:first-child {
padding-top: 0;
margin-top: 0;
border-top: 0;
}
.section-title + { margin-top: $gutter-vertical-large; }
}
.home-left-right-text {
@include breakpoint(s) { margin-top: $gutter-vertical-small; }
.media-aligned-left & { padding-left: $gutter; }
.media-aligned-right & {
position: relative;
left: -50%;
padding-right: $gutter;
@include breakpoint(s) {
left: 0;
float: none;
}
}
> *:first-child { margin-top: 0; }
}
.home-left-right-media {
img {
display: block;
margin: 0 auto;
}
.media-aligned-left & { padding-right: $gutter; }
.media-aligned-right & {
position: relative;
left: 50%;
padding-left: $gutter;
@include breakpoint(s) {
left: 0;
float: none;
}
}
}
.home-left-right-text,
.home-left-right-media {
display: inline-block;
width: 50%;
font-size: 16px;
vertical-align: middle;
@include breakpoint(s) {
display: block;
width: 100%;
}
@include breakpoint(s) {
.media-aligned-right &,
.media-aligned-left & {
padding-right: 0;
padding-left: 0;
}
}
}
.dynamic-collection-list {
padding-right: $gutter-half;
padding-left: $gutter-half;
}
.dynamic-collection-list-items { font-size: 0; }
.dynamic-collection-list-item {
float: left;
width: 100%;
padding: 0 $gutter-half;
margin-top: $gutter-vertical-large;
text-align: center;
.row-of-1 & {
float: none;
max-width: 600px;
margin-right: auto;
margin-left: auto;
}
&:nth-child(-n + 3) { margin-top: 0; }
.row-of-2 & {
width: 50%;
@include breakpoint(s-up) {
&:nth-child(3) {
margin-top: $gutter-vertical-large;
clear: left;
}
}
}
.row-of-3 & {
width: percentage(1 / 3);
&:nth-child(3n+1) { clear: left; }
}
@include breakpoint(s) {
.row-of-1 &,
.row-of-2 &,
.row-of-3 & {
width: 100%;
margin-top: 0;
margin-bottom: $gutter-vertical-large;
&:last-child { margin-bottom: 0; }
}
}
}
.dynamic-featured-collection-title,
.dynamic-featured-collection-count { @extend %heading-h6; }
.dynamic-featured-collection-title {
margin: $gutter-vertical-small 0 0;
a { color: $color-heading; }
}
.dynamic-featured-collection-count {
display: block;
margin-top: $gutter-vertical-small / 2;
}
.home-featured-blog {
padding-right: $gutter-half;
padding-left: $gutter-half;
font-size: 0;
}
.home-featured-blog-post {
display: inline-block;
width: 50%;
padding: 0 $gutter-half;
margin-bottom: $gutter-vertical-large;
text-align: center;
vertical-align: top;
@include breakpoint(s) {
display: block;
width: 100%;
}
}
.featured-post-title {
@extend %heading-h5;
margin-top: 0;
color: $color-accent;
}
.featured-post-date {
margin: 0 0 $gutter-vertical-small;
font-size: rem(16px);
color: $color-meta;
}
.featured-post-image {
margin: $gutter-vertical-small 0 0;
img {
display: block;
max-width: 100%;
margin: 0 auto;
}
}
.featured-post-excerpt {
margin-top: $gutter-half;
font-size: rem(16px);
}
.dynamic-featured-collection {
padding-right: 0;
padding-left: 0;
.collection-products { margin: 0; }
.rows-of-3 & article {
width: percentage(1 / 3);
&:nth-child(n + 4) { margin-top: $gutter-vertical-large; }
}
.rows-of-4 & article {
width: 25%;
&:nth-child(n + 5) { margin-top: $gutter-vertical-large; }
}
.product-list-item {
margin-bottom: 0;
@include breakpoint(s) {
width: 100%;
margin-top: $gutter-vertical-large;
&:first-child { margin-top: 0; }
}
}
}
.home-order-now {
@extend %clearfix;
.section-title { margin-top: 0; }
.vendor { margin: ($gutter-vertical-small / 2) 0 $gutter-vertical-small; }
.product-details {
h2 {
margin: 0;
font-size: 24px;
}
}
.product-price { margin-top: $gutter-vertical-small; }
.product-info-link:before {
.contrast-style & { color: $color-accent; }
}
}
.home-full-width-feature {
position: relative;
.feature-image {
display: block;
margin: 0 auto;
}
&.full-width-background {
background: {
position: 50% 50%;
repeat: no-repeat;
size: cover;
}
.feature-image {
max-height: 100vh;
opacity: 0;
.no-js & {
opacity: 1;
}
}
}
&.text-overlay {
min-height: 300px;
overflow: hidden;
@media (max-width: 500px) { min-height: 400px; }
}
}
.home-full-width-feature-link-wrapper {
display: block;
width: 100%;
height: 100%;
color: currentColor;
text-decoration: none;
&:hover {
color: currentColor;
}
}
.home-full-width-feature-content {
position: relative;
z-index: 3;
text-align: center;
.full-width-background & {
position: absolute;
top: 50%;
right: 0;
left: 0;
transform: translateY(-50%);
}
.rte {
margin-top: $gutter-vertical-small;
font-size: rem(20px);
@include breakpoint(s) { font-size: rem(18px); }
}
.full-width-regular & .feature-image {
margin-top: $gutter-vertical-large;
}
> *:first-child { margin-top: 0; }
@include breakpoint(s) {
.black-style & {
&.module-inner,
h1,
h2,
h3,
h4,
h5,
h6 { color: $color-body; }
.button { color: $color-button-primary; }
}
}
}
.full-width-highlight .feature-image {
max-width: 100%;
margin: $gutter-vertical-large auto;
}
.home-inline-features {
font-size: 0;
text-align: center;
}
.home-inline-feature {
display: inline-block;
width: percentage(1 / 3);
font-size: rem(16px);
vertical-align: top;
@include breakpoint(s) {
display: block;
width: 100%;
padding-right: 0;
padding-left: 0;
}
.feature-title {
@extend %heading-h4;
margin-top: 0;
}
}
.home-inline-image {
height: auto;
width: 100%;
margin-bottom: $gutter;
}
.home-inline-image-placeholder-container {
position:relative;
margin-left: auto;
margin-right: auto;
margin-bottom: $gutter;
height: 0px;
padding: 0;
svg {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
}
}
.dynamic-logo-list {
font-size: 0;
text-align: center;
}
.dynamic-logo-list-item {
font-size: rem(16px);
vertical-align: middle;
.rows-of-4 & { width: 25%; }
.rows-of-3 & { width: percentage(1 / 3); }
.rows-of-2 & { width: 50%; }
.rows-of-4 &,
.rows-of-3 & {
@include breakpoint(s) { width: 50%; }
}
img {
display: block;
margin: 0 auto;
}
}
.home-promotion {
font-size: 0;
.module-inner {
max-width: $max-width-large;
@include breakpoint(s) {
@include flexbox();
flex-direction: column;
}
}
}
.home-promotion-text,
.home-promotion-image {
display: inline-block;
width: 50%;
font-size: rem(16px);
vertical-align: middle;
@include breakpoint(s) {
display: block;
width: 100%;
text-align: center;
}
}
.home-promotion-text {
padding-right: $gutter;
.feature-title,
.feature-subtitle,
p {
margin: $gutter-vertical-small 0;
color: currentColor;
&:first-child { margin-top: 0; }
&:last-child { margin-bottom: 0; }
}
.feature-title {
@include font($font-heading);
font-size: 3.5rem;
@include breakpoint(m) {
font-size: 2rem;
}
}
.feature-subtitle {
@include font($font-heading);
font-size: 2.75rem;
@include breakpoint(m) {
font-size: 1.75rem;
}
}
p {
font-size: rem(32px);
@include breakpoint(m) { font-size: rem(20px); }
}
.button {
margin-top: $gutter-vertical-small / 2;
border: 0;
}
@include breakpoint(s) {
@include order(2);
padding: 0;
}
}
.home-promotion-image {
padding-left: $gutter;
text-align: right;
@include breakpoint(s) {
@include order(1);
padding: 0;
margin-bottom: $gutter;
text-align: center;
}
}
$local-avatar-large: 60px;
$local-avatar-small: 40px;
.dynamic-testimonials {
font-size: 0;
.grid-of-1 & { text-align: center; }
}
.home-testimonial {
position: relative;
float: left;
width: 50%;
padding: 0 $gutter;
margin-bottom: $gutter-vertical-large;
font-size: rem(16px);
text-align: left;
&:nth-of-type(2n + 1) { clear: left; }
@include breakpoint(s) {
width: 100%;
padding: 0;
}
.grid-of-1 & {
float: none;
width: 90%;
margin-right: auto;
margin-left: auto;
@include breakpoint(s) { width: 100%; }
}
img {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
&[data-rimg="noscript"] {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 1;
object-fit: cover;
}
}
}
.home-testimonial-avatar {
position: absolute;
top: 0;
left: $gutter;
width: $local-avatar-large;
height: $local-avatar-large;
background-position: center;
background-size: cover;
border-radius: 50%;
.grid-of-1 & {
top: 7px;
left: $gutter;
@include breakpoint(s) {
top: 0;
left: 0;
}
}
@include breakpoint(s) {
left: 0;
width: $local-avatar-small;
height: $local-avatar-small;
}
}
.home-testimonial-quote {
margin: 0;
font-size: rem(20px);
.grid-of-1 & {
font-size: rem(24px);
@include breakpoint(s) { font-size: rem(20px); }
}
@include breakpoint(s) {
padding: 0 $gutter-half;
font-size: rem(18px);
}
}
.home-testimonial-quote-source {
margin: 20px 0 0;
font-style: font-style($font-body, $font-weight: bolder);
font-weight: font-weight($font-body, $font-weight: bolder);
color: $color-heading;
.contrast-style & { color: $color-heading; }
@include breakpoint(s) { padding: 0 $gutter-half; }
}
.has-avatar {
.home-testimonial-quote-source,
.home-testimonial-quote {
margin-left: $gutter + $local-avatar-large;
@include breakpoint(s) {
padding-right: 0;
padding-left: 0;
margin-left: $gutter + $local-avatar-small;
}
}
}
.home-text-feature {
margin-top: $gutter-vertical-large;
margin-bottom: $gutter-vertical-large;
@include breakpoint(s) {
margin-top: $gutter-vertical-medium;
margin-bottom: $gutter-vertical-medium;
}
.borders & {
padding-top: $gutter-vertical-large;
border-top: 1px solid $color-border;
@include breakpoint(s) { padding-top: $gutter-vertical-medium; }
}
.contrast-style.borders & { border-color: $color-border; }
&:first-child {
padding-top: 0;
margin-top: 0;
border-top: 0;
}
.feature-title {
max-width: $max-width-small;
margin-top: 0;
margin-right: auto;
margin-left: auto;
}
.feature-title,
.home-text-content { text-align: center; }
}
.dynamic-twitter {
padding-right: $gutter;
padding-left: $gutter;
overflow: hidden;
text-align: center;
.home-module-cta {
padding-top: rem(50px);
margin-top: 0;
}
.section-title {
text-decoration: none;
a { color: currentColor; }
}
}
.dynamic-twitter-tweets {
max-width: 870px;
height: auto;
margin-right: auto;
margin-left: auto;
font-size: rem(20px);
a {
color: currentColor;
text-decoration: underline;
}
.tweet {
//emojis appear as images in tweets, so they need to be handled
img {
display: inline-block;
height: rem(20px);
margin-top: -0.3125rem;
vertical-align: baseline;
}
}
@media (min-width: 721px) {
display: flex;
&.onboarding,
&:not(.has-image) {
display: block;
}
.media {
float: left;
padding-right: 2.75rem;
img {
position: relative;
top: 50%;
max-width: 300px;
max-height: 250px;
height: auto;
transform: translateY(-50%);
}
}
&.has-image {
.tweet {
text-align: left;
}
}
.tweet {
margin: 0;
align-self: center;
}
}
@media (max-width: 720px) {
display: block;
.media {
display: block;
float: none;
margin: 0 auto;
img {
max-width: 100%;
margin: 0 auto;
}
}
.tweet {
display: block;
width: 100%;
margin-top: rem(30px);
}
&.has-image {
.tweet {
text-align: center;
}
}
}
}
// Much of this file is directly copied from the pxs-video shared section
// ====================
$pxs-video-heading-font-size: 34px !default;
$pxs-video-text-font-size: 24px !default;
$pxs-video-overlay-heading-font-size: 24px !default;
$pxs-video-overlay-text-font-size: 18px !default;
$pxs-video-overlay-style-primary: #000 !default;
$pxs-video-overlay-style-secondary: #fff !default;
@keyframes loading-opacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.pxs-video-content-width {
margin-left: auto;
margin-right: auto;
max-width: 1000px;
}
.pxs-video-heading {
font-size: $pxs-video-heading-font-size;
}
.pxs-video-text {
font-size: $pxs-video-text-font-size;
}
.video-container {
position: relative;
width: 100%;
height: 0;
&.video-aspect-ratio-16-9 {
padding-bottom: percentage(9 / 16);
}
&.video-aspect-ratio-21-9 {
padding-bottom: percentage(9 / 21);
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
}
.video-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
opacity: 1;
&::after {
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
background-color: inherit;
content: "";
}
.video-transitioning &,
.video-playing & {
pointer-events: none;
opacity: 0;
transition: opacity 200ms ease-in-out;
}
.video-playing & {
z-index: 0;
}
img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
object-fit: cover;
&[data-rimg="noscript"] {
opacity: 1;
}
}
}
.video-overlay-header {
display: flex;
flex-direction: column;
.video-overlay-header-position-below-button & {
order: 2;
}
}
.video-overlay-heading {
font-size: $pxs-video-overlay-heading-font-size;
}
.video-overlay-text {
font-size: $pxs-video-overlay-text-font-size;
}
.video-play-button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
padding: 0;
margin: 0;
cursor: pointer;
background-color: $pxs-video-overlay-style-primary;
border: 0;
border-radius: 25px;
outline: none;
.video-overlay-button-primary & {
background-color: $pxs-video-overlay-style-primary;
}
.video-overlay-button-secondary & {
background-color: $pxs-video-overlay-style-secondary;
}
}
.video-play-icon {
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 10px;
height: auto;
margin-left: 2px;
color: $pxs-video-overlay-style-secondary;
opacity: 1;
transform: translate(-50%, -50%);
.video-overlay-button-primary & {
color: $pxs-video-overlay-style-secondary;
}
.video-overlay-button-secondary & {
color: $pxs-video-overlay-style-primary;
}
.video-loading & {
opacity: 0;
transition: opacity 200ms ease-in-out;
}
}
.video-loading-icon {
position: absolute;
top: 50%;
left: 50%;
display: block;
opacity: 0;
transform: translate(-50%, -50%);
.video-overlay-button-primary & {
color: $pxs-video-overlay-style-secondary;
}
.video-overlay-button-secondary & {
color: $pxs-video-overlay-style-primary;
}
.video-loading & {
opacity: 1;
transition: opacity 200ms ease-in-out;
}
}
.video-loading-icon-phalange {
animation: loading-opacity 800ms linear infinite;
// First phalange gets no delay
@for $i from 2 through 8 {
&:nth-child(#{$i}) {
animation-delay: (100ms * ($i - 1));
}
}
}
//===================
// Below here is the startup-specific styling.
.pxs-video {
.video-overlay-header {
// this defined width is to resolve a rendering issue in IE11
width: 100%;
text-align: center;
padding: 0 30px;
overflow-wrap: break-word;
}
.video-overlay-heading {
@extend %heading-font;
@include font($font-heading);
margin: 20px 0px;
line-height: 1.25;
font-size: 2.5rem;
@include breakpoint(s) {
font-size: 1.875rem;
}
@if $font-heading-capitalize {
letter-spacing: 0.1em;
text-transform: uppercase;
}
}
.video-overlay-text {
font-size: 1.25rem;
margin-bottom: 20px;
@include breakpoint(s) {
display: none;
}
}
}
.video-overlay-button-primary {
@include video-button($color-button-primary, $color-accent, $color-accent-hover);
}
.video-overlay-button-secondary {
@include video-button($color-accent, $color-body-background, morph($color-body-background));
}
.pxs-video-content-width {
max-width: $max-width;
padding: 0 $gutter $gutter-vertical-large;
.video-container:first-child {
margin-top: $gutter-vertical-large;
}
}
.pxs-video-header {
text-align: center;
max-width: $max-width;
padding: 0 $gutter;
margin: $gutter-vertical-large auto;
.pxs-video-content-width & {
padding: 0;
}
}
.pxs-video-heading {
font-size: 2.5rem;
margin-bottom: 20px;
@include breakpoint(s) {
font-size: 1.875rem;
}
}
.pxs-video-text {
font-size: 1.25rem;
@include breakpoint(s) {
font-size: 1.125rem;
}
}
#shopify-section-template-cart {
@include transition(opacity 120ms $ease-out-quad);
opacity: 1;
width: 80vw;
margin: 0 auto;
&.cart-updating {
opacity: 0.1;
}
}
.cart-header {
display: none;
padding-bottom: 30px;
font-style: font-style($font-body);
font-weight: font-weight($font-body);
color: $color-body;
border-bottom: 1px solid $color-border;
@include breakpoint(s-up) {
display: flex;
}
}
.cart-header-product {
flex-grow: 1;
}
.cart-header-price {
flex-shrink: 0;
// This handles horizontal alignment with line items.
// 100px from line item image, 30px from line item internal spacing.
// Percentage is represented as a fraction and sourced from _line-item.scss.
width: calc((100% - 135px) * 0.3336);
text-align: right;
}
.cart-header-quantity {
flex-shrink: 0;
// This handles horizontal alignment with line items.
// 100px from line item image, 35px from line item internal spacing.
// Percentage is represented as a fraction and sourced from _line-item.scss.
width: calc((100% - 135px) * 0.2081);
text-align: right;
}
.cart-header-total {
flex-shrink: 0;
// This handles horizontal alignment with line items.
// 100px from line item image, 30px from line item internal spacing.
// Percentage is represented as a fraction and sourced from _line-item.scss.
width: calc((100% - 135px) * 0.1912);
text-align: right;
}
.cart-discounts {
margin-bottom: 40px;
color: $color-accent;
@include breakpoint(s-up) {
margin-bottom: 15px;
}
}
.cart-discount {
display: flex;
justify-content: flex-end;
+ .cart-discount {
margin-top: 5px;
}
}
.cart-discount-title {
margin-right: 30px;
}
// Password page
$local-max-width: 700px + $gutter-double;
.static-password {
display: table;
width: 100%;
height: 100%;
max-width: $max-width;
margin: 0 auto;
text-align: center;
// Page layout
.main-header-section,
.main-content,
.password-main-footer {
display: table-row;
}
.password-inner,
.main-header-wrapper {
display: table-cell;
vertical-align: middle;
}
.errors ul {
padding-left: 0;
margin-top: 0;
list-style: none;
}
}
.static-password {
.main-header-section { height: 100px + ($gutter-vertical-large * 2) }
.branding {
float: none;
.logo {
height: auto;
img {
@include transform(translateY(0));
top: 0;
}
}
.branding-title { line-height: 1.1; }
}
}
.password-main-content {
display: table-cell;
padding: 0;
vertical-align: middle;
.hidden { display: none; }
.visible { display: block; }
.module-inner {
margin-top: $gutter-vertical-small;
margin-bottom: $gutter-vertical-small;
}
.inline-field-wrapper { margin-top: 0; }
}
.password-title,
.password-message,
.password-page-action,
.password-main-content .newsletter-section,
.password-form-wrapper {
max-width: 600px;
margin-right: auto;
margin-left: auto;
}
.password-message,
.password-page-action {
margin-top: $gutter-vertical-small;
margin-bottom: $gutter-vertical-small;
}
.password-title {
font-size: rem(42px);
@include breakpoint(m) { font-size: rem(32px); }
}
.password-main-footer {
height: 150px;
color: $color-heading;
.main-footer {
padding: $gutter-vertical-small $gutter;
border-top: 1px solid $color-border;
}
a {
color: $color-body;
&:hover { color: $color-heading; }
}
}
// Slideshow
$slideshow-speed: 0.3s;
$slideshow-gutter: 70px + $gutter;
$local-dot-size: 15px;
$local-pagination-size: 70px;
.full-slideshow-wrapper {
position: relative;
overflow: hidden;
&.content-width { padding: $gutter-vertical-small }
&.full-width {
width: 100%;
.template-product-slideshow & { margin-top: $gutter-vertical-small; }
}
.flickity-viewport { @include transition(height $slideshow-speed $ease-out-quad); }
&.transition-fade {
.flickity-slider {
transform: none !important; //scss-lint:disable ImportantRule
}
.slideshow-slide {
@include transition(opacity $slideshow-speed $ease-out-quad);
left: 0 !important; //scss-lint:disable ImportantRule
z-index: -1;
opacity: 0;
//scss-lint:disable NestingDepth
&.is-selected {
z-index: 0;
opacity: 1;
}
}
}
@include breakpoint(s-up){
&.content-width {
max-width: $max-width;
padding: $gutter-vertical-large $gutter;
margin: 0 auto;
}
&.opening-screen {
&,
.full-slideshow-content,
.slideshow-slide {
height: 100vh;
&.use-thumbnail-pagination {
// $local-pagination-size + thumbnail (padding + border) + outer margin
height: calc(100vh - #{$local-pagination-size + 40px});
}
}
}
}
}
.full-slideshow-loader {
@extend %loader;
right: auto;
left: 50%;
z-index: 1;
border-color: currentColor;
border-top-color: transparent;
.flickity-enabled &,
.no-js & {
display: none;
}
}
.full-slideshow-content { z-index: 2; }
// Individual Slide
.slideshow-slide {
@include transition(opacity $slideshow-speed $ease-out-quad);
position: absolute;
width: 100%;
background: {
color: $color-body-background;
position: center center;
repeat: no-repeat;
size: cover;
}
opacity: 0;
@include breakpoint(s-up) { min-height: 200px; }
&:first-of-type {
position: relative;
}
> a {
display: block;
}
.full-slideshow-single-slide &,
.flickity-enabled & {
height: auto;
opacity: 1;
}
.content-width & {
background-size: contain;
@include breakpoint(s) { background-size: cover; }
}
&.onboarding {
.full-bleed &,
.opening-screen & {
background-color: $color-onboarding-background;
}
}
@include breakpoint(s) { height: initial; }
&.has-text {
min-height: 400px;
@include breakpoint(s) {
background: none !important; // override inline styles
}
}
.no-js & {
opacity: 1;
}
}
// Slideshow image
.slide-image {
display: block;
width: 100%;
max-width: 100%;
height: auto;
margin-right: auto;
margin-left: auto;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
opacity: 0;
.has-text & {
@include breakpoint(s) { opacity: 1; }
}
.full-bleed & {
max-height: inherit;
min-height: 200px;
}
.opening-screen & {
height: 100%;
}
.template-product-slideshow .content-width &,
.template-product-slideshow .full-width &,
.no-js & {
opacity: 1;
}
}
// Slideshow navigation
.flickity-prev-next-button {
color: currentColor;
@include breakpoint(s) {
.template-index & { color: $color-heading; }
svg {
left: 0;
width: 40px;
height: 40px;
padding: 10px;
margin-top: -20px;
background-color: rgba($color-white, 0.3);
border-radius: 50%;
}
&.next {
right: 10px;
.content-width & { right: -10px; }
}
&.previous {
left: 10px;
.content-width & { left: -10px; }
}
}
}
// Slideshow pagination
.flickity-page-dots {
bottom: 0;
padding-top: $gutter-vertical-small;
padding-bottom: $gutter-vertical-small;
font-size: 0;
color: currentColor;
text-align: center;
@include breakpoint(s) {
bottom: $gutter-vertical-small;
.template-index & { color: $color-heading; }
}
.flickity-enabled & { visibility: visible; }
.dot {
width: $local-dot-size;
height: $local-dot-size;
background: transparent;
border: 1px solid currentColor;
border-radius: 100%;
&.is-selected { background: currentColor; }
}
}
// Used when 'Use thumbnails for pagination' is active
.full-slideshow-pagination {
width: 100%;
padding-right: $gutter;
padding-left: $gutter;
margin: ($gutter-vertical-small - 5px) auto;
font-size: 0;
text-align: center;
&.content-width {
max-width: $max-width + $gutter-double;
margin-top: 0;
}
@include breakpoint(s-up) { height: 80px; }
}
.slideshow-pagination-slide {
display: inline-block;
padding: 4px;
margin-right: 5px;
margin-left: 5px;
vertical-align: middle;
border: 1px solid transparent;
&.is-selected {
border: 1px solid $color-border;
&:active,
&:focus { outline: 0;}
}
img {
pointer-events: none;
}
@include breakpoint(s-up) {
margin-right: 10px;
margin-left: 10px;
}
}
.slide-pagination-image {
display: block;
max-width: $local-pagination-size / 2;
max-height: $local-pagination-size / 2;
@include breakpoint(s-up) {
max-width: $local-pagination-size;
max-height: $local-pagination-size;
}
}
$slideshow-gutter: 70px + $gutter;
// Slideshow text
.slide-text {
@include transform(translate(-50%, -50%));
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
width: 100%;
max-width: 1200px;
padding: $gutter-vertical-small $slideshow-gutter ($local-dot-size + ($gutter-vertical-small * 2));
.text-aligned-center & { text-align: center; }
.text-aligned-right & { text-align: right; }
@include breakpoint(s) {
padding: $gutter-vertical-medium ($slideshow-gutter / 2) ($gutter-vertical-medium + $local-dot-size + ($gutter-vertical-small * 2));
.content-width & {
padding-right: $gutter;
padding-left: $gutter;
}
.has-image & {
@include transform(translate(0));
position: relative;
top: 0;
left: 0;
}
}
@include breakpoint(s-up) {
padding-top: $gutter-vertical-large;
padding-bottom: $gutter-vertical-large;
.text-aligned-right & { padding-left: 30%; }
.text-aligned-left & { padding-right: 30%; }
}
}
.slide-title,
.slide-subtitle,
.slide-caption {
margin: 15px 0;
color: $color-heading;
@include breakpoint(s-up) {
//scss-lint:disable ImportantRule
//Important is required to override QualifyingSelector of .default h1
color: currentColor !important;
.slide-text-use-shadows & {
text-shadow: 0 2px 7px rgba($color-black, 0.15);
}
}
&:first-child { margin-top: 0; }
&:last-child { margin-bottom: 0; }
}
.slide-title,
.slide-subtitle {
font-size: rem(56px);
@include breakpoint(m) {
font-size: rem(46px);
}
@media (max-width: 860px) {
font-size: rem(32px);
}
@include breakpoint(s) {
font-size: rem(32px);
}
}
.slide-title {
font-style: font-style($font-body, $font-weight: bolder);
font-weight: font-weight($font-body, $font-weight: bolder);
}
.slide-subtitle {
font-style: font-style($font-body);
font-weight: font-weight($font-body);
}
.slide-caption {
font-size: rem(30px);
p {
margin-top: 0;
margin-bottom: 0;
}
@include breakpoint(m) { font-size: rem(26px); }
@include breakpoint(s) { font-size: 18px; }
}
.slide-button {
@include transition(color 0.2s $ease-out-quad, background 0.2s $ease-out-quad);
margin-top: 0;
border: 0;
}