// 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?953') 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?953') 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; }