/** * Swiper 6.7.0 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2021 Vladimir Kharlampidi * * Released under the MIT License * * Released on: May 31, 2021 */ @font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA') format('woff');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper-container{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-container-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-container-multirow>.swiper-wrapper{flex-wrap:wrap}.swiper-container-multirow-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-container-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-container-pointer-events{touch-action:pan-y}.swiper-container-pointer-events.swiper-container-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-container-3d{perspective:1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-container-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-container-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-container-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-container-horizontal.swiper-container-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-container-vertical.swiper-container-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;text-transform:none;font-variant:initial;line-height:1}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-container-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-container-rtl .swiper-button-prev:after{content:'next'}.swiper-button-next.swiper-button-white,.swiper-button-prev.swiper-button-white{--swiper-navigation-color:#ffffff}.swiper-button-next.swiper-button-black,.swiper-button-prev.swiper-button-black{--swiper-navigation-color:#000000}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:50%;background:#000;opacity:.2}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet-active{opacity:1;background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:6px 0;display:block}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 4px}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progressbar,.swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-container-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-white{--swiper-pagination-color:#ffffff}.swiper-pagination-black{--swiper-pagination-color:#000000}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;animation:swiper-preloader-spin 1s infinite linear;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{100%{transform:rotate(360deg)}}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-container-fade.swiper-container-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube{overflow:visible}.swiper-container-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-container-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-cube.swiper-container-rtl .swiper-slide{transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-container-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-container-flip{overflow:visible}.swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden} .ss-main{position:relative;display:inline-block;user-select:none;color:#666;width:100%}.ss-main .ss-single-selected{display:flex;cursor:pointer;width:100%;height:30px;padding:6px;border:1px solid #dcdee2;border-radius:4px;background-color:#fff;outline:0;box-sizing:border-box;transition:background-color .2s}.ss-main .ss-single-selected.ss-disabled{background-color:#dcdee2;cursor:not-allowed}.ss-main .ss-single-selected.ss-open-above{border-top-left-radius:0px;border-top-right-radius:0px}.ss-main .ss-single-selected.ss-open-below{border-bottom-left-radius:0px;border-bottom-right-radius:0px}.ss-main .ss-single-selected .placeholder{display:flex;flex:1 1 100%;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;width:calc(100% - 30px);line-height:1em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.ss-main .ss-single-selected .placeholder *{display:flex;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:auto}.ss-main .ss-single-selected .placeholder .ss-disabled{color:#dedede}.ss-main .ss-single-selected .ss-deselect{display:flex;align-items:center;justify-content:flex-end;flex:0 1 auto;margin:0 6px 0 6px;font-weight:bold}.ss-main .ss-single-selected .ss-deselect.ss-hide{display:none}.ss-main .ss-single-selected .ss-arrow{display:flex;align-items:center;justify-content:flex-end;flex:0 1 auto;margin:0 6px 0 6px}.ss-main .ss-single-selected .ss-arrow span{border:solid #666;border-width:0 2px 2px 0;display:inline-block;padding:3px;transition:transform .2s, margin .2s}.ss-main .ss-single-selected .ss-arrow span.arrow-up{transform:rotate(-135deg);margin:3px 0 0 0}.ss-main .ss-single-selected .ss-arrow span.arrow-down{transform:rotate(45deg);margin:-3px 0 0 0}.ss-main .ss-multi-selected{display:flex;flex-direction:row;cursor:pointer;min-height:30px;width:100%;padding:0 0 0 3px;border:1px solid #dcdee2;border-radius:4px;background-color:#fff;outline:0;box-sizing:border-box;transition:background-color .2s}.ss-main .ss-multi-selected.ss-disabled{background-color:#dcdee2;cursor:not-allowed}.ss-main .ss-multi-selected.ss-disabled .ss-values .ss-disabled{color:#666}.ss-main .ss-multi-selected.ss-disabled .ss-values .ss-value .ss-value-delete{cursor:not-allowed}.ss-main .ss-multi-selected.ss-open-above{border-top-left-radius:0px;border-top-right-radius:0px}.ss-main .ss-multi-selected.ss-open-below{border-bottom-left-radius:0px;border-bottom-right-radius:0px}.ss-main .ss-multi-selected .ss-values{display:flex;flex-wrap:wrap;justify-content:flex-start;flex:1 1 100%;width:calc(100% - 30px)}.ss-main .ss-multi-selected .ss-values .ss-disabled{display:flex;padding:4px 5px;margin:2px 0px;line-height:1em;align-items:center;width:100%;color:#dedede;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes scaleIn{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}@keyframes scaleOut{0%{transform:scale(1);opacity:1}100%{transform:scale(0);opacity:0}}.ss-main .ss-multi-selected .ss-values .ss-value{display:flex;user-select:none;align-items:center;font-size:12px;padding:3px 5px;margin:3px 5px 3px 0px;color:#fff;background-color:#5897fb;border-radius:4px;animation-name:scaleIn;animation-duration:.2s;animation-timing-function:ease-out;animation-fill-mode:both}.ss-main .ss-multi-selected .ss-values .ss-value.ss-out{animation-name:scaleOut;animation-duration:.2s;animation-timing-function:ease-out}.ss-main .ss-multi-selected .ss-values .ss-value .ss-value-delete{margin:0 0 0 5px;cursor:pointer}.ss-main .ss-multi-selected .ss-add{display:flex;flex:0 1 3px;margin:9px 12px 0 5px}.ss-main .ss-multi-selected .ss-add .ss-plus{display:flex;justify-content:center;align-items:center;background:#666;position:relative;height:10px;width:2px;transition:transform .2s}.ss-main .ss-multi-selected .ss-add .ss-plus:after{background:#666;content:"";position:absolute;height:2px;width:10px;left:-4px;top:4px}.ss-main .ss-multi-selected .ss-add .ss-plus.ss-cross{transform:rotate(45deg)}.ss-content{position:absolute;width:100%;margin:-1px 0 0 0;box-sizing:border-box;border:solid 1px #dcdee2;z-index:1010;background-color:#fff;transform-origin:center top;transition:transform .2s, opacity .2s;opacity:0;transform:scaleY(0)}.ss-content.ss-open{display:block;opacity:1;transform:scaleY(1)}.ss-content .ss-search{display:flex;flex-direction:row;padding:8px 8px 6px 8px}.ss-content .ss-search.ss-hide{height:0px;opacity:0;padding:0px 0px 0px 0px;margin:0px 0px 0px 0px}.ss-content .ss-search.ss-hide input{height:0px;opacity:0;padding:0px 0px 0px 0px;margin:0px 0px 0px 0px}.ss-content .ss-search input{display:inline-flex;font-size:inherit;line-height:inherit;flex:1 1 auto;width:100%;min-width:0px;height:30px;padding:6px 8px;margin:0;border:1px solid #dcdee2;border-radius:4px;background-color:#fff;outline:0;text-align:left;box-sizing:border-box;-webkit-box-sizing:border-box;-webkit-appearance:textfield}.ss-content .ss-search input::placeholder{color:#8a8a8a;vertical-align:middle}.ss-content .ss-search input:focus{box-shadow:0 0 5px #5897fb}.ss-content .ss-search .ss-addable{display:inline-flex;justify-content:center;align-items:center;cursor:pointer;font-size:22px;font-weight:bold;flex:0 0 30px;height:30px;margin:0 0 0 8px;border:1px solid #dcdee2;border-radius:4px;box-sizing:border-box}.ss-content .ss-addable{padding-top:0px}.ss-content .ss-list{max-height:200px;overflow-x:hidden;overflow-y:auto;text-align:left}.ss-content .ss-list .ss-optgroup .ss-optgroup-label{padding:6px 10px 6px 10px;font-weight:bold}.ss-content .ss-list .ss-optgroup .ss-option{padding:6px 6px 6px 25px}.ss-content .ss-list .ss-optgroup-label-selectable{cursor:pointer}.ss-content .ss-list .ss-optgroup-label-selectable:hover{color:#fff;background-color:#5897fb}.ss-content .ss-list .ss-option{padding:6px 10px 6px 10px;cursor:pointer;user-select:none}.ss-content .ss-list .ss-option *{display:inline-block}.ss-content .ss-list .ss-option:hover,.ss-content .ss-list .ss-option.ss-highlighted{color:#fff;background-color:#5897fb}.ss-content .ss-list .ss-option.ss-disabled{cursor:not-allowed;color:#dedede;background-color:#fff}.ss-content .ss-list .ss-option:not(.ss-disabled).ss-option-selected{color:#666;background-color:rgba(88,151,251,0.1)}.ss-content .ss-list .ss-option.ss-hide{display:none}.ss-content .ss-list .ss-option .ss-search-highlight{background-color:#fffb8c} /* NEW BREAKPOINTS */ /* Document * ========================================================================== */ /** * 1. Correct the line height in all browsers. */ html { line-height: 1.15; /* 1 */ } /* Sections * ========================================================================== */ /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Edge, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content * ========================================================================== */ /** * Remove the margin on nested lists in Chrome, Edge, IE, and Safari. */ dl dl, dl ol, dl ul, ol dl, ul dl { margin: 0; } /** * Remove the margin on nested lists in Edge 18- and IE. */ ol ol, ol ul, ul ol, ul ul { margin: 0; } /** * 1. Add the correct box sizing in Firefox. * 2. Correct the inheritance of border color in Firefox. * 3. Show the overflow in Edge 18- and IE. */ hr { box-sizing: content-box; /* 1 */ color: inherit; /* 2 */ height: 0; /* 1 */ overflow: visible; /* 3 */ } /** * Add the correct display in IE. */ main { display: block; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics * ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } /** * Add the correct text decoration in Edge 18-, IE, and Safari. */ abbr[title] { text-decoration: underline; text-decoration: underline dotted; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /* Embedded content * ========================================================================== */ /** * Add the correct display in IE 9-. */ audio, video { display: inline-block; } /** * Add the correct display in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** * Remove the border on images within links in IE 10-. */ img { border-style: none; } /** * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } /* Tabular data * ========================================================================== */ /** * 1. Correct table border color inheritance in all Chrome, Edge, and Safari. * 2. Remove text indentation from table contents in Chrome, Edge, and Safari. */ table { border-color: inherit; /* 1 */ text-indent: 0; /* 2 */ } /* Forms * ========================================================================== */ /** * Remove the margin on controls in Safari. */ button, input, select { margin: 0; } /** * 1. Show the overflow in IE. * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE. */ button { overflow: visible; /* 1 */ text-transform: none; /* 2 */ } /** * Correct the inability to style buttons in iOS and Safari. */ button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; } /** * Show the overflow in Edge 18- and IE. */ input { overflow: visible; } /** * 1. Correct the text wrapping in Edge 18- and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ white-space: normal; /* 1 */ } /** * 1. Add the correct display in Edge 18- and IE. * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox. */ progress { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Remove the inheritance of text transform in Firefox. */ select { text-transform: none; } /** * 1. Remove the margin in Firefox and Safari. * 2. Remove the default vertical scrollbar in IE. */ textarea { margin: 0; /* 1 */ overflow: auto; /* 2 */ } /** * 1. Add the correct box sizing in IE 10-. * 2. Remove the padding in IE 10-. */ [type='checkbox'], [type='radio'] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * 1. Correct the odd appearance in Chrome, Edge, and Safari. * 2. Correct the outline style in Safari. */ [type='search'] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Safari. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } /** * Correct the text style of placeholders in Chrome, Edge, and Safari. */ ::-webkit-input-placeholder { color: inherit; opacity: 0.54; } /** * Remove the inner padding in Chrome, Edge, and Safari on macOS. */ ::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style upload buttons in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /** * Remove the inner border and padding of focus outlines in Firefox. */ ::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus outline styles unset by the previous rule in Firefox. */ :-moz-focusring { outline: 1px dotted ButtonText; } /** * Remove the additional :invalid styles in Firefox. */ :-moz-ui-invalid { box-shadow: none; } /* Interactive * ========================================================================== */ /* * Add the correct display in Edge 18- and IE. */ details { display: block; } /* * Add the correct styles in Edge 18-, IE, and Safari. */ dialog { background-color: white; border: solid; color: black; display: block; height: -moz-fit-content; height: -webkit-fit-content; height: fit-content; left: 0; margin: auto; padding: 1em; position: absolute; right: 0; width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; } dialog:not([open]) { display: none; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Scripting * ========================================================================== */ /** * Add the correct display in IE 9-. */ canvas { display: inline-block; } /** * Add the correct display in IE. */ template { display: none; } /* User interaction * ========================================================================== */ /** * Add the correct display in IE 10-. */ [hidden] { display: none; } /* Example use, must be set in # { } with rem at the end * width: calc(50% - s('s-xxs')); */ /* stylelint-disable */ /* stylelint-disable */ .s-xl--top { margin-top: 4.8rem; } .s-xl--padded { margin-top: 4.8rem; margin-bottom: 4.8rem; } .s-xxl--top { margin-top: 9.6rem; } .s-xxl--bottom { margin-bottom: 9.6rem; } .s-xxl--padded { margin-top: 9.6rem; margin-bottom: 9.6rem; } @media screen and (max-width: 851px) { .s-xxl--top { margin-top: 3.2rem; } .s-xxl--bottom { margin-bottom: 3.2rem; } .s-xxl--padded { margin-top: 3.2rem; margin-bottom: 3.2rem; } .s-xl--top { margin-top: 0; } .s-xl--padded { margin-top: 4.8rem; margin-bottom: 4.8rem; } } /* Project: Kori */ @font-face { font-family: 'Miasma-Sharp'; src: url(/static/fonts/subset-MiasmaSharp-Light.eot); src: url(/static/fonts/subset-MiasmaSharp-Light.eot?#iefix) format("embedded-opentype"), url(/static/fonts/subset-MiasmaSharp-Light.woff2) format("woff2"), url(/static/fonts/subset-MiasmaSharp-Light.woff) format("woff"), url(/static/fonts/subset-MiasmaSharp-Light.ttf) format("truetype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Miasma-Grotesque'; src: url(/static/fonts/subset-MiasmaGrotesque-Light.eot); src: url(/static/fonts/subset-MiasmaGrotesque-Light.eot?#iefix) format("embedded-opentype"), url(/static/fonts/subset-MiasmaGrotesque-Light.woff2) format("woff2"), url(/static/fonts/subset-MiasmaGrotesque-Light.woff) format("woff"), url(/static/fonts/subset-MiasmaGrotesque-Light.ttf) format("truetype"); font-weight: 300; font-style: normal; font-display: swap; } /* Basic Typography Mixins */ /* Project: Kori */ strong, b { font-family: inherit; font-weight: normal; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } a { color: #b97332; } a:not(.btn):not(.js-split--chars):not(.hover-zoom__outer):not(.logo):not(.btn--icon):not(.language__link):not(.filter-zoom__outer):not(.btn--bare):not(.category__list-item__image):not(.image__link):not(.basket-overview__product__link):not(.artist-card__link):not(.featured__item) { position: relative; } a:not(.btn):not(.js-split--chars):not(.hover-zoom__outer):not(.logo):not(.btn--icon):not(.language__link):not(.filter-zoom__outer):not(.btn--bare):not(.category__list-item__image):not(.image__link):not(.basket-overview__product__link):not(.artist-card__link):not(.featured__item):hover::after { transform-origin: left; transform: scaleX(1); } a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #403932; transform-origin: right; transform: scaleX(0); transition: transform 0.75s cubic-bezier(0.19, 1, 0.22, 1); } .dark-theme a::after { background-color: white; } .hover-wrapper a::after { background-color: #403932; } .expanded a::after { background-color: #403932; } p { line-height: 1.4; } /* HEADLINES */ .headline--extra-large { margin-top: 0; margin-bottom: 1.2rem; font-size: 5.5rem; line-height: 1.2; font-family: 'Miasma-Sharp'; font-weight: 300; } .headline--large { margin-top: 0; margin-top: 2.2rem; margin-bottom: 1.2rem; font-size: 3.1rem; font-family: 'Miasma-Sharp'; font-weight: 300; } @media screen and (max-width: 851px) { .headline--extra-large { font-size: 3.1rem; line-height: 122%; } .headline--large { font-size: 1.9rem; line-height: 122%; } } .headline--medium { margin-top: 1.2rem; margin-bottom: 0.8rem; font-size: 1.9rem; font-family: 'Miasma-Sharp'; font-weight: 300; } .headline--small { margin-top: 0.8rem; margin-bottom: 0.8rem; font-size: 1.1rem; font-family: 'Miasma-Sharp'; font-weight: 300; } .headline--small.is-sans { font-family: 'Miasma-Grotesque'; font-weight: 300; } .customer-baseaccountpage .headline--small { margin-bottom: 1.6rem; } .s-xxl--padded .headline--small { margin-top: 0; } .s-xxl--top .headline--small { margin-top: 0; } .headline--super { font-family: 'Miasma-Grotesque'; font-weight: 300; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; } .headline--intro { font-size: 0.8rem; } .headline--colored { color: #b97332; } .dark-theme .headline--colored { color: white; } .uppercase { text-transform: uppercase; } .label--small { display: flex; line-height: 1.3; letter-spacing: 0.1em; } .headline--bold { font-family: 'Miasma-Sharp'; font-weight: 300; } .headline--left { text-align: left; } .align-left { text-align: left; } .align-center { text-align: center; } .secondary-text { font-size: 0.65rem; } .heading--subtitle { margin-bottom: 0.4rem; font-family: 'Miasma-Grotesque'; font-weight: 300; font-size: 0.8rem; line-height: 1.4; color: #c1b9b0; } /* SPECIAL CLASSES */ /* Fractions * https://css-tricks.com/almanac/properties/f/font-variant-numeric/ **/ @supports (font-variant-numeric: diagonal-fractions) { .fraction { font-variant-numeric: diagonal-fractions; } } /* Striked through elements */ .strike--orange { color: #403932; } /* Page Elements: Headings */ .page-title { display: flex; justify-content: center; align-items: center; margin-top: 3.2rem; font-size: 2.2rem; line-height: 1.1; } .upcase { text-transform: uppercase; } .sans { font-family: 'Miasma-Grotesque'; font-weight: 300; } .serif { font-family: 'Miasma-Sharp'; font-weight: 300; } .superscript { font-size: 0.65rem; color: #c1b9b0; vertical-align: super; } html { font-size: 100%; } @media screen and (min-width: 0) and (max-width: 414px) { html { font-size: calc(((18 / 16) * 100 * 1%) + (18 - 16) * (100vw - 260*1px) / (414 - 260)); } } @media screen and (min-width: 415px) and (max-width: 851px) { html { font-size: calc(((18 / 16) * 100 * 1%) + (18 - 16) * (100vw - 415*1px) / (851 - 415)); } } @media screen and (min-width: 852px) and (max-width: 1279px) { html { font-size: calc(((18 / 16) * 100 * 1%) + (18 - 16) * (100vw - 852*1px) / (1279 - 852)); } } @media screen and (min-width: 1280px) and (max-width: 1439px) { html { font-size: calc(((18 / 16) * 100 * 1%) + (18 - 16) * (100vw - 1280*1px) / (1439 - 1280)); } } @media screen and (min-width: 1440px) and (max-width: 1920px) { html { font-size: calc(((20 / 16) * 100 * 1%) + (20 - 16) * (100vw - 1440*1px) / (1920 - 1440)); } } @media screen and (min-width: 1921px) and (max-width: 2160px) { html { font-size: calc(((22 / 16) * 100 * 1%) + (22 - 16) * (100vw - 1921*1px) / (2160 - 1921)); } } @media screen and (min-width: 2161px) and (max-width: 2400px) { html { font-size: calc(((24 / 16) * 100 * 1%) + (24 - 16) * (100vw - 2161*1px) / (2400 - 2161)); } } @media screen and (min-width: 2401px) and (max-width: 3160px) { html { font-size: calc(((26 / 16) * 100 * 1%) + (26 - 16) * (100vw - 2401*1px) / (3160 - 2401)); } } @media screen and (min-width: 3161px) { html { font-size: calc(((36 / 16) * 100 * 1%)); } } html, body { width: 100vw; min-height: 100vh; min-height: calc(var(--vh, 1vh) * 100); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } @media screen and (max-width: 851px) { html, body { overflow: visible; } } body { display: flex; flex-direction: column; margin: 0; padding: 0; background-color: #f6f5ef; } body.fixed { position: fixed; overflow: hidden; left: 0; right: 0; top: 0; bottom: 0; } body.fixed::-webkit-scrollbar { display: none; } * { font-family: 'Miasma-Grotesque'; font-weight: 300; font-size: 0.65rem; } *, *::after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .dark-theme { color: white; } .dark-theme .logo svg path { stroke: none; } @media screen and (min-width: 851px) { .dark-theme svg:not(.logo):not(.icon-sort):not(.icon-heart):not(.icon-close-overlay):not(.icon-check):not(.icon-bell):not(.social) path { stroke: white; } } .dark-theme .social path { stroke: none; fill: white; } .dark-theme .menu-secondary__container svg.icon-heart path { stroke: white; } .dark-theme .products-grid__wishlist-trigger svg path, .dark-theme .add-to-favorites svg path { stroke: #403932; } .dark-theme .carousel-title { color: white; } .light-theme { color: #403932; } .light-theme .logo path { fill: #403932; } .light-theme svg:not(.logo):not(.icon-sort):not(.icon-check):not(.icon-bell):not(.social):not(.out-of-stock) path { stroke: #403932; } .light-theme .footer-navigation__link.social svg path { stroke: none; } .light-theme .carousel-title { color: #b97332; } .main_nav_open .logo path { fill: #403932; } @media screen and (max-width: 851px) { svg:not(.logo):not(.icon-search):not(.icon-user):not(.icon-cart):not(.icon-lock) path { stroke: white; } .dark-theme [data-theme='light-theme'] .headline--colored { color: #b97332; } .light-theme .logo path { fill: #403932; } .light-theme [data-theme='dark-theme'] .btn--pill svg path { stroke: white; } .light-theme [data-theme='dark-theme'] .products-grid__wishlist-trigger svg path, .light-theme [data-theme='dark-theme'] .add-to-favorites svg path { stroke: #403932; } } @media screen and (max-width: 851px) { [data-theme='light-theme'] { background-color: #f6f5ef; color: #403932; } } button * { pointer-events: none; } img { max-width: 100%; } @media screen and (min-width: 852px) { main { min-height: calc(100vh - 135px); min-height: calc(100vh - 135px - 9.6rem); } } @media screen and (max-width: 851px) { .smooth-scroll { min-height: calc(100vh - 90px); display: flex; flex-direction: column; justify-content: space-between; } main { margin-bottom: 0; } } address { font-style: normal; line-height: 1.5; } figure { margin: 0; } ul:last-child, li:last-child { margin-right: 0; } .unstyled { list-style: none; margin: 0; padding: 0; } /* NEW BREAKPOINTS */ /*! locomotive-scroll v3.5.4 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */ html.has-scroll-smooth { overflow: hidden; } html.has-scroll-dragging { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .has-scroll-smooth body { overflow: hidden; } .has-scroll-smooth [data-scroll-container] { min-height: 100vh; /* Fallback for browsers that do not support Custom Properties */ } @media screen and (max-width: 851px) { .has-scroll-smooth [data-scroll-container] { min-height: calc(var(--vh, 1vh) * 100); } } .c-scrollbar { position: absolute; right: 0; top: 0; width: 11px; height: 100vh; /* Fallback for browsers that do not support Custom Properties */ height: calc(var(--vh, 1vh) * 100); transform-origin: center right; transition: transform 0.3s, opacity 0.3s; opacity: 0; } .c-scrollbar:hover { transform: scaleX(1.45); } .c-scrollbar:hover, .has-scroll-scrolling .c-scrollbar, .has-scroll-dragging .c-scrollbar { opacity: 1; } .c-scrollbar_thumb { position: absolute; top: 0; right: 0; background-color: black; opacity: 0.5; width: 7px; border-radius: 10px; margin: 2px; cursor: -webkit-grab; cursor: grab; } .has-scroll-dragging .c-scrollbar_thumb { cursor: -webkit-grabbing; cursor: grabbing; } .fixed_wrapper { position: relative; overflow: hidden; height: 818px; } .fixed_target { bottom: -100vh; } .fixed-lc, .fixed_target { position: absolute; top: -100vh; right: 0; left: 0; } .fixed-lc { height: 100%; background-size: cover; background-position: center; } /* Document * ========================================================================== */ /** * 1. Correct the line height in all browsers. */ html { line-height: 1.15; /* 1 */ } /* Sections * ========================================================================== */ /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Edge, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content * ========================================================================== */ /** * Remove the margin on nested lists in Chrome, Edge, IE, and Safari. */ dl dl, dl ol, dl ul, ol dl, ul dl { margin: 0; } /** * Remove the margin on nested lists in Edge 18- and IE. */ ol ol, ol ul, ul ol, ul ul { margin: 0; } /** * 1. Add the correct box sizing in Firefox. * 2. Correct the inheritance of border color in Firefox. * 3. Show the overflow in Edge 18- and IE. */ hr { box-sizing: content-box; /* 1 */ color: inherit; /* 2 */ height: 0; /* 1 */ overflow: visible; /* 3 */ } /** * Add the correct display in IE. */ main { display: block; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics * ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } /** * Add the correct text decoration in Edge 18-, IE, and Safari. */ abbr[title] { text-decoration: underline; text-decoration: underline dotted; } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /* Embedded content * ========================================================================== */ /** * Add the correct display in IE 9-. */ audio, video { display: inline-block; } /** * Add the correct display in iOS 4-7. */ audio:not([controls]) { display: none; height: 0; } /** * Remove the border on images within links in IE 10-. */ img { border-style: none; } /** * Hide the overflow in IE. */ svg:not(:root) { overflow: hidden; } /* Tabular data * ========================================================================== */ /** * 1. Correct table border color inheritance in all Chrome, Edge, and Safari. * 2. Remove text indentation from table contents in Chrome, Edge, and Safari. */ table { border-color: inherit; /* 1 */ text-indent: 0; /* 2 */ } /* Forms * ========================================================================== */ /** * Remove the margin on controls in Safari. */ button, input, select { margin: 0; } /** * 1. Show the overflow in IE. * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE. */ button { overflow: visible; /* 1 */ text-transform: none; /* 2 */ } /** * Correct the inability to style buttons in iOS and Safari. */ button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; } /** * Show the overflow in Edge 18- and IE. */ input { overflow: visible; } /** * 1. Correct the text wrapping in Edge 18- and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ white-space: normal; /* 1 */ } /** * 1. Add the correct display in Edge 18- and IE. * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox. */ progress { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Remove the inheritance of text transform in Firefox. */ select { text-transform: none; } /** * 1. Remove the margin in Firefox and Safari. * 2. Remove the default vertical scrollbar in IE. */ textarea { margin: 0; /* 1 */ overflow: auto; /* 2 */ } /** * 1. Add the correct box sizing in IE 10-. * 2. Remove the padding in IE 10-. */ [type='checkbox'], [type='radio'] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * 1. Correct the odd appearance in Chrome, Edge, and Safari. * 2. Correct the outline style in Safari. */ [type='search'] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Safari. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } /** * Correct the text style of placeholders in Chrome, Edge, and Safari. */ ::-webkit-input-placeholder { color: inherit; opacity: 0.54; } /** * Remove the inner padding in Chrome, Edge, and Safari on macOS. */ ::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style upload buttons in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /** * Remove the inner border and padding of focus outlines in Firefox. */ ::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus outline styles unset by the previous rule in Firefox. */ :-moz-focusring { outline: 1px dotted ButtonText; } /** * Remove the additional :invalid styles in Firefox. */ :-moz-ui-invalid { box-shadow: none; } /* Interactive * ========================================================================== */ /* * Add the correct display in Edge 18- and IE. */ details { display: block; } /* * Add the correct styles in Edge 18-, IE, and Safari. */ dialog { background-color: white; border: solid; color: black; display: block; height: -moz-fit-content; height: -webkit-fit-content; height: fit-content; left: 0; margin: auto; padding: 1em; position: absolute; right: 0; width: -moz-fit-content; width: -webkit-fit-content; width: fit-content; } dialog:not([open]) { display: none; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Scripting * ========================================================================== */ /** * Add the correct display in IE 9-. */ canvas { display: inline-block; } /** * Add the correct display in IE. */ template { display: none; } /* User interaction * ========================================================================== */ /** * Add the correct display in IE 10-. */ [hidden] { display: none; } /* Example use, must be set in # { } with rem at the end * width: calc(50% - s('s-xxs')); */ /* stylelint-disable */ /* stylelint-disable */ .s-xl--top { margin-top: 4.8rem; } .s-xl--padded { margin-top: 4.8rem; margin-bottom: 4.8rem; } .s-xxl--top { margin-top: 9.6rem; } .s-xxl--bottom { margin-bottom: 9.6rem; } .s-xxl--padded { margin-top: 9.6rem; margin-bottom: 9.6rem; } @media screen and (max-width: 851px) { .s-xxl--top { margin-top: 3.2rem; } .s-xxl--bottom { margin-bottom: 3.2rem; } .s-xxl--padded { margin-top: 3.2rem; margin-bottom: 3.2rem; } .s-xl--top { margin-top: 0; } .s-xl--padded { margin-top: 4.8rem; margin-bottom: 4.8rem; } } /* Project: Kori */ @font-face { font-family: 'Miasma-Sharp'; src: url(/static/fonts/subset-MiasmaSharp-Light.eot); src: url(/static/fonts/subset-MiasmaSharp-Light.eot?#iefix) format("embedded-opentype"), url(/static/fonts/subset-MiasmaSharp-Light.woff2) format("woff2"), url(/static/fonts/subset-MiasmaSharp-Light.woff) format("woff"), url(/static/fonts/subset-MiasmaSharp-Light.ttf) format("truetype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Miasma-Grotesque'; src: url(/static/fonts/subset-MiasmaGrotesque-Light.eot); src: url(/static/fonts/subset-MiasmaGrotesque-Light.eot?#iefix) format("embedded-opentype"), url(/static/fonts/subset-MiasmaGrotesque-Light.woff2) format("woff2"), url(/static/fonts/subset-MiasmaGrotesque-Light.woff) format("woff"), url(/static/fonts/subset-MiasmaGrotesque-Light.ttf) format("truetype"); font-weight: 300; font-style: normal; font-display: swap; } /* Basic Typography Mixins */ /* Project: Kori */ strong, b { font-family: inherit; font-weight: normal; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } a { color: #b97332; } a:not(.btn):not(.js-split--chars):not(.hover-zoom__outer):not(.logo):not(.btn--icon):not(.language__link):not(.filter-zoom__outer):not(.btn--bare):not(.category__list-item__image):not(.image__link):not(.basket-overview__product__link):not(.artist-card__link):not(.featured__item) { position: relative; } a:not(.btn):not(.js-split--chars):not(.hover-zoom__outer):not(.logo):not(.btn--icon):not(.language__link):not(.filter-zoom__outer):not(.btn--bare):not(.category__list-item__image):not(.image__link):not(.basket-overview__product__link):not(.artist-card__link):not(.featured__item):hover::after { transform-origin: left; transform: scaleX(1); } a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #403932; transform-origin: right; transform: scaleX(0); transition: transform 0.75s cubic-bezier(0.19, 1, 0.22, 1); } .dark-theme a::after { background-color: white; } .hover-wrapper a::after { background-color: #403932; } .expanded a::after { background-color: #403932; } p { line-height: 1.4; } /* HEADLINES */ .headline--extra-large { margin-top: 0; margin-bottom: 1.2rem; font-size: 5.5rem; line-height: 1.2; font-family: 'Miasma-Sharp'; font-weight: 300; } .headline--large { margin-top: 0; margin-top: 2.2rem; margin-bottom: 1.2rem; font-size: 3.1rem; font-family: 'Miasma-Sharp'; font-weight: 300; } @media screen and (max-width: 851px) { .headline--extra-large { font-size: 3.1rem; line-height: 122%; } .headline--large { font-size: 1.9rem; line-height: 122%; } } .headline--medium { margin-top: 1.2rem; margin-bottom: 0.8rem; font-size: 1.9rem; font-family: 'Miasma-Sharp'; font-weight: 300; } .headline--small { margin-top: 0.8rem; margin-bottom: 0.8rem; font-size: 1.1rem; font-family: 'Miasma-Sharp'; font-weight: 300; } .headline--small.is-sans { font-family: 'Miasma-Grotesque'; font-weight: 300; } .customer-baseaccountpage .headline--small { margin-bottom: 1.6rem; } .s-xxl--padded .headline--small { margin-top: 0; } .s-xxl--top .headline--small { margin-top: 0; } .headline--super { font-family: 'Miasma-Grotesque'; font-weight: 300; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; } .headline--intro { font-size: 0.8rem; } .headline--colored { color: #b97332; } .dark-theme .headline--colored { color: white; } .uppercase { text-transform: uppercase; } .label--small { display: flex; line-height: 1.3; letter-spacing: 0.1em; } .headline--bold { font-family: 'Miasma-Sharp'; font-weight: 300; } .headline--left { text-align: left; } .align-left { text-align: left; } .align-center { text-align: center; } .secondary-text { font-size: 0.65rem; } .heading--subtitle { margin-bottom: 0.4rem; font-family: 'Miasma-Grotesque'; font-weight: 300; font-size: 0.8rem; line-height: 1.4; color: #c1b9b0; } /* SPECIAL CLASSES */ /* Fractions * https://css-tricks.com/almanac/properties/f/font-variant-numeric/ **/ @supports (font-variant-numeric: diagonal-fractions) { .fraction { font-variant-numeric: diagonal-fractions; } } /* Striked through elements */ .strike--orange { color: #403932; } /* Page Elements: Headings */ .page-title { display: flex; justify-content: center; align-items: center; margin-top: 3.2rem; font-size: 2.2rem; line-height: 1.1; } .upcase { text-transform: uppercase; } .sans { font-family: 'Miasma-Grotesque'; font-weight: 300; } .serif { font-family: 'Miasma-Sharp'; font-weight: 300; } .superscript { font-size: 0.65rem; color: #c1b9b0; vertical-align: super; } /* Project: Kori */ a, button { text-decoration: none; outline: none; } a[disabled], button[disabled] { cursor: default !important; } button svg { width: 0.8rem; height: 0.8rem; } .btn { display: flex; justify-content: center; align-items: center; min-width: 214px; padding: 0.65rem; border: none; border-radius: 3px; font-size: 0.7rem; line-height: 1.3; color: white; background-color: #403932; transition: background-color 0.5s ease; } .btn > * { pointer-events: none; } .btn.btn--full { width: 100%; } .btn:focus, .btn:hover, .btn:active { outline: none; background-color: #27231f; transition: background-color 0.5s ease; } .btn[disabled] { cursor: default; background-color: #796c5f; } .btn .icon { position: absolute; left: 0.8rem; } a.btn { display: inline-flex; } .btn--bare { position: relative; display: flex; justify-content: flex-start; padding: 0; background-color: transparent; border: none !important; /* TODO: Super sos find where this is coming from */ cursor: pointer; } .btn--bare > * { pointer-events: none; } .btn--bare:focus, .btn--bare:hover, .btn--bare:active { outline: none; background-color: transparent; } .btn--icon svg { pointer-events: none; opacity: 1; transition: opacity 0.25s ease; width: 0.8rem; height: 0.8rem; } .btn--icon:hover, .btn--icon:focus { cursor: pointer; } .btn--icon:hover svg, .btn--icon:focus svg { opacity: 0.3; transition: opacity 0.25s ease; } .btn--black, .btn-primary { max-width: 400px; margin: 0 auto; background-color: black; transition: background-color 0.2s ease; padding: 2.2rem; color: white; border-radius: 3px; border: 1px solid black; transition: all 0.25s ease-out; } .btn--black:hover { background-color: white; color: black; transition: all 0.25s ease-out; } .btn--border-black { padding: 2.2rem; border: 1px solid black; background-color: transparent; color: black; /* TODO: Checkout why I've got the following there */ } .btn--border-black[type='submit'] { background-color: transparent; border: 1px solid black; color: black; } .btn--border-black:hover { background-color: black !important; color: white !important; } .btn--left { margin-left: 0; } .btn--mobile { display: none; } @media screen and (max-width: 851px) { .btn--mobile { display: flex; } } /* Mini button labels * Should create a mixin to change colors, TODO: check if design warrants it **/ .btn-label--mini { padding: 0.2rem 0.8rem; font-size: 0.65rem; letter-spacing: 0.02em; text-transform: uppercase; background-color: #fc9e6a; border-radius: 3px; } /* Pills * **/ .btn--pill { justify-content: space-between; font-size: 0.65rem; color: #b97332; border-radius: 0; border: none; background-color: transparent; } .btn--pill--outline { padding-left: 0; padding-right: 0; border: none; border-bottom: 1px solid rgba(64, 57, 50, 0.2); } .dark-theme .btn--pill--outline { border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .btn--pill svg { max-width: 21px; margin-top: -3px; } .btn--pill:hover, .btn--pill:focus, .btn--pill:active { background-color: transparent; transition: background-color 0.5s ease; } .dark-theme .btn--pill { color: white; } .pill { padding: 0.65rem 0.8rem; line-height: 1.3; color: #25aaf5; text-decoration: none; background-color: #e7f6fd; border-radius: 30px; } .pill:hover, .pill:focus, .pill:active { background-color: #b8e4f9; transition: background-color 0.5s ease; } .pill--outline { padding: 0.65rem 1.2rem; background-color: transparent; border: 1px solid #403932; } .pill--outline:hover, .pill--outline:focus, .pill--outline:active { background-color: transparent; } .btn__text { color: #b97332; } /* More * **/ .more { font-size: 0.8rem; line-height: 1.6; color: #25aaf5; } /* Form buttons * **/ button[type='submit'] { cursor: pointer; } .o-button { text-decoration: none; transition: color 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); position: relative; overflow: hidden; transform: translateZ(0); } .o-button__background, .o-button__hover { display: block; position: absolute; background-color: white; } .o-button--black .o-button__background { background-color: #403932; } .o-button--black { color: #fff; background-color: transparent; } .o-button__hover { width: 100%; height: 100%; border-radius: 0; top: -50px; left: -99%; transform: translateZ(0) translate(0, 0) scale(0) skewX(60deg); transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); will-change: transform; pointer-events: none; } .o-button__txt { position: relative; color: #403932; } .o-button__background { top: 0; left: 0; width: 100%; height: 100%; opacity: 1; transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); } .o-button--black .o-button__hover { background-color: #27231f; } .o-button.current .o-button__hover, .o-button:hover .o-button__hover, .o-button__parent:hover .o-button__hover { transform: translateZ(0) translate(115%, 0) scale(1.5) skew(60deg); } .o-button.current, .o-button:hover, .o-button__parent:hover { color: #403932; } .o-button.current .o-button__txt, .o-button:hover .o-button__txt, .o-button__parent:hover .o-button__txt { color: #f6f5ef !important; } /* Project: Kori */ .product-card .icon-heart path { stroke: #403932; } .icon--small { width: 16px; } /* Project: Kori */ .message__outer { display: flex; align-items: center; } .message__outer svg { max-width: 20px; margin-right: 0.4rem; } .message-warning { color: #f2994a; } .message-error { color: #ff6c6c; } .message-error svg { width: 20px; margin-right: 0.65rem; } .message-error svg > * { stroke: #ff6c6c; } .notifications__outer { position: absolute; top: 5vh; min-width: 100%; z-index: 2; padding-left: 0.8rem; padding-right: 0.8rem; } .notifications__outer[data-status='hidden'] { opacity: 0; } .notifications__outer[data-status='visible'] { opacity: 1; } .product-detail__details .notifications__outer { padding: 0; } .notifications__outer.fixed { position: fixed; top: 5vh; z-index: 2; } .notifications__container { display: flex; flex-direction: column; justify-content: center; align-items: center; } .notification { display: flex; justify-content: space-between; align-items: center; min-width: 350px; max-width: 414px; padding: 0.8rem; margin-bottom: 1.2rem; border-radius: 2px; } .notification svg { width: 32px; margin-right: 0.8rem; } @media screen and (min-width: 852px) { .notification { max-width: 35vw; } } .notification--error { background-color: white; } .notification--error svg path { stroke: #ff6c6c !important; } .notification--warning { background-color: white; } .notification--warning svg path { stroke: #f2994a !important; } .notification--success, .notification--safe { background-color: white; } .notification--success svg path, .notification--safe svg path { stroke: #219653 !important; } .notification--info { background-color: white; } .notification--info svg path { stroke: #2d9cdb !important; } .notification__inner { position: relative; display: flex; align-items: center; margin-right: 0.8rem; font-size: 0.65rem; line-height: 1.4; } .notification__inner p { margin: 0; color: #403932; } .notification__inner .icon-last { position: absolute; right: 0; } .notification__inner svg:first-child { margin-right: 0.8rem; } .dark-theme .notification__inner p { color: #403932; } .notifications__close { color: #b97332; } .notification--bell { display: flex; justify-content: center; align-items: center; font-size: 0.65rem; color: #4c7b60; } .notification--bell svg { margin-right: 6px; } .notification--bell span { font-size: 0.65rem; } .cart-quickview .notification { margin-top: 15px; } .grid { display: flex; flex-direction: column; width: 100vw; padding-left: 10vw; padding-right: 10vw; } .grid-indented { grid-column: 5 / span 8; } .grid-sidebar { display: grid; grid-template-columns: 10vw 71vw; padding-left: 3.2rem; padding-right: 10vw; margin-right: 3.2rem; } @media screen and (min-width: 852px) { .grid { width: calc(100vw - 6.4rem); margin-left: 3.2rem; margin-right: 3.2rem; } .grid-restrainer { max-width: 26.7vw; min-width: 296px; margin: 0 auto; } .grid-centered { margin-top: 9.6rem; } .grid-centered > h1, .grid-centered h2 { margin-top: 0; } .grid-sidebar__main { display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 1.2rem; width: 100%; } .grid-sidebar__main--indented { grid-column: 5 / span 7; } .customer-profile .grid-sidebar__main--indented { grid-column: 5 / span 4; } #customer-wishlists-wishlists-detail .grid-sidebar__main--indented, #customer-order-order-list .grid-sidebar__main--indented, #customer-order-order-detail .grid-sidebar__main--indented { grid-column: 5 / span 8; } } @media screen and (max-width: 851px) { .grid, .grid-sidebar__main { padding-left: 1.2rem; padding-right: 1.2rem; } .grid--full { margin-top: 4.8rem; padding-left: 0; padding-right: 0; } .grid-centered { margin-top: 1.2rem; } .grid-centered > h1, .grid-centered h2 { margin-top: 0; } #catalogue-browse .grid-centered { margin-top: 0; } .grid-sidebar { display: flex; flex-direction: column; grid-template-columns: 0; padding: 0; margin: 0; margin-bottom: 3.2rem; } #main-content { margin-top: 2.2rem; } } .grid-column { position: relative; } .grid-one-column { display: flex; flex-direction: column; justify-content: center; max-width: 370px; margin-left: auto; margin-right: auto; } .grid-two-columns { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 2.2rem; margin-top: 2.2rem; } .grid-column-with-sidebar { display: grid; grid-template-columns: 0.25fr 1.75fr; grid-gap: 2.2rem; margin-top: 2.2rem; } @media screen and (min-width: 852px) { .grid-12-columns { display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 1.2rem; width: 100%; } } .grid-6-columns { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 1.6rem; width: 100%; } @media screen and (max-width: 851px) { .grid-6-columns { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 0.4rem; width: 100%; } } .grid-4-columns { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 0.65rem; } .grid-3-columns { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 0.65rem; } .grid-12-columns.layout-1-2 .grid-column:first-child { grid-column: 1 / span 4; } .grid-12-columns.layout-1-2 .grid-column:nth-child(2) { grid-column: 5 / span 11; } .grid-12-columns.layout-2-1 .grid-column:first-child { grid-column: 1 / span 10; } .grid-12-columns.layout-2-1 .grid-column:nth-child(2) { grid-column: 11 / span 5; } @media screen and (max-width: 851px) { .grid-two-columns { display: flex; flex-direction: column; } .grid-12-columns { display: flex; flex-direction: column; } .layout-2-1 .grid-column:first-child { grid-column: 1 / span 8; } .layout-2-1 .grid-column:nth-child(2) { grid-column: 1 / span 8; } .grid-3-columns { display: flex; flex-direction: column; } .grid-4-columns { grid-template-columns: repeat(2, 1fr); } } @media screen and (max-width: 414px) { .grid-two-columns { display: flex; flex-direction: column; } .grid-12-columns { display: flex; flex-direction: column; } .grid-3-columns, .grid-4-columns { display: flex; flex-direction: column; } } /* Headings */ .section-title { text-align: center; } @media screen and (min-width: 852px) { .grid-column__sticky { position: fixed; } } @media screen and (max-width: 851px) { .circle, .circle-follow { display: none; } } @media screen and (min-width: 852px) { .circle { position: fixed; background-color: #b97332; width: 10px; height: 10px; left: -10px; top: -10px; border-radius: 100%; z-index: 10000; transform: scale(1); } .circle-follow { position: fixed; border: 1px solid #b97332; width: 30px; height: 30px; left: -21px; top: -21px; border-radius: 100%; user-select: none; pointer-events: none; z-index: 10000; transform: scale(1); } .circle-follow.hovering { border: none; background-color: rgba(185, 115, 50, 0.2); } } .history-back__link::after { background-color: #b97332; } /** * Hide element while making it readable for screen readers * Shamelessly borrowed from HTML5Boilerplate: * https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css#L119-L133 */ .visually-hidden, .screen-reader-text { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* Break email in more lines if necessary */ .u-email { overflow-wrap: break-word; } /* General overrides for the customer addresses page */ /* Section containers with background color */ .hover-zoom { overflow: hidden; } .hover-zoom img { transform: scale(1); transition: transform 1s, filter 1.5s ease-in-out, opacity 1s ease-in-out 0.5s; filter: grayscale(0); } .hover-zoom__link { transition: color 0.5s linear; } .filter-zoom { overflow: hidden; } .filter-zoom img { transition: filter 1.5s ease-in-out, opacity 1s ease-in-out 0.5s; filter: grayscale(0); } .filter-zoom__link { transition: color 0.5s linear; } .filter-zoom__outer:hover img { transition: filter 1.5s ease-in-out; } .filter-zoom__outer:hover .filter-zoom__link { color: #daa777; transition: color 0.5s linear; } .hover-zoom__outer:hover img { transform: scale(1.25); transition: transform 1s, filter 1.5s ease-in-out; } .hover-zoom__outer:hover .hover-zoom__link { color: #b97332; transition: color 0.5s linear; } @media screen and (max-width: 851px) { .cut__top .bg-color { display: none; } .popular-collections h2 { margin-bottom: 2.2rem; } .about-section { padding-bottom: 4.8rem; background-color: #86856c; } .about-section * { color: white; } .about-section svg path { stroke: white; } .about-section .headline--large { margin-top: 4.8rem; margin-bottom: 4.8rem; padding-left: 1.2rem; padding-right: 1.2rem; font-size: 1.4rem; text-align: center; } .about-section .column-2 { display: flex; justify-content: flex-end; order: 1; } .about-section .column-1 { order: 2; } .about-section img { mix-blend-mode: luminosity; } } @media screen and (min-width: 852px) { #home .grid__outer { position: relative; } .about-section .headline--large { margin-bottom: 9.6rem; padding: 0 1.2rem; text-align: center; font-size: 2.4rem; } } /* Product Detail: container */ .product-detail__container { display: grid; grid-template-columns: repeat(2, 50%); justify-content: space-between; align-items: flex-start; margin-top: 2.2rem; margin-bottom: 3.2rem; } @media screen and (max-width: 851px) { .product-detail__container { display: flex; flex-direction: column; justify-content: flex-start; margin-top: 0; margin-bottom: 4.8rem; } .product-detail__container .heading--subtitle { margin-top: 0; } .product-detail__container .breadcrumb { margin-top: 2.2rem; } .product-detail__container .breadcrumb__link, .product-detail__container .breadcrumb__item::after { color: #c1b9b0; } } /* Product Detail: image gallery */ .product-detail__images { position: relative; width: 100%; margin-left: 3.2rem; padding-bottom: 60px; } @media screen and (min-width: 852px) { .product-detail__images { display: flex; justify-content: center; align-items: center; } } /* Product Detail: details */ .product-detail__details { position: relative; opacity: 0; visibility: hidden; transition: opacity 0.5s ease-in; } .product-detail__details.visible { padding-right: 2.2rem; opacity: 1; visibility: visible; transition: opacity 0.5s ease-in; } .product-detail__details hr { height: 2px; margin-top: 1.2rem; background-color: #403932; border: none; } .product-detail__details .btn--share { position: absolute; right: 2.2rem; cursor: pointer; } .product-detail__details .add-to-cart__form { margin-top: 0.2rem; } .product-detail__details .add-to-favorites { margin-top: 1.2rem; } .product-detail__details .heading--subtitle { margin-top: 0.4rem; margin-bottom: 0.65rem; } .product-detail__details .heading--subtitle a { color: #403932; opacity: 0.5; font-size: inherit; } .product-detail__details .heading--subtitle a::after { background-color: #c1b9b0; } .product-detail__title { margin-top: 3.2rem; margin-bottom: 0.4rem; } @media screen and (max-width: 851px) { .product-detail__details .add-to-cart__form { margin-top: 1.2rem; } .product-detail__details .add-to-cart__form button[type="submit"] { margin-top: 0; width: 100%; background-color: #403932; } .product-detail__details .add-to-favorites { margin-left: auto; margin-right: auto; } .product-detail__title { margin-top: 1.2rem; margin-bottom: 0.4rem; order: 2; font-family: 'Miasma-Sharp'; font-weight: 300; font-size: 1.9rem; color: #b97332; } .product-detail__images { margin-left: 0; } } .product-detail__subtitle { color: #7f7766; font-size: 0.6rem; line-height: 1.6; } .product-detail__description { position: relative; font-size: 0.8rem; line-height: 1.6; } .product-detail__description p { line-height: 1.6; } .product-detail__code { margin-top: 1rem; } .product-detail__unavailable-note { margin-top: 40px; color: #7f7766; font-size: 0.55rem; } .product-detail__unavailable-note a { font-size: 0.55rem; } .product-detail__sizing { display: flex; margin-top: 1rem; } .product-detail__sizing__item { margin-right: 1.2rem; } @media screen and (max-width: 851px) { .product-detail__description { margin-top: 0.8rem; } } .product-detail__description .transparent-overlay { position: absolute; bottom: 0; left: 0; width: 100%; margin: 0; padding: 30px 0; /* "transparent" only works here because == rgba(0,0,0,0) */ background-image: linear-gradient(to bottom, transparent, white); } .product-detail__description .transparent-overlay.hidden { padding: 0; } .product-detail__data { margin: 0; margin-top: 1.2rem; margin-bottom: 1.2rem; } .product-detail__data-table { line-height: 1.3; font-weight: normal; text-align: left; } .product-detail__data-table th { width: 35%; font-family: 'Miasma-Sharp'; font-weight: 300; } .product__size { font-size: 0.55rem; color: #c1b9b0; } @media screen and (max-width: 851px) { .product-detail__data-table th { font-weight: normal; } .product-detail__data { margin-top: 1.2rem; margin-bottom: 0.8rem; } } .product-detail__filters { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; } .product-detail__filters__item { display: flex; margin-right: 0.65rem; margin-top: 0.65rem; } .product-detail__filters__item:last-child { margin-right: 0; } .product-detail__filters__link { user-select: none; } .product-detail__cart { margin-top: 3.2rem; } @media screen and (max-width: 851px) { .product-detail__images { order: 1; width: 100%; } .product-detail__details { order: 3; width: 100%; padding: 0; } .product-detail__details .btn--share { top: 36px; right: 0; } .product-detail__cart { order: 2; width: 100%; margin-top: 0.8rem; } } /* Note below cart */ .info__note { margin-top: 1.2rem; } .info__note hr { margin-top: 1.2rem; margin-bottom: 1.2rem; } .info__note p { margin: 0; font-size: 0.8rem; line-height: 1.6; } @media screen and (max-width: 851px) { .info__note { margin-top: 0; } } #enquiryModal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; width: 70%; z-index: 11; height: 900px; margin: auto; overflow-y: auto; } #enquiryModal .modal-content { display: flex; height: 100%; } #enquiryModal .modal-body.left { flex-basis: 50%; } #enquiryModal .modal-body.left img { height: 100%; width: 100%; object-fit: cover; } #enquiryModal .modal-body.right { background-color: white; flex-basis: 50%; height: 100%; padding: 2rem; } #enquiryModal .close-modal { position: absolute; right: 20px; top: 20px; transform: scale(1.5); cursor: pointer; } #enquiryModal input, #enquiryModal button { width: 100%; } #enquiryModal h5 { font-size: 1.5rem; color: #403932; } #enquiryModal form > * { margin-bottom: 1.5rem; } #enquiryModal form textarea { border: 1px solid; background-color: white; } #enquiryModal form button { cursor: pointer; } #enquiryModal form button .btn__text { color: white; } #enquiryModal form label { display: block; margin-bottom: 0.2rem; color: #948677; } #enquiryModal .form-control { width: 100%; padding: 10px; border: 1px solid #eeece9; border-radius: 5px; } .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transition: opacity 0.3s ease; z-index: 10; } .modal-overlay.active { opacity: 1; visibility: visible; } .success-message { color: green; margin-top: 10px; text-align: center; position: absolute; bottom: -20%; left: 50%; transform: translateX(-50%); } @media screen and (max-width: 650px) { #enquiryModal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; width: 90%; max-height: 90%; z-index: 11; display: flex; flex-direction: column; gap: 1rem; padding: 1rem; overflow-y: auto; } #enquiryModal .modal-content { display: flex; flex-direction: column; gap: 1rem; } #enquiryModal .modal-body.left { flex-basis: auto; } #enquiryModal .modal-body.left img { max-height: 300px; width: 100%; object-fit: cover; } #enquiryModal .modal-body.right { background-color: white; flex-basis: auto; padding: 0; } #enquiryModal .close-modal { position: absolute; right: 10px; top: 10px; transform: scale(1.5); cursor: pointer; } #enquiryModal input, #enquiryModal button { width: 100%; } #enquiryModal h5 { font-size: 1.2rem; color: #403932; margin-block: 1rem; } #enquiryModal form > * { margin-bottom: 1rem; } #enquiryModal form textarea { border: 1px solid; background-color: white; } #enquiryModal form button { cursor: pointer; } #enquiryModal form button .btn__text { color: white; } #enquiryModal form label { display: block; margin-bottom: 0.2rem; color: #948677; } #enquiryModal .form-control { width: 100%; padding: 10px; border: 1px solid #eeece9; border-radius: 5px; } #enquiryModal .success-message { color: green; margin-top: 10px; text-align: center; position: relative; bottom: unset; left: unset; transform: unset; } } .product-card { position: relative; display: flex; flex-direction: column; } .product-card .btn { min-width: 100%; } .product-card .add-to-cart__form { opacity: 1; transition: opacity 0.25s ease-in; } .product-card .message { align-items: center; } @media screen and (max-width: 851px) { .product-card .btn { opacity: 1; } } .products-grid__picture { display: flex; flex-direction: column; width: 100%; } .product-card__image { width: 100%; opacity: 0; visibility: hidden; transition: opacity 0.5s; } .products-grid__wishlist-trigger { position: absolute; top: 0.8rem; right: 0.8rem; cursor: pointer; } .products-grid__wishlist-trigger svg path { fill: transparent; transition: fill 0.5s ease-in; } .products-grid__wishlist-trigger.active svg path, .products-grid__wishlist-trigger:hover svg path { fill: #403932; transition: fill 0.5s ease-in; } .add-to-favorites { cursor: pointer; } .add-to-favorites svg path { fill: transparent; transition: fill 0.5s ease-in; } .add-to-favorites.active svg path, .add-to-favorites:hover svg path { fill: #403932; transition: fill 0.5s ease-in; } @media screen and (max-width: 851px) { .products-grid__wishlist-trigger { top: 0.4rem; right: 0.4rem; } .products-grid__wishlist-trigger svg { width: 14px; height: 14px; } } .product-card__details-container { display: flex; flex-flow: column wrap; justify-content: space-between; margin-top: 0.8rem; } .product-list .product-card__details-container { flex-flow: row nowrap; } .product-card__details { margin-bottom: 0.2rem; } @media screen and (max-width: 851px) { .product-card__details-container { flex-direction: column; } .product-card__details-container .price__container .price { font-size: 0.65rem; } } .product-card__title { margin: 0; padding-right: 0.8rem; line-height: 1.4; } .product-card__link .product-card__details-container .product-card__details .add-to-cart__form { opacity: 0; visibility: hidden; transition: all 0.3s ease-in-out; } .product-card__link:hover .product-card__details-container .product-card__details .add-to-cart__form { opacity: 1; visibility: visible; } .dark-theme .product-card__link { color: white; } .light-theme .product-card__link { color: #403932; } .product-card__subtitle, .product-card__author { margin: 0; line-height: 1.6; color: #403932; opacity: 0.5; font-weight: normal; } .product-card__subtitle a, .product-card__author a { color: inherit; line-height: inherit; } .product-card__subtitle a::after, .product-card__author a::after { background-color: #c1b9b0; } .product-card__subtitle { margin: 0; } .product-card__utils { line-height: 1.6; } /* Product card price */ .price__container { display: flex; flex-direction: column; width: 100%; } .price.out-of-stock { color: #eb5757; } @media screen and (max-width: 851px) { .price__container .price { font-size: 0.8rem; } } /* Outer product list structure */ /* Inner structure */ .product-list { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 1.6rem; justify-content: flex-start; } .product-list.visible { opacity: 1; visibility: visible; transition: opacity 0.5s ease-in; } .product-list.hidden { opacity: 0; visibility: hidden; } .product-list--no-filter { display: grid; grid-template-columns: repeat(auto-fill, 232px); justify-content: flex-start; } .product-list__container { margin-top: 1.2rem; } .filter-results__count { font-family: 'Miasma-Grotesque'; font-weight: 300; } @media screen and (min-width: 852px) { .product-list__container { margin-top: 0; } } @media screen and (max-width: 851px) { .grid-product-list { position: relative; display: flex; flex-direction: column; width: auto; padding-left: 1.2rem; padding-right: 1.2rem; } .product-list { grid-template-columns: repeat(auto-fill, 300px); } .filters__sorting__column { display: none; } } .product-list__title { margin-top: 0; margin-bottom: 1.2rem; } /* Outer product list structure */ .product-category__submenu { margin-top: 2.2rem; } .product-category__submenu-item { margin-top: 0.2rem; } .product-category__submenu__link { line-height: 1.5; color: #796c5f; } .product-category__submenu__link.selected { color: #403932; text-decoration: underline; cursor: default; } .recently-viewed h2 { margin-bottom: 3.2rem; } .recently-viewed .product-card__details-container { display: none; } @media screen and (max-width: 851px) { .recently-viewed { display: flex; background-color: #f6f5ef; padding-bottom: 3.2rem; } .recently-viewed.s-xxl--bottom { margin-bottom: 0 !important; } .recently-viewed h2 { margin-top: 3.2rem; margin-bottom: 2.2rem; } .recently-viewed .product-card:nth-child(5) { grid-column: 2; } .recently-viewed .product-card:nth-child(6) { grid-column: 3; } .recently-viewed .product-card__thumbnail { height: auto; } .recently-viewed .toggle-favorite { display: none; } } /* Outer category list structure */ /* Inner structure */ .category-list { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 1.6rem; justify-content: flex-start; } .category-list.visible { opacity: 1; visibility: visible; transition: opacity 0.5s ease-in; } .category-list.hidden { opacity: 0; visibility: hidden; } .category-list__item { display: flex; flex-direction: column; } .category-list__item .image-wrapper { position: relative; width: 100%; max-width: 100%; padding-top: 127.12%; } .category-list__item .image-wrapper picture { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .category-list--no-filter { display: grid; grid-template-columns: repeat(auto-fill, 232px); justify-content: center; } @media screen and (max-width: 851px) { .grid-category-list { display: flex; flex-direction: column; } .category-list { grid-template-columns: repeat(auto-fill, 300px); } .filters__sorting__column { display: none; } .grid-category-list { display: flex; flex-direction: column; } .grid-category-list .headline--medium { margin-bottom: 0; } .category-list { grid-template-columns: repeat(2, 1fr); grid-gap: 0.4rem; } .filter-results__count { display: none; } } .category-list__title { margin-top: 0; margin-bottom: 1.2rem; } .category-list__link { margin-top: 1.2rem; margin-bottom: 1.2rem; font-family: 'Miasma-Sharp'; font-weight: 300; font-size: 1.1rem; color: #403932; } .dark-theme .category-list__link { color: white; } .light-theme .category-list__link { color: #403932; } /* COMPONENT PARTS: * 1. HTML Template: /project/templates/partials/filtering-form.html * 2. JavaScript: /project/static_src/js/catalogue/filteringForm.js * 3. CSS: /project/static_src/scss/components/ */ .filters__trigger { margin-top: 2.2rem; } /* SOS Work In Progress */ .product-filters__mobile-heading { display: none; } .product-filters, .product-filters__menu-trigger { position: relative; display: flex; flex-direction: column; justify-content: flex-start; width: 100%; } .product-filters h2, .product-filters__menu-trigger h2 { margin: 0; line-height: 1.5; } .product-filters h2 a, .product-filters__menu-trigger h2 a { color: #403932; } .product-filters__menu-trigger { padding-right: 2.2rem; width: 10vw; } @media screen and (min-width: 852px) { .product-filters__menu-trigger { position: fixed; z-index: 2; } } .product-filters__form { display: flex; flex-direction: column; align-items: flex-start; /* Override general rule in ./forms.scss line 405 */ } .product-filters__form select ~ label, .product-filters__form textarea ~ label { display: block; /* 1 */ } .product-filters { display: none; } .grid-column__filters { position: fixed; top: 0; left: 0; width: 100%; max-width: 340px; height: 100vh; padding-top: 1.6rem; padding-left: 1.2rem; padding-right: 1.2rem; background-color: white; transform: translateX(-100%); overflow-y: scroll; z-index: -1; scrollbar-color: transparent; } .grid-column__filters::-webkit-scrollbar { display: none; } .grid-column__filters.transitioning { z-index: 2; transform: translateX(-100%); transition: transform 0.6s cubic-bezier(0.28, 0, 0.18, 1); } .grid-column__filters.visible { z-index: 2; transform: translateX(0); transition: transform 0.6s cubic-bezier(0.28, 0, 0.18, 1); } .grid-column__filters h2 { margin-top: 1.2rem; } .grid-column__filters .submenu-overflow { width: 100%; padding: 0; padding-bottom: 3.2rem; margin-top: 1.6rem; scrollbar-color: transparent; } .grid-column__filters .submenu-overflow::-webkit-scrollbar { display: none; } .grid-column__filters::-webkit-scrollbar { display: none; } @media screen and (max-width: 851px) { .grid-column__filters { max-width: 320px; } } .product-filters__mobile-header { display: flex; justify-content: space-between; align-items: center; } .product-filters__mobile-header span { color: #948677; } .product-filters__mobile-header .btn--close { margin-top: -0.65rem; margin-right: -7px; } .product-filters__mobile-header .btn--close svg { width: 20px; height: 20px; } .product-filters { display: flex; flex-direction: column; width: 100%; margin-top: 3.2rem; } #catalogue-browse .collapse__title { font-size: 0.65rem; margin-bottom: 0; } .product-filters__form__block { display: flex; flex-direction: column; width: 100%; /* Overrides */ } .product-filters__form__block ul { list-style: none; margin: 0; padding: 0; } .product-filters__form__block ul.active { max-height: 100%; } .product-filters__form__block li { display: flex; justify-content: flex-start; align-items: center; margin-bottom: 0.65rem; } .product-filters__form__block li:first-child { padding-top: 1.2rem; } .product-filters__form__block p { margin-top: 0; } .product-filters__block__title { display: flex; align-items: center; margin-top: 0; padding: 0; } .filter-counter { display: flex; align-items: center; justify-content: center; margin-left: 0.8rem; width: 16px; height: 16px; font-size: 10px; line-height: 15px; color: #403932; background-color: #f6f5ef; border-radius: 16px; } .product-filters__count { margin-left: 0.65rem; margin-top: 3px; font-size: 0.55rem; color: rgba(64, 57, 50, 0.5); } .no-results-label { margin-top: 0; margin-left: 1.2rem; } .filter__pills { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; margin-top: 1.2rem; margin-bottom: 1.2rem; } .filter__pills.empty { margin-top: 0; } .filter__tools { display: flex; justify-content: space-between; position: absolute; width: 100%; top: -1.6rem; margin-bottom: 0.65rem; } .btn--filters { justify-content: flex-start; align-items: center; } .btn--filters svg { width: 11px; height: 11px; margin-left: 0.4rem; } @media screen and (max-width: 851px) { .product-filters__menu-trigger { width: 100vw; padding-left: 1.2rem; } .product-filters__menu-trigger h2 { font-size: 1.1rem; } .filter__tools { justify-content: flex-start; width: auto; right: 1.2rem; margin-bottom: 1.2rem; padding-bottom: 0.4rem; } .filter-results__count { width: 50%; } } .btn--pill__filter { display: flex; align-items: center; margin-right: 0.4rem; margin-bottom: 0.2rem; padding: 0.4rem 0.4rem; padding-bottom: 0.2rem; background-color: transparent; border: 1px solid rgba(64, 57, 50, 0.2); border-radius: 2px; line-height: 1.1; cursor: pointer; } .btn--pill__filter:last-child { margin-right: 0; } .btn--pill__filter * { pointer-events: none; } .btn--pill__filter span { padding-right: 0.8rem; line-height: 1; color: rgba(64, 57, 50, 0.5); } .btn--pill__filter svg { max-width: 10px; } .icon-close-pill { margin-left: 0.65rem; } .filters__sorting__column { display: flex; justify-content: center; align-items: center; } .filters__sorting__column .field__block { margin-bottom: 0; } @media screen and (min-width: 415px) { .filters__mobile-heading { display: none; } #sorting-form { opacity: 1; visibility: visible; transition: visibility 0.15s, opacity 0.5s ease-in; } #sorting-form.hidden { opacity: 0; visibility: hidden; } } #sorting-form .field__block { display: flex; justify-content: flex-start; } #sorting-form .field__block .icon-sort { margin-right: 0.2rem; } /* Hide the default form selects before slim select loads to avoid FOUC */ /* Filtering form clear button */ .reset-form__button { display: flex; opacity: 0; visibility: hidden; transition: opacity 0.5s; } .reset-form__button.visible { opacity: 1; visibility: visible; transition: opacity 0.5s; } .reset-form__button:focus { outline: none; } .reset-form__button svg { margin-right: 7px; } .reset-form__text { color: #403932; } /* Slim select extra styles */ #sorting-form .ss-main .ss-single-selected { padding-top: 0; border: none; background-color: transparent; } #sorting-form .ss-arrow { display: none; } #sorting-form .ss-content { width: calc(100% + s('s-m')); min-width: 150px; right: 0; padding: 0.8rem; background-color: #403932; border: none; } #sorting-form .ss-content .ss-list .ss-option.ss-disabled { background-color: #403932; } #sorting-form .ss-content .ss-list .ss-option { color: rgba(255, 255, 255, 0.5); } #sorting-form .ss-content .ss-list .ss-option:hover, #sorting-form .ss-content .ss-list .ss-option.ss-highlighted { color: white; } #sorting-form .ss-content .ss-list .ss-option-selected { color: rgba(255, 255, 255, 0.85); } /* COMPONENT PARTS: * Markup: *
*
* {% include 'ripped.svg' %} *
*
*
*/ .section-ripped__container { position: relative; } .section-ripped__container--below { margin-top: -45px; } .section-ripped { padding-top: 3.2rem; padding-bottom: 3.2rem; } .section-ripped--green { background-color: #403932; } .section-ripped--white { background-color: white; } @media screen and (max-width: 851px) { .section-ripped { padding-top: 1.2rem; padding-bottom: 1.2rem; } } .section-ripped__bg { position: relative; overflow: hidden; } .section-ripped__bg svg { float: left; /* This is to eliminate a bit of whitespace */ margin-bottom: -1px; } .cart__container { padding: 1.2rem; /* When the message is in the cart hide the close button */ } .cart__container .modal__close-button { display: none; } .cart__container #messages-wrap { margin-bottom: 1.2rem; } @media screen and (min-width: 1280px) { .cart__container { min-width: 100%; } } .cart__header { display: flex; justify-content: space-between; align-items: center; } .cart__price { margin-bottom: 0.8rem; } .cart__price .price { font-family: 'Miasma-Sharp'; font-weight: 300; font-size: 0.8rem; line-height: 1.1; } .cart__price .price--with-discount { margin-left: 1.2rem; } .product__code { margin-top: 0.8rem; padding-top: 0.8rem; border-top: 2px solid #403932; } .add-to-cart__form { margin-bottom: 0.4rem; } .add-to-cart__form .icon-cart-outline { position: absolute; left: 1.2rem; } #catalogue-detail .add-to-cart__form button[type='submit'] { min-width: 214px; } #catalogue-detail .add-to-cart__form .btn__text { color: white; } #catalogue-detail .product-detail__select { display: flex; padding: 0px; margin-bottom: 16px; width: 100%; max-width: 214px; height: 32px; border: none; border-bottom: 1px solid rgba(64, 57, 50, 0.2); border-radius: 0; outline: 0; font-size: inherit; color: #403932; background-color: transparent; cursor: pointer; box-sizing: border-box; transition: background-color .2s; appearance: none; -moz-appearance: none; -webkit-appearance: none; background-image: url(/static/svg/icon-arrow-down.svg); background-position: calc(100% - 3px) center; background-repeat: no-repeat; background-size: 10px; } #catalogue-detail .product-detail__select option { font-size: inherit; } .product-card .add-to-cart__form { margin-bottom: 0; } .add-to-cart--plusminus { display: flex; flex: 1; align-items: flex-end; margin-bottom: 0.8rem; border: 1px solid #403932; border-radius: 6px; overflow: hidden; grid-gap: 0.3rem; } .add-to-cart--plusminus input[type=number]::-webkit-inner-spin-button, .add-to-cart--plusminus input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; } .add-to-cart--plusminus input[type=number] { -moz-appearance: textfield; } .add-to-cart--plusminus button.plusminus { width: 21px; height: 21px; background-color: transparent; border-radius: 21px; border: 1px solid rgba(64, 57, 50, 0.1); cursor: pointer; } .add-to-cart--plusminus .add-to-cart__input { width: 20%; padding: 0.8rem; background-color: transparent; border: none; border-left: 1px solid #403932; border-right: 1px solid #403932; text-align: center; } .add-to-cart--plusminus .add-to-cart__input:focus, .add-to-cart--plusminus .add-to-cart__input:active { outline: none; background-color: transparent; } .product-detail__cart--variants .add-to-cart--plusminus { overflow: visible; } .message { position: relative; display: flex; flex: 1; font-size: 0.8rem; line-height: 1.4; } .message p { margin: 0; } .message .icon-last { position: absolute; right: 0; } .message svg:first-child { margin-right: 0.4rem; } .message.stock-status { display: flex; align-items: center; margin-top: 3.2rem; } @media screen and (max-width: 851px) { .message.stock-status { margin-top: 2.2rem; } } /* Shopping cart page * /project/templates/oscar/basket/basket.html * /project/templates/oscar/basket/partials/line.html **/ .shopping-cart__container { width: 100%; margin: 0 auto; } .shopping-cart__header { margin-bottom: 2.2rem; } .shopping-cart__header .headline--small { margin-bottom: 0; } @media screen and (max-width: 851px) { .shopping-cart__container { margin: 0 auto; } } .shopping-cart__form { margin-bottom: 1.2rem; } .shopping-cart__list { margin: 0; padding: 0; } .shopping-cart__list-item { list-style: none; padding: 0.8rem 0; border-top: 1px solid #eeece9; } .shopping-cart__list-item:last-child { border-bottom: 1px solid #eeece9; } .shopping-cart__line { display: grid; grid-template-columns: 160px 1.75fr 1fr; } .shopping-cart__line-image { font-size: 0; } .shopping-cart__line__details { margin-left: 1.2rem; margin-top: 0.8rem; } .shopping-cart__line__cost { display: flex; flex-direction: column; justify-content: space-between; margin-left: 2.2rem; margin-top: 0.8rem; } @media screen and (max-width: 851px) { .shopping-cart__line { grid-template-columns: 106px 1.25fr 1fr; } .shopping-cart__line__cost { margin-left: 1.2rem; } } /* Cart : shopping cart inner */ .cart-product__link { color: #403932; } .cart-product__heading, .shopping-cart__line__heading { margin: 0; font-size: 0.65rem; line-height: 1.3; } .shopping-cart__line__cost .shopping-cart__line__quantity--top { display: flex; justify-content: space-between; align-items: center; } .shopping-cart__line__price { position: relative; /* Giving it position relative to display loader with absolute positioning */ font-size: 0.65rem; } .shopping-cart__line__price del { color: #c1b9b0; } .shopping-cart__line__quantity { /* Override styles from cart */ } .shopping-cart__line__quantity .add-to-cart--plusminus { margin: 0; border: none; border-radius: 0; } @media screen and (max-width: 414px) { .shopping-cart__line__quantity .add-to-cart--plusminus { justify-content: flex-start; } } .shopping-cart__line__quantity .add-to-cart--plusminus button, .shopping-cart__line__quantity .add-to-cart--plusminus input { padding: 0; } .shopping-cart__line__quantity .add-to-cart--plusminus button:active, .shopping-cart__line__quantity .add-to-cart--plusminus input:active { background-color: #403932; } .shopping-cart__line__quantity .add-to-cart__input { border: none; } @media screen and (max-width: 414px) { .shopping-cart__line { grid-template-columns: 106px 1fr; } .shopping-cart__line__cost { grid-column: 2 / span 1; margin-top: 1.2rem; } .shopping-cart__line__quantity--top { justify-content: flex-end; } .shopping-cart__line__quantity { width: 40%; } } .shopping-cart__line__actions { margin-top: 0.8rem; text-align: left; } .shopping-cart__checkout-controls { display: flex; flex-flow: column wrap; justify-content: center; align-items: center; } #calc-costs { width: 100%; } .basket-discount { display: flex; flex-flow: column wrap; justify-content: center; } .shopping-cart__with-voucher .voucher__button__container { display: none; } .voucher__button { font-size: 0.65rem; color: #b97332; } .voucher_form_container .field { margin: 0; } .voucher_form_info { display: flex; justify-content: center; align-items: center; width: 100%; max-width: 414px; margin: 0 auto 0.8rem; padding: 0.65rem 1.2rem; background-color: #403932; font-size: 0.8rem; line-height: 1.3; } .voucher_form_cancel__btn { margin: 0 auto; line-height: 1.3; } .voucher_form { display: flex; align-items: flex-end; background-color: transparent; border-radius: 6px; padding: 1px; } .voucher_form_submit-btn { margin-left: 1.2rem; min-width: 150px; } /* Cart - shopping cart - checkout */ .cart-checkout__totals__heading { position: relative; display: flex; flex-flow: column wrap; justify-content: center; align-items: center; margin-top: 1.2rem; } .cart-checkout__totals__heading h2 { margin: 0; font-size: 0.65rem; } .cart-checkout__totals__price { font-size: 1.2rem; } .shopping-cart__checkout-controls .cart-checkout__totals__price { font-family: 'Miasma-Sharp'; font-weight: 300; font-size: 1.9rem; } .cart-checkout__shipping-cost { margin-top: 1.2rem; margin-bottom: 1.2rem; text-align: center; } .cart-checkout__shipping-cost__link { color: #b97332; } .cart-checkout__shipping-cost__link::after { background-color: #b97332; } @media screen and (min-width: 852px) { .shopping-cart__checkout-btn { min-width: 225px; } } .cart-checkout__bank-cards { margin-top: 4.8rem; } .cart-checkout__bank-cards h2 { text-align: center; margin-bottom: 0.8rem; } .shipping-upselling-message__container { position: relative; display: flex; justify-content: center; align-items: center; } .shipping-upselling-message__container .notification--bell { top: 0; } .shipping-upselling-message__container[data-status='visible'] .shipping-upselling-message { opacity: 1; transition: opacity 0.5s ease-out; } .shipping-upselling-message__container[data-status='hidden'] .shipping-upselling-message { opacity: 0; transition: opacity 0.5s ease-in; } .cart-quickview__form__container .notification--bell svg path { fill: #403932 !important; } .shipping-upselling-message { position: absolute; } /* COMPONENT PARTS: * 1. HTML Template: /project/templates/oscar/basket/* * a. Cart quickview: /project/templates/partials/basket_quickview.html * 2. JavaScript: * a. /project/static_src/js/basket/basket.js * b. /project/static_src/js/ * 3. CSS: * a. /project/static_src/scss/basket/basket.scss * b. /project/static_src/scss/_component.cart.quickview.scss **/ /* CART PRODUCTS LIST */ /* CART PRODUCT ROW */ .basket-overview__product, .cart-overview__product { display: flex; flex-basis: auto; border-bottom: 1px solid rgba(64, 57, 50, 0.1); padding: 0.8rem 0; } .basket-overview__product:last-child, .cart-overview__product:last-child { border-bottom: none; } .basket-overview__product__image { width: 96px; } .basket-overview__product__image a { display: flex; width: 100%; } .basket-overview__product__details { width: calc(100% - 170px); padding-left: 0.8rem; padding-right: 0.8rem; } .cart-overview__product__header { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-around; height: 100%; } .basket-overview .cart-overview__product__header { height: auto; } .basket-overview__product__title { margin-bottom: 0; } .basket-overview__product__title, .cart-quickview__heading__legend { margin-top: 0; font-family: 'Miasma-Grotesque'; font-weight: 300; font-size: 0.55rem; line-height: 1.3; letter-spacing: 0.02em; } .basket-overview__product__title a, .cart-quickview__heading__legend a { color: #403932; } .basket-overview__product__subtitle { padding: 0; margin: 0; margin-top: 0.2rem; margin-bottom: 1.2rem; line-height: 1.3; } .cart-overview__product__remove { display: flex; } .cart-quickview__table .cart-overview__product__remove { display: none; } .basket-overview__product__price { position: relative; font-size: 0.65rem; line-height: 1.3; letter-spacing: 0.02em; } /* CART HEADER */ .cart-overview__header { display: flex; align-items: center; justify-content: space-between; width: 100%; } /* CART EDIT LINK */ .cart-overview__link { font-size: 1.2rem; text-transform: none; text-decoration: none; } /* CART TOTALS */ .cart-overview__totals { width: 100%; margin-top: 4.8rem; margin-bottom: 1.2rem; } /* CART SUBTOTALS */ .cart-overview__subtotal { display: flex; justify-content: space-between; } .cart-overview__subtotal__label, .cart-overview__subtotal__price { line-height: 1.6; letter-spacing: 0.02em; } .cart-overview__subtotal__label .price, .cart-overview__subtotal__price .price { font-size: 0.8rem; } /* CART CHECKOUT * HTML Structure * .cart-overview__checkout {} * .cart-overview__checkout__container {} **/ .cart-overview__checkout__message__text { padding-bottom: 3.2rem; font-size: 1.2rem; line-height: 1.6; letter-spacing: 0.02em; } .cart-overview__checkout__button { margin-top: 0.8rem; margin-bottom: 1.2rem; } .cart-quickview .close-button { display: flex; align-items: center; justify-content: center; width: 1.2rem; height: 1.2rem; padding: 0.2rem; background-color: transparent; border-radius: 50%; } .cart-quickview .close-button svg { width: 20px; height: 20px; } .basket-overview__products__product__title { margin: 0; padding: 0; line-height: 1.3; } .basket-overview__product__cost { display: flex; flex-direction: column; justify-content: space-between; width: 96px; padding: 0.4rem 0; text-align: right; /* Override styles from cart */ } .basket-overview__product__cost .add-to-cart--plusminus { margin: 0; border: none; border-radius: 0; justify-content: space-between; } @media screen and (max-width: 414px) { .basket-overview__product__cost .add-to-cart--plusminus { justify-content: flex-end; } } .basket-overview__product__cost .add-to-cart--plusminus button, .basket-overview__product__cost .add-to-cart--plusminus input { padding: 0; } .basket-overview__product__cost .add-to-cart--plusminus button:active, .basket-overview__product__cost .add-to-cart--plusminus input:active { background-color: #403932; } .basket-overview__product__cost button.plusminus { width: 22px; height: 22px; border-radius: 21px; border: 1px solid rgba(64, 57, 50, 0.1); } .basket-overview__product__cost .add-to-cart__input { width: 20%; border: none; } /* COMPONENT PARTS: * 1. HTML Template: /project/templates/oscar/basket/* * a. Cart quickview: /project/templates/partials/basket_quickview.html * 2. JavaScript: * a. /project/static_src/js/basket/basket.js * b. /project/static_src/js/ * 3. CSS: * a. /project/static_src/scss/basket/basket.scss * b. /project/static_src/scss/_component.cart.quickview.scss * c. /project/static_src/scss/_component.cart.scss * d. /project/static_src/scss/_component.cart.overview.scss **/ .cart_quickview_open .cart-quickview { will-change: transform; width: 32vw; min-width: auto; } @media screen and (max-width: 851px) { .cart_quickview_open .cart-quickview { min-width: none; width: 100%; } } .cart-quickview__container { margin-top: 1.6rem; } .cart-quickview__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem; } .cart-quickview__heading { margin: 0; font-family: 'Miasma-Sharp'; font-weight: 300; font-size: 1.1rem; line-height: 1.3; } .cart-overview__edit-cart::after { background-color: #b97332; } .cart-quickview__table { width: 100%; } .cart-quickview .cart-overview__checkout__button { max-width: 100%; /* The checkout button is full width in the mini cart */ } /* SWIPER GALLERY STYLES */ :root { --swiper-theme-color: black; } /* Common swiper elements like the arrows and bullets */ .swiper-wrapper { align-items: flex-start; padding-bottom: 35px; } .swiper-button-prev { opacity: 0; transition: opacity 0.25s linear; } .swiper-button-prev::after { font-family: 'Miasma-Grotesque'; font-weight: 300; content: ''; width: 29px; height: 16px; background-image: url(/static/svg/arrow-long.svg); background-size: 85%; background-repeat: no-repeat; transform: rotate(180deg); } .swiper-button-next { opacity: 0; transition: opacity 0.25s linear; } .swiper-button-next::after { font-family: 'Miasma-Grotesque'; font-weight: 300; content: ''; width: 29px; height: 16px; background-image: url(/static/svg/arrow-long.svg); background-size: 85%; background-repeat: no-repeat; } .swiper-button-next, .swiper-button-prev { align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid #403932; border-radius: 50%; background-color: transparent; z-index: 1; } .swiper-button-next:focus, .swiper-button-prev:focus { outline: none; } .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity: 0 !important; } .swiper-container-horizontal > .swiper-pagination-progressbar, .swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { top: auto; bottom: 0; height: 2px; } .dark-theme .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: white; } .swiper-button-next::after, .swiper-button-prev::after { font-size: 16px !important; /* important because of JS override */ } .swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 0; } /* The Gallery Component: one image with thumbnail navigation and zoom */ .swiper-container-outer__wrapper { position: relative; width: 100%; max-height: 100%; } @media screen and (max-width: 851px) { .gallery-thumbs { display: none; } } .swiper-pagination-bullet { width: auto; height: auto; border-radius: 0; background-color: #403932; width: 6px; height: 6px; } .swiper-pagination-bullet-active { background-color: #403932; } #home .swiper-container { padding-bottom: 25px; } #home .swiper-container-outer__wrapper { max-height: 100%; max-width: 100%; } #home .swiper-pagination { display: flex; justify-content: center; } #home .swiper-pagination .swiper-pagination-bullet:focus { outline: none; border: none; } @media screen and (max-width: 851px) { #home .swiper-container-outer__wrapper { display: flex; justify-content: center; } } .swiper-container-outer__wrapper { /* Gallery main slides */ /* Thumbnail navigation for gallery: slides outer cont ainer */ /* Thumbs wrapper: slides parent (inner container) */ /* Thumb slides */ } .swiper-container-outer__wrapper .swiper-container-outer { position: relative; display: none; flex-direction: column; width: 100%; max-height: 100%; z-index: 0; } .swiper-container-outer__wrapper .swiper-container { width: 100%; height: 100%; } .swiper-container-outer__wrapper .gallery-top .swiper-slide { display: flex; justify-content: center; overflow: hidden; } .swiper-container-outer__wrapper .gallery-top .swiper-slide img { height: auto; } .swiper-container-outer__wrapper .gallery-thumbs { position: absolute !important; bottom: -103px; height: 138px; box-sizing: border-box; padding: 10px 0; } .swiper-container-outer__wrapper .gallery-thumbs .swiper-wrapper { display: flex; justify-content: center; gap: 16px; } .swiper-container-outer__wrapper .gallery-thumbs .swiper-slide { display: flex; align-items: center; margin-top: 2px; margin-right: 0 !important; width: auto; height: 123px; outline: 2px solid transparent; cursor: pointer; } .swiper-container-outer__wrapper .gallery-thumbs .swiper-slide-thumb-active img { border-bottom: 2px solid #b97332 !important; } .swiper-container-outer__wrapper .gallery-thumbs .swiper-slide img { width: auto; border-bottom: 2px solid transparent; padding-bottom: 3px; height: 100%; overflow: hidden; } /* The Carousel Component */ /* When a heading is followed by a carousel * remove its margin-bottom property **/ @media screen and (min-width: 852px) { .carousel__outer { position: relative; } .carousel__outer::after, .carousel__outer::before { content: ''; position: absolute; top: 0; width: 140px; height: 100%; z-index: 1; background: linear-gradient(270deg, #f6f5ef 0%, rgba(246, 245, 239, 0) 100%); opacity: 0; } .category-index-jewelry .carousel__outer::after, .category-index-jewelry .carousel__outer::before { background: linear-gradient(270deg, #ac956f 0%, rgba(172, 149, 111, 0) 100%); } .category-index-arts-crafts .carousel__outer::after, .category-index-arts-crafts .carousel__outer::before { background: linear-gradient(270deg, #7f7766 0%, rgba(127, 119, 102, 0) 100%); } .light-theme .carousel__outer::after, .light-theme .carousel__outer::before { background: linear-gradient(270deg, #f6f5ef 0%, rgba(246, 245, 239, 0) 100%) !important; } .carousel__outer::before { left: 0; transform: rotate(180deg); z-index: 2; } .carousel__outer::after { right: 0; } .carousel__outer:hover .swiper-button-next, .carousel__outer:hover .swiper-button-prev { opacity: 1; transition: opacity 0.25s linear; } .carousel__outer:hover::after, .carousel__outer:hover::before { opacity: 1; transition: opacity 0.25s linear; } } .carousel__container { display: flex; flex-direction: column; } .carousel__container .carousel__title { align-self: flex-start; margin-bottom: 0; user-select: none; } .carousel__container .view-all { display: flex; align-self: flex-end; margin-top: -1.2rem; } @media screen and (max-width: 851px) { .carousel__container .carousel__title { order: 1; margin-bottom: 1.2rem; } .carousel__container .carousel { order: 2; } .carousel__container .view-all { align-self: flex-start; order: 3; margin-top: 0; } } .carousel-title { color: #b97332; } @media screen and (max-width: 851px) { .carousel-title { margin-bottom: 2.2rem; } } @media screen and (min-width: 852px) { .carousel-title { margin-bottom: 3.2rem; } } .carousel__outer .swiper-button-next, .carousel__outer .swiper-button-prev { top: 50; z-index: 2; } .carousel__outer .swiper-button-next { right: 1.2rem; } .carousel__outer .swiper-button-prev { left: 1.2rem; opacity: 0; } .carousel { position: relative; height: 100%; } .carousel .swiper-container { width: calc(100% - 52px); height: 100%; margin-left: 0; overflow: visible; } .carousel .swiper-wrapper { align-items: stretch; } .carousel .swiper-slide { width: 240px; font-size: 18px; margin-right: 1.6rem !important; /* Center slide text vertically */ display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: stretch; height: auto; } .carousel .swiper-slide .product-card { width: 100%; height: 100%; } @media screen and (max-width: 851px) { .carousel .swiper-container { width: 100%; padding-top: 0; overflow: hidden; } .carousel .swiper-button-prev, .carousel .swiper-button-next { display: none; } .carousel.no-bg .product-card { padding: 0; } } @media screen and (min-width: 852px) { .carousel { min-height: 440px; } } /* Thumbnail navigation for gallery: slides outer cont ainer */ .gallery-thumbs { bottom: -60px; box-sizing: border-box; } /* Thumbs wrapper: slides parent (inner container) */ .gallery-thumbs .swiper-wrapper { flex-direction: row; } /* Thumbs wrapper: slides parent (inner container) */ /* Thumb slides */ /* * 1. */ .drawer__container-outer { position: fixed; width: 420px; height: 100vh; top: 0; right: 0; display: flex; flex-direction: column; overflow-y: scroll; padding: 2.2rem; margin-right: 0.5rem; background-color: white; transform: translate3d(110%, 0, 0); z-index: 2; /* 1 */ } .drawer__container-outer::-webkit-scrollbar { display: none; } @media screen and (max-width: 851px) { .drawer__container-outer { width: 100%; padding: 1.2rem; margin-right: 0; transform: translate3d(100%, 0, 0); -webkit-overflow-scrolling: touch; } } .drawer__container-outer .close-button { display: flex; align-self: flex-end; align-items: center; box-sizing: content-box; position: absolute; top: 0.8rem; right: 14%; } .drawer__container-outer .close-button > * { pointer-events: none; /* Do not capture events on the element children */ } .drawer__container-outer .close-button .icon-close { width: 100%; height: 100%; } @media screen and (min-width: 852px) { .drawer__container-outer .close-button .dark-theme svg path { stroke: #403932; } } .drawer__container-inner { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; width: 90%; min-height: 85%; } @media screen and (max-width: 851px) { .drawer__container-inner { width: 100%; } .drawer__container-outer .close-button { right: 1.2rem; } } .drawer__container-inner--top { width: 100%; } .c-expand--text { position: relative; overflow: hidden; transition: height 0.3s ease-out; } .c-expand--text.overflow { height: 170px; } .c-expand--text__button { cursor: pointer; } /* Expand Hidden Content - Accordion */ ol.collapse { list-style: none; margin: 0; padding: 0; } .collapse__title { position: relative; cursor: pointer; user-select: none; transition: all 0.2s; padding: 1.2rem 0; } .collapse__title > * { pointer-events: none; } .collapse__title--cross.active::after { opacity: 0; } .collapse__title--cross::before, .collapse__title--cross::after { position: absolute; content: ''; display: inline-block; height: 2px; width: 12px; border-bottom: 1px solid black; right: 0; top: 30px; } .collapse__title--cross::after { transition: all 0.1s ease; transform: rotate(-90deg); } .collapse__title--arrow { padding: 0; } .collapse__title--arrow.active::after { transition: all 0.25s ease; transform: translateY(-50%) rotate(0deg); } .collapse__title--arrow::after { content: ''; background-image: url('data:image/svg+xml;utf8,'); position: absolute; display: inline-block; width: 12px; height: 8px; right: 0; top: 50%; } .collapse__title--arrow::after { transition: all 0.25s ease; transform: translateY(-50%) rotate(-180deg); } p.collapse__title { margin-bottom: 0; } .collapse__title .icon-plus { opacity: 1; visibility: visible; transition: opacity 0.2ms; } .collapse__title .icon-close { display: none; /* use display none so it doesn't count as a 3 object in the flex series */ opacity: 0; visibility: hidden; transition: opacity 0.2ms; } .collapse__title.active .icon-plus { display: none; opacity: 0; visibility: hidden; transition: opacity 0.2ms; } .collapse__title.active .icon-close { display: block; opacity: 1; visibility: visible; transition: opacity 0.2ms; } .collapse__content { max-height: 0; padding: 0; overflow: hidden; transition: all 0.2s ease-out; } .collapse__content p { margin-bottom: 0; } /* This is the collapse widget in the product page. * Reference in /project/static_src/scss/ //TODO */ #product-detail .collapse { border-bottom: 1px solid #403932; margin-top: 1.2rem; margin-bottom: 3.2rem; } #product-detail .collapse__title { display: flex; align-items: center; justify-content: center; padding-top: 0.8rem; padding-bottom: 0.8rem; border-top: 1px solid #403932; line-height: 1.3; letter-spacing: 0.18em; } #product-detail .collapse__title .icon-close, #product-detail .collapse__title .icon-plus { position: absolute; right: 0; } #product-detail .collapse__title .icon-close { right: -2px; } #product-detail .collapse__content ul li, #product-detail .collapse__content p { font-size: 0.8rem; line-height: 1.6; letter-spacing: 0.02em; padding: 0; } #product-detail .collapse__content ul { padding-bottom: 0.8rem; } #product-detail .collapse__content p { margin-bottom: 0.8rem; text-align: center; } /* This is the collapse widget in the help & account pages. * Reference in /project/static_src/scss/customer/baseaccountpage.scss * Collapse title has more spacing (1) * Center the expand & collapse icons (2) * Do not highlight the collapse title when clicked (3) */ .customer-baseaccountpage .collapse__title { padding: 0.4rem 0.4rem 0.4rem 0; /* 1 */ display: flex; /* 2 */ align-items: center; /* 2 */ user-select: none; /* 3 */ font-size: 0.8rem; } .customer-baseaccountpage .collapse__title::before, .customer-baseaccountpage .collapse__title::after { top: auto; /* 2 */ } .customer-baseaccountpage .collapse__row { border-bottom: 1px solid rgba(64, 57, 50, 0.2); } .customer-baseaccountpage .collapse__row p { margin: 0; padding: 0.8rem 0; } /* This is the collapse widget in the main navigation. * Reference in /project/static_src/scss/components/component.menu.primary.scss */ .menu-second-level__link.collapse__title { display: flex; align-items: center; } .menu-second-level__link.collapse__title svg { margin-left: 0.8rem; transform: rotate(0deg); transition: transform 0.25s; } .menu-second-level__link.collapse__title.active svg { transform: rotate(-180deg); transition: transform 0.25s; } /* This is the collapse widget in the product filter menu. * Reference in /project/static_src/scss/components/component.product.list.filters.scss */ .product-filters .collapse__title { font-family: 'Miasma-Grotesque'; font-weight: 300; font-size: 0.8rem; } .product-filters .collapse__title--arrow.active::after { background-image: url('data:image/svg+xml;utf8,'); transition: all 0.25s ease; transform: translateY(-50%); } .product-filters .collapse__title--arrow::after { content: ''; background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; position: absolute; display: inline-block; width: 15px; height: 15px; right: 0; top: 50%; } .product-filters .collapse__title--arrow::after { transition: all 0.25s ease; transform: translateY(-50%); } /* The header element */ @media screen and (max-width: 851px) { .top-bar--left { margin-top: 1.6rem; padding-left: 1.2rem; } .top-bar--right.menu-secondary__container { display: none; } } @media screen and (min-width: 852px) { .header-global { top: 3.2rem; z-index: 2; } .top-bar--left { position: fixed; width: 10%; top: 2.8rem; left: 3.2rem; z-index: 2; } .top-bar--right { width: 10%; top: 3.2rem; right: 3.2rem; z-index: 2; } } /* Logo */ .logo { display: flex; align-items: center; } /* The primary menu: categories */ /* The secondary menu: search, account, cart, favorites, language, locale */ .menu-secondary__container { display: flex; align-items: center; justify-content: center; } /* MENU * The primary menu: categories **/ .menu-primary__container__wrapper { display: flex; align-items: stretch; } .menu__list { display: flex; flex-direction: column; align-items: center; } .menu__link { line-height: 1.3; color: #403932; } .dark-theme .menu__link { color: white; } .light-theme .menu__link { color: #403932; } .dark-theme .menu-primary__container.visible .submenu-overflow .menu__link { color: black; } .main_nav_open .menu-first-level__list .menu__link { color: #403932; transition: color 0.25s; } .top-level span { pointer-events: none; } @media screen and (max-width: 851px) { .top-home-bg { position: absolute; } .top-home-bg .bg-color { display: none; } .mobile-menu-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: -1; opacity: 0; visibility: hidden; transition: opacity 0.5s ease-in; } .mobile-menu-overlay.visible { background-color: rgba(0, 0, 0, 0.5); z-index: 1; opacity: 1; visibility: visible; transition: opacity 0.5s ease-in; } .submenu-overflow { position: relative; width: 89.38%; height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */ height: calc(var(--vh, 1vh) * 100); padding: 1.2rem; background-color: white; overflow: hidden; overflow-y: scroll; } .menu-primary__container { position: fixed; top: 0; left: 0; display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */ height: calc(var(--vh, 1vh) * 100); z-index: 20; transform: translateX(-100%); } .menu-primary__container.transitioning { transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.28, 0, 0.18, 1); } .menu-primary__container.visible { position: fixed; top: 0; transform: translateX(0); transition: transform 0.3s cubic-bezier(0.28, 0, 0.18, 1); } .menu-primary__container.visible .menu-first-level__list { margin-bottom: 1.2rem; } .menu-primary__container.visible .menu-first-level__list:first-child { margin-bottom: 3.2rem; } .hover-wrapper { width: 100%; } .menu__list { width: 100%; flex-direction: column; justify-content: flex-start; align-items: flex-start; margin-top: 4.8rem; } .menu__list > .menu__list-item { transform: translateX(0); transition: transform 0.3s cubic-bezier(0.28, 0, 0.18, 1); } .menu__list-item { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; width: 100%; margin-right: 0; margin-bottom: 0.4rem; padding-right: 0; } .menu__list-item.has-children { display: flex; } .menu__list-item.featured__items { display: none; } .menu__link { position: relative; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; text-align: left; color: #403932; } .top-level .menu__link span { font-family: 'Miasma-Sharp'; font-weight: 300; font-size: 1.9rem; } .menu-second-level__list { margin-top: 0; } .menu-second-level__list { max-height: 0; z-index: -1; opacity: 0; visibility: hidden; overflow: hidden; transition: all 0.2s cubic-bezier(0.28, 0, 0.18, 1); } .menu-second-level__list.visible { max-height: 500px; margin-top: 1.2rem; margin-left: 2.2rem; z-index: 1; opacity: 1; visibility: visible; transition: all 0.5s cubic-bezier(0.28, 0, 0.18, 1); } .menu-second-level__list .btn--arrow-left { display: flex; left: 0; transform: rotate(180deg); } .menu-second-level__list .back { height: 100%; } .menu-second-level__list .back .btn__text { padding-left: 50px; } /* Set the second level top anchor by * calculating the list item heights */ .menu__list-item:nth-child(1) .menu-second-level__list { top: 0; } .menu__list-item:nth-child(2) .menu-second-level__list { top: -50px; } .menu__list-item:nth-child(3) .menu-second-level__list { top: -100px; } .menu__list-item:nth-child(4) .menu-second-level__list { top: -150px; } .menu__utilities { display: flex; width: 80%; height: 50px; background-color: white; } .menu__utilities li { display: flex; width: 50%; padding: 0; border-top: 1px solid #403932; } .menu__utilities li:first-child { width: calc(50% - 1px); border-right: 1px solid #403932; } .menu__utilities li a { display: flex; justify-content: flex-start; align-items: center; width: 100%; padding-left: 0.8rem; padding-right: 0.8rem; padding-top: 1.2rem; padding-bottom: 1.2rem; font-size: 0.8rem; } .menu__utilities li a:last-child { border: none; } .menu__utilities li a svg { margin-right: 0.8rem; } ul.menu__languages { display: flex; align-items: center; margin-top: 0.2rem; } ul.menu__languages li { display: flex; align-items: center; margin-right: 1rem; } .close-mobile-menu { position: absolute; top: 0.8rem; right: 0.8rem; opacity: 0; visibility: hidden; transition: opacity 0.5s ease-in; } .close-mobile-menu.visible { opacity: 1; visibility: visible; transition: opacity 0.5s ease-in; } .close-mobile-menu svg path { stroke: #403932 !important; } .expand-submenu { align-items: center; height: 50px; } .expand-submenu.expanded svg line:first-child { opacity: 0; transition: opacity 0.15s ease-out; } } @media screen and (min-width: 852px) { /* When the submenu is expanded the position and * z-index of sibling elements needs to change to * set the submenu always stay on top. This has to * do with the Locomotive Scroll and transform properties * assigned to each section */ .main_nav_open { /* Specific style for kori project * 1. This will make the submenu overlay stay on top * Note: this should go in separate file for special * layout overrides. */ } .main_nav_open .grid-sidebar, .main_nav_open [data-scroll-section-id='section1'] { position: relative; z-index: -1; } .main_nav_open .top-home-bg { position: relative; /* to make it sit on top of other elements */ z-index: 1; /* 1 */ transform-style: preserve-3d; } .menu-primary__container { display: flex; align-items: center; margin-top: 2.4rem; } ul.menu__languages, .menu__utilities, .close-mobile-menu, .btn--arrow { display: none; } .menu-second-level__list { position: absolute; opacity: 0; visibility: hidden; transition: opacity 0.25s; } .menu-second-level__list.featured__items__list { padding-left: 0 !important; margin-left: 0 !important; } .menu-second-level__list .menu__link { opacity: 0; transition: opacity 0.25s; } .menu__list { flex-direction: row; } .menu-primary__container .menu__list-item { padding-right: 2.2rem; padding-top: 0.8rem; padding-bottom: 0.8rem; } .menu__list-item--back { display: none; } .hover-menu-overlay { display: block; position: absolute; width: 100vw; height: 85vh; top: 0; left: 0; background: linear-gradient(180deg, #ffffff 60.85%, rgba(255, 255, 255, 0.69) 80.43%, rgba(255, 255, 255, 0) 100%); visibility: hidden; opacity: 0; transform: translateY(-100%); } .hover-menu-overlay.active { visibility: visible; opacity: 1; transform: translateY(0); transition: opacity 0.5s, transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); } .hover-wrapper { visibility: hidden; opacity: 0; } .hover-wrapper.inactive { transform: translateY(80px); } .hover-wrapper.active { display: flex; position: absolute; width: 100vw; height: 70vh; top: 0; left: 0; visibility: visible; opacity: 1; transform: translateY(0); transition: transform 1s cubic-bezier(0.075, 0.82, 0.165, 1) 0.01s, opacity 0.5s 0.01s; } .hover-wrapper.active .menu-second-level__list { position: relative; margin-left: 3.2rem; margin-right: 3.2rem; display: flex; align-items: flex-start; height: auto; padding: 9.6rem 0 9.6rem 10vw; transform: translateY(0); transition: transform 0.5s; } .hover-wrapper.active .menu-second-level__list.selected { opacity: 1; visibility: visible; transition: opacity 0.5s; } .hover-wrapper.active .menu__list-item { width: auto; height: auto; margin-right: 0; padding: 0; } .hover-wrapper.active .menu__list-item.featured__items { display: flex; } .hover-wrapper.active .menu__list-item.featured__items .featured__item { margin-right: 2.2rem; } .hover-wrapper.active .menu__list-item.featured__items .featured__item:last-child { margin-right: 0; } .hover-wrapper.active .menu__list-item.featured__items .featured__item figcaption { margin-top: 0.2rem; } .hover-wrapper.active.featured__items__list { margin: 0; padding: 9.6rem 0 9.6rem; } .hover-wrapper.active.featured__items__list .menu__link { padding: 0; font-size: 0.65rem; } .hover-wrapper.active .menu-second-level__list:not(.featured__items__list):not(.search__results) { display: block; height: auto; width: auto; } .chrome .hover-wrapper.active .menu-second-level__list:not(.featured__items__list):not(.search__results), .safari .hover-wrapper.active .menu-second-level__list:not(.featured__items__list):not(.search__results) { column-count: 2; } .hover-wrapper.active .menu-second-level__list:not(.featured__items__list):not(.search__results) .menu__list-item { width: 100%; min-width: 186px; margin-bottom: 0.4rem; background-color: transparent; break-inside: avoid-column; } .hover-wrapper.active .menu-second-level__list:not(.featured__items__list):not(.search__results) .menu__link { border: none; opacity: 1; transition: all 0.25s; } .hover-wrapper.active .menu-second-level__list.search__results { width: 75%; } /* Make the primary nav elements take up 100% of their container */ .menu__link { position: relative; } /* Kori Specific * 1. The hover wrapper starts at top: 0, so the link needs a z-index to not * be covered by the submenu div */ .menu-first-level__list .menu__link { z-index: 1; /* 1 */ } .expand-submenu { display: none; } } /* MENU * The secondary menu: search, account, cart, favorites, language, locale **/ .menu-secondary__container { display: flex; flex-direction: column; align-items: flex-end; } .menu-secondary__item:last-child { margin-right: 0; } @media screen and (min-width: 852px) { .menu-secondary__item { margin-bottom: 0.8rem; } } @media screen and (max-width: 851px) { .menu-secondary__container { align-items: center; padding-right: 0; padding-top: 0; padding-bottom: 0; } } /* MY ACCOUNT BUTTON IN NAVBAR * TODO: Find the rest of the cart styles and maybe merge the following **/ .menu-secondary__item a.account { display: flex; } .menu-secondary__item[data-user='authenticated'] { margin-right: 0.4rem; } .menu-secondary__item--double { display: flex; } .menu-secondary__item--double svg { width: 0.8rem; height: 0.8rem; } /* CART BUTTON IN NAVBAR * TODO: Find the rest of the cart styles and maybe merge the following **/ /* Standalone bag lines (styles differ for mobile menu) */ .bag-lines { position: absolute; display: flex; justify-content: center; align-items: center; box-sizing: content-box; width: 16px; height: 13px; padding-top: 3px; /* to create a more centered feel in the circle */ right: 14px; top: -5px; border-radius: 50%; background-color: #b97332; color: white; font-size: 10px; line-height: 15px; z-index: 0; } .menu-secondary__item .bag { position: relative; display: flex; align-items: center; } .menu-secondary__item .bag-lines { right: 8px; top: -8px; } .menu-secondary__item .empty-bag { display: none; } .menu-secondary__item svg { width: 0.8rem; height: 0.8rem; } #not-found .bag { display: none; } .language__link { color: #403932; } .dark-theme .language__link { color: #f6f5ef; } .light-theme .language__link { color: #403932; } .submenu-overflow .language__link { color: #403932; } .menu-secondary__item .language__link { text-transform: capitalize; letter-spacing: 0.1em; } /* MENU * The secondary menu: search, account, cart, favorites, language, locale **/ @media screen and (max-width: 851px) { .menu-tertiary__container { display: none; } } @media screen and (min-width: 852px) { .menu-tertiary__container { width: 10vw; padding-left: 3.2rem; bottom: 3.2rem; z-index: 1; } .menu-tertiary__container .menu__list { flex-direction: column; align-items: flex-start; } .menu-tertiary__container .menu__link { line-height: 2; white-space: nowrap; } } /* * **/ @media screen and (max-width: 851px) { .menu-sticky { position: fixed; display: block; width: 100vw; } .menu-sticky--bottom { display: flex; justify-content: space-between; align-items: center; height: 64px; bottom: 0; padding-left: 1.2rem; padding-right: 1.2rem; background-color: white; z-index: 1; } .menu-sticky--bottom svg { width: 1.2rem; height: 1.2rem; stroke: black; } } @media screen and (min-width: 852px) { .menu-sticky { display: none; } } @media screen and (min-width: 852px) { .touchham { display: none; } } @media screen and (max-width: 851px) { .touchham { position: relative; background: transparent; border: none; } .touchham .hammenu { width: 23px; height: 17px; transform: rotate(0deg) translateY(-50%); cursor: pointer; position: absolute; top: 0; left: 0; } .touchham .hammenu > * { pointer-events: none; } .touchham .hammenu span { display: block; position: absolute; height: 1px; width: 100%; background: black; border-radius: 0; opacity: 1; left: 0; transform: rotate(0deg); transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); } .touchham .hammenu span:nth-child(1) { top: 0; } .touchham .hammenu span:nth-child(2), .touchham .hammenu span:nth-child(3) { top: 8px; } .touchham .hammenu span:nth-child(4) { top: 16px; } .touchham .hammenu.open span:nth-child(1) { top: 8px; width: 0%; left: 50%; } .touchham .hammenu.open span:nth-child(2) { transform: rotate(45deg); } .touchham .hammenu.open span:nth-child(3) { transform: rotate(-45deg); } .touchham .hammenu.open span:nth-child(4) { top: 8px; width: 0%; left: 50%; } } nav[aria-label='breadcrumb'] ul.absolute { top: 0.8rem; } .breadcrumb { display: inline-flex; flex-wrap: wrap; margin-top: 1.2rem; } #catalogue-detail .breadcrumb { margin-top: 4.8rem; margin-bottom: 4.8rem; } @media screen and (max-width: 851px) { #catalogue-detail .breadcrumb { margin-top: 2.2rem; } } .breadcrumb__item { display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 0.4rem; margin-bottom: 0.4rem; } .breadcrumb__item::after { content: '>'; padding-left: 0.4rem; font-family: 'Miasma-Sharp'; font-weight: 300; color: rgba(64, 57, 50, 0.5); } .breadcrumb__item:last-child::after { content: ''; } .breadcrumb--checkout .breadcrumb__item { color: rgba(64, 57, 50, 0.5); } .breadcrumb--checkout .breadcrumb__item.active { color: #403932; } @media screen and (max-width: 851px) { nav[aria-label='breadcrumb'] { position: relative; max-width: calc(100% - s('s-ml')); padding: 0; overflow-x: hidden; } .breadcrumb__item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } .breadcrumb__link { display: flex; align-items: center; line-height: 1.5; color: rgba(64, 57, 50, 0.5); font-size: 0.5rem; } .breadcrumb__link::after { background-color: rgba(64, 57, 50, 0.3); } .footer-global--top__container { position: relative; } .footer-global--top .grid { display: grid; grid-template-columns: repeat(15, 1fr); } /* Footer newsletter column */ .newsletter__cta { grid-column: 1 / span 4; } .newsletter__form { grid-column: 5 / span 6; } /* Footer illustration (top segment only) */ .footer-illustration__container { position: relative; height: 204px; grid-column: 11 / span 5; } .footer-illustration { position: absolute; bottom: 10px; right: 0; } /* Footer bg ripped icon */ .footer-global--top__bg { position: relative; overflow: hidden; } .footer-global--top__bg svg { float: left; /* This is to eliminate a bit of whitespace */ margin-bottom: -1px; } .footer-global--bottom__container { margin-top: -50px; margin-top: 0; } @media screen and (max-width: 851px) { .footer-global--bottom__container { display: none; } } @media screen and (min-width: 1500px) { .footer-global--bottom__container { margin-top: -73px; margin-top: 0; } } .footer-global--bottom { position: relative; margin-bottom: 3.2rem; overflow: hidden; } .footer-global--bottom .grid { display: grid; grid-template-columns: repeat(15, 1fr); } .footer-global--bottom .grid ul:first-child { grid-column: 1 / span 4; } .footer-global--bottom .grid ul:nth-child(2) { grid-column: 6 / span 4; } .footer-global--bottom .grid ul:nth-child(3) { grid-column: 11 / span 4; } .footer-global--bottom .grid ul:nth-child(4) { grid-column: 12 / span 4; margin-bottom: 0; } @media screen and (max-width: 851px) { .footer-global--bottom .grid ul:nth-child(4) { grid-column: 1 / span 4; justify-content: flex-start; } } @media screen and (max-width: 851px) { .footer-global--bottom .grid { display: flex; flex-wrap: wrap; } .footer-global--bottom .grid ul:first-child { display: none; } .footer-global--bottom .grid ul:nth-child(2) { width: calc(50%); } .footer-global--bottom .grid ul:nth-child(3) { width: calc(50%); } .footer-global--bottom .grid ul:nth-child(4) { width: calc(100%); justify-content: flex-start; } } @media screen and (max-width: 414px) { .footer-global--bottom .grid ul:nth-child(4) { justify-content: space-between; } } @media screen and (max-width: 851px) { .footer-global--top .grid { display: flex; flex-direction: column; } .footer-illustration__container { position: static; height: auto; } .footer-illustration { right: 3.2rem; } } @media screen and (max-width: 851px) { .footer-illustration__container { display: flex; justify-content: flex-end; } .footer-illustration { position: relative; align-self: flex-end; right: 2.2rem; } } @media screen and (max-width: 414px) { .footer-illustration { right: 0; } } /* Footer navigation */ .footer-navigation__list { margin: 0; padding: 0; list-style: none; } .footer-navigation__list-item { margin-bottom: 0.8rem; } .footer-navigation__link { line-height: 1.2; color: #403932; } .dark-theme .footer-navigation__link { color: white; } .footer-navigation__link svg { height: 16px; width: 16px; margin-right: 0.65rem; } .social-media .footer-navigation__link { display: flex; align-items: center; } .social-media .footer-navigation__link::after { display: none; } .partner-logos { display: flex; align-items: flex-start; justify-content: flex-end; } .partner-logos li { margin-right: 2.2rem; } @media screen and (max-width: 414px) { .partner-logos li { margin-right: 1.2rem; } } /* Privacy policy, credits & copyright */ .footer-global__imprint { padding-bottom: 4.8rem; } .footer-global__imprint .grid { display: flex; justify-content: flex-start; flex-flow: row wrap; } a.policy__links__link, .credit__links p, .credit__links a { margin: 0; color: #c1b9b0; } a.policy__links__link::after, .credit__links p::after, .credit__links a::after { background-color: #c1b9b0; } .policy__links { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; } .policy__links li { margin-right: 1.2rem; } .credit__links { display: flex; align-items: center; margin-top: 3px; } @media screen and (max-width: 851px) { /* Add some padding bottom to the footer because we * have a sticky menu at the bottom of the screen for mobile * which covers the footer, so the padding forces scrolling * past the sticky menu. */ .footer-global { padding-top: 1.2rem; padding-bottom: 64px; background-color: #f6f5ef; } .footer-global.s-xxl--top { margin-top: 0; } .footer-global__imprint { padding-bottom: 0.4rem; } .footer-global__imprint .grid { display: block; } .policy__links, .credit__links { width: 100%; } .credit__links { display: block; margin-top: 0.4rem; } } /* General styles for all types of buttons */ .progress-button { padding: 0; padding-left: 1.2rem; padding-right: 1.2rem; line-height: 45px; } .progress-button * { pointer-events: none; } @media screen and (max-width: 851px) { .progress-button { padding-left: 1.2rem; padding-right: 1.2rem; line-height: 45px; } } @media screen and (max-width: 414px) { .progress-button { padding: 0; } } .progress-button[disabled], .progress-button[disabled].state-loading { cursor: default; } .progress-button .content { position: relative; display: block; } .progress-button .content::before, .progress-button .content::after { position: absolute; right: 20px; color: #0e7138; font-family: 'icomoon'; opacity: 0; transition: opacity 0.3s 0.3s; } .progress-button .content::before { content: '\e600'; /* Checkmark for success */ } .progress-button .content::after { content: '\e601'; /* Cross for error */ } .progress-button.state-success .content::before, .progress-button.state-error .content::after { opacity: 1; } .notransition { -webkit-transition: none !important; transition: none !important; } .progress-button .progress-inner { position: absolute; left: 0; background: #23201c; } .progress-button[data-horizontal] .progress-inner { top: 0; width: 0; height: 100%; transition: width 0.3s, opacity 0.3s; } /* Individual styles */ /* Choose the effect(s) you want, delete the rest */ /* Fill horizontal */ /* ====================== */ .progress-button[data-style='fill'][data-horizontal] { overflow: hidden; } .progress-button[data-style='fill'][data-horizontal] .content { z-index: 1; transition: transform 0.3s; } .progress-button[data-style='fill'][data-horizontal] .content::before, .progress-button[data-style='fill'][data-horizontal] .content::after { top: 100%; right: auto; left: 50%; transition: opacity 0.3s; transform: translateX(-50%); } .progress-button[data-style='fill'][data-horizontal].state-success .content, .progress-button[data-style='fill'][data-horizontal].state-error .content { transform: translateY(-100%); } .newsletter__cta { max-width: 315px; margin-right: 3.2rem; margin-bottom: 1.2rem; } .newsletter__cta h2 { margin: 0; } .newsletter__form { display: flex; flex-direction: column; } .newsletter__form .field { width: 305px; } form.newsletter__form [type='submit'] { margin-top: 0; } .newsletter__input { padding-left: 0.2rem; background-color: transparent; border: none; border-bottom: 2px solid rgba(34, 45, 57, 0.5); font-family: 'Miasma-Sharp'; font-weight: 300; font-size: 0.65rem; color: rgba(34, 45, 57, 0.5); } .newsletter__input:focus { outline: none; border: none; border-bottom: 2px solid rgba(34, 45, 57, 0.8); color: rgba(34, 45, 57, 0.8); } .newsletter__label { font-family: 'Miasma-Sharp'; font-weight: 300; font-size: 0.65rem; color: rgba(34, 45, 57, 0.5); } .newsletter__form .ac-checkbox { max-width: 440px; } @media screen and (min-width: 852px) { .newsletter__input { width: 315px; } } @media screen and (max-width: 851px) { .newsletter__form { margin-bottom: 2.2rem; } } /* The following is a hacky solution to make the legend appear custom */ legend { width: 100%; } fieldset { height: auto; overflow: hidden; /* float clearing applied to fieldsets */ } input:focus, textarea:focus, select:focus { outline: none; } input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { box-shadow: 0 0 0 1000px white inset; color: #c1b9b0; } input[type='text'] :not(select), input[type='email'] :not(select), input[type='password'] :not(select), input[type='number'] :not(select), select :not(select), textarea :not(select) { appearance: none; } input[type='text']::placeholder, input[type='email']::placeholder, input[type='password']::placeholder, input[type='number']::placeholder, select::placeholder, textarea::placeholder { color: #c1b9b0; } input { padding: 1.2rem 0.8rem; } input::placeholder { line-height: 1.3; color: #c1b9b0; } input[type='radio'] { width: auto; margin-right: 0.9rem; } textarea { width: 100%; height: auto; background-color: #403932; border: none; outline: none; font-size: 0.65rem; line-height: 1.3; } fieldset { margin: 0; margin-bottom: 0.8rem; padding: 0; border: none; } label { user-select: none; } label span { pointer-events: none; } select { max-width: 100%; overflow: hidden; } select option { max-width: 100%; } form p { margin-top: 0; } form + .headline--text, button[type='submit'] + .headline--text { margin-top: 1.2rem; } /* Field with animated label */ /* Example use:

**/ .field { margin: 0; } .field.textarea { height: auto; } .field + .field { margin-top: 0.8rem; } .field + .collapse { margin-top: 0; } .field + .btn { margin-top: 2.2rem; } .label-before, .field input.not-empty + label::before, .field textarea.not-empty + label::before, .field input:focus + label::before, .field textarea:focus + label::before, .field.inline-placeholder input.not-empty + label::before, .field.inline-placeholder textarea.not-empty + label::before, .field.inline-placeholder input:focus + label::before, .field.inline-placeholder textarea:focus + label::before { top: -0.8rem; left: 0; top: 0.8rem; left: 0.8rem; } .field.inline-placeholder label::before { content: attr(title); position: absolute; top: 0; left: 0; transition: 300ms all; opacity: 0; top: 25px; left: 0.8rem; margin-top: -9px; } .field { margin-bottom: 0.8rem; } .field input, .field textarea { display: flex; align-items: center; width: 100%; height: auto; margin: 0; padding: 0.65rem; border: 1px solid #eeece9; border-radius: 3px; background-color: white; line-height: 1.3; } .field input:focus, .field textarea:focus { outline: 0; border: 1px solid #c1b9b0; } .field input.empty + label::before, .field textarea.empty + label::before { transition: 300ms all; opacity: 1; color: #c1b9b0; } .field input.not-empty + label::before, .field textarea.not-empty + label::before { content: attr(data-title); transition: 300ms all; opacity: 1; font-size: 0.55rem; color: #c1b9b0; } .field input:focus + label::before, .field textarea:focus + label::before { font-size: 0.55rem; } .field input:-webkit-autofill, .field textarea:-webkit-autofill { box-shadow: 0 0 0 1000px white inset; color: #c1b9b0; } .field textarea { height: auto; resize: none; } .field.inline-placeholder input, .field.inline-placeholder textarea { padding-left: 0.8rem; padding-right: 0.8rem; padding-top: 0.8rem; padding-bottom: 0.2rem; } .field.inline-placeholder input:focus, .field.inline-placeholder textarea:focus { outline: 0; border: 1px solid #403932; } .field.inline-placeholder input.empty + label::before, .field.inline-placeholder textarea.empty + label::before { transition: 300ms all; opacity: 1; color: #c1b9b0; } .field.inline-placeholder input.not-empty + label::before, .field.inline-placeholder textarea.not-empty + label::before { content: attr(data-title); transition: 300ms all; opacity: 1; font-size: 0.55rem; color: #c1b9b0; } .field.inline-placeholder input:focus + label::before, .field.inline-placeholder textarea:focus + label::before { font-size: 0.55rem; } .field.inline-placeholder input:-webkit-autofill, .field.inline-placeholder textarea:-webkit-autofill { box-shadow: 0 0 0 1000px white inset; color: #c1b9b0; } .field label { display: block; margin-bottom: 0.2rem; color: #c1b9b0; } .field--bare input, .field--bare textarea { background-color: transparent; border-radius: 0; } .field--bottom-border input { border-bottom: 2px solid rgba(34, 45, 57, 0.5); } .field__group--horizontal { display: flex; align-items: flex-end; } .two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 0.8rem; } .two-col .field { margin-top: 0; } .two-col .field.full { grid-column: 1 / span 2; } /* Checkboxes */ .checkbox__parent { display: flex; flex-direction: column; } .border-spacing { padding-bottom: 1.2rem; border-bottom: 1px solid rgba(64, 57, 50, 0.1); } .border-spacing--top { padding-top: 0.8rem; border-top: 1px solid rgba(64, 57, 50, 0.1); } @media screen and (max-width: 851px) { .field__group--horizontal .field { width: calc(70% - 14px); margin-right: 14px; } .field__group--horizontal .field input { width: 100%; } .field__group--horizontal .btn { width: 30%; } } @media screen and (max-width: 414px) { .field__group--horizontal { flex-wrap: wrap; margin-bottom: 0.8rem; } .field__group--horizontal .field { width: 100%; margin-bottom: 0.8rem; } .field__group--horizontal .field input { width: 100%; } } .form-title { margin-bottom: 0; } .form-container { margin-top: 2.2rem; min-width: 296px; } .form-container > h2 { margin-top: 0; } .form-container + .headline--text { margin-top: 1.2rem; } .form__description { margin-bottom: 1.2rem; } .password-reminder, .back-link { padding-top: 0.8rem; color: #b97332; } .password-reminder::after, .back-link::after { background-color: #b97332; } .error { display: flex; flex-flow: column wrap; margin-top: 0.2rem; margin-bottom: 0.65rem; color: #eb5757; } .errorlist { margin: 0; margin-top: 0.65rem; padding: 0; list-style-type: none; } .errorlist li { display: flex; margin-bottom: 0.65rem; margin-top: 2px; color: #eb5757; } /*

*/ .ac-custom { position: relative; margin: 0; margin-top: 1.2rem; } .ac-custom ul, .ac-custom ol { list-style: none; padding: 0; margin: 0 auto; } .ac-custom li { margin: 0 auto; position: relative; } .ac-custom label { display: inline-block; flex-flow: row wrap; position: relative; min-height: 18px; margin-top: 0; /* To account for line-height */ padding-left: 1.2rem; vertical-align: top; color: rgba(64, 57, 50, 0.5); cursor: pointer; -webkit-transition: color 0.3s; transition: color 0.3s; } .ac-custom.ac-radio label { margin-top: 0; min-height: 18px; padding-top: 2px; } .ac-custom input[type='checkbox'], .ac-custom input[type='radio'], .ac-custom label::before { width: 18px; height: 18px; top: 0; left: 0; position: absolute; cursor: pointer; } .ac-custom input[type='checkbox'], .ac-custom input[type='radio'] { opacity: 0; -webkit-appearance: none; display: inline-block; vertical-align: middle; z-index: 100; } .ac-custom label::before { content: ''; margin-top: 0; /* To account for line-height, line 30 above */ border: 1px solid #b97332; border-radius: 1px; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .product-filters__form__block .ac-custom label::before { border: 1px solid rgba(64, 57, 50, 0.2); } .ac-radio label::before { border-radius: 50%; } .ac-radio label { padding-top: 0; } .ac-custom input[type='checkbox']:checked + label, .ac-custom input[type='radio']:checked + label { color: #403932; } .ac-custom input[type='radio']:checked + label { padding-top: 2px; } .ac-custom input[type='checkbox']:checked + label::before, .ac-custom input[type='radio']:checked + label::before { border: 1px solid #b97332; } .product-filters__form__block .ac-custom input[type='checkbox']:checked + label::before, .product-filters__form__block .ac-custom input[type='radio']:checked + label::before { border: 1px solid #b97332; } /* General SVG and path styles */ .ac-custom svg { position: absolute; width: 11px; height: 11px; top: 3px; left: 3px; pointer-events: none; } .ac-custom.ac-radio svg { width: 8px; height: 8px; top: 5px; left: 5px; } .ac-custom svg path { stroke: #b97332 !important; stroke-width: 13px; stroke-linecap: round; stroke-linejoin: round; fill: none; } .ac-radio svg path { fill: #b97332; stroke: #b97332 !important; } .product-filters__form__block .ac-custom svg path { stroke: #b97332; } /* Specific input, SVG and path styles */ /* Circle */ /* Box Fill */ .ac-boxfill svg path { stroke-width: 8px; } /* Swirl */ .ac-swirl svg path { stroke-width: 8px; } /* List */ .ac-list ol { list-style: decimal; list-style-position: inside; } .ac-list ol li { font-size: 2em; padding: 1em 1em 0 2em; text-indent: -40px; } .ac-list ol li label { font-size: 1em; text-indent: 0; padding-left: 30px; } .ac-list label::before { display: none; } .ac-list svg { width: 100%; height: 80px; left: 0; top: 1.2em; margin-top: 0; } .ac-list svg path { stroke-width: 4px; } /* Media Queries */ /* Overrides depending on context */ .ac-checkbox + button[type='submit'] { margin-top: 1.2rem; } /* Search Component */ .search-form--mini { display: flex; justify-content: space-between; align-items: center; width: 215px; } .search-form--mini__container { width: 100%; opacity: 0; visibility: hidden; } .search-form--mini__container.visible { opacity: 1; visibility: visible; } .search-form--mini__container .search-form { display: flex; } .search-form--mini__input { border: none; height: 40px; text-align: right; } .search-form--mini__input:focus { outline: none; } .search-form__input { width: 100%; padding: 0; padding-bottom: 0.8rem; font-size: 1.1rem; border: none; border-bottom: 1px solid rgba(64, 57, 50, 0.2); background-color: transparent; } .search-form__input::placeholder { font-size: inherit; } .search-form__input::-webkit-search-cancel-button { display: none; } .search-form__submit { width: 0.8rem; height: 0.8rem; margin-left: -0.8rem; margin-top: 0.4rem; } @media screen and (min-width: 852px) { .search-form--mini__submit-button svg { width: 0.8rem; height: 0.8rem; } } .main_nav_open .search-form--mini__submit-button { z-index: 1; } /* Hide the desktop search loop button on mobile */ @media screen and (max-width: 851px) { .menu-primary__container .search-form--mini__submit-button { display: none; } } @media screen and (max-width: 851px) { .mobile-search-form { position: fixed; top: 0; left: 0; height: calc(100vh); height: calc(var(--vh, 1vh) * 100 - 64px); padding: 111px 30px 30px 30px; background-color: white; z-index: 1; } .mobile-search-form .search-form__submit { margin-top: 0; } } .search-results { margin-top: 2.2rem; margin-top: 1.2rem; } .search-results__view-all { margin-bottom: 1.2rem; display: block; } .search-results__view-all:hover { opacity: 0.5; } .search-options__container { display: none; } .search-options__container.visible { display: flex; align-items: center; position: absolute; top: -33px; width: 100%; } .search-options__container .ss-main { max-width: 300px; } @media screen and (max-width: 851px) { .search-options__container.visible { flex-wrap: wrap; } } .search-options__fields { display: flex; } .search-options__fields .input__container { position: relative; margin: 0; } .search-options__fields .input__container input { position: absolute; visibility: hidden; margin: 0; } .search-options__fields .input__container label { padding: 0.2rem 0.8rem; background-color: transparent; border-radius: 30px; } .search-options__fields .input__container input:checked + label { background-color: #403932; color: white; } @media screen and (max-width: 851px) { .search-options__fields { margin-top: 0.8rem; } } .search-options__container .ss-main .ss-single-selected { min-width: 150px; background-color: transparent; border: none; } .search-options__container .ss-arrow { display: none; } .search-options__container .ss-content { width: calc(100% + s('s-m')); left: -1.2rem; padding: 0.8rem; background-color: #403932; border: none; border-radius: 10px; } .search-options__container .ss-content .ss-list { max-height: 150px; scrollbar-color: #403932 #403932; scrollbar-width: thin; } .search-options__container .ss-content .ss-list::-webkit-scrollbar { padding-top: 0; width: 2px; height: 2px; } .search-options__container .ss-content .ss-list::-webkit-scrollbar-track-piece { background-color: #403932; } .search-options__container .ss-content .ss-list::-webkit-scrollbar-thumb:vertical { height: 30px; background-color: #403932; } .search-options__container .ss-content .ss-list .ss-option.ss-disabled, .search-options__container .ss-content .ss-list .ss-option:hover, .search-options__container .ss-content .ss-list .ss-option.ss-highlighted { background-color: #403932; } .search-options__container .ss-option, .search-options__container .ss-content .ss-list .ss-option:hover, .search-options__container .ss-content .ss-list .ss-option.ss-highlighted { color: white; } .search-options__container .ss-content .ss-list .ss-option.ss-disabled:hover { color: #403932; } .search-options__container .ss-main .ss-single-selected .placeholder { width: auto; flex: initial; } .search-options__container .ss-main .ss-single-selected .ss-arrow { margin-left: 1.2rem; } .search-results__list { display: grid; grid-template-columns: repeat(auto-fill, 420px); grid-gap: 1.2rem; margin-bottom: 2.2rem; } @media screen and (max-width: 851px) { .search-results__list { display: flex; flex-direction: column; } } .search-result { display: flex; padding-bottom: 0.8rem; } .search-result__link { color: #403932; } .search-result__image-container { margin: 0; margin-right: 1rem; } .search-result__details h3 { font-family: 'Miasma-Grotesque'; font-weight: 300; margin-top: 0; font-size: 0.65rem; } .search-result__details h4 { font-family: 'Miasma-Grotesque'; font-weight: 300; margin-top: 0.2rem; } .morphsearch { width: 26px; min-height: 26px; background: transparent; position: fixed; z-index: 3; top: 65px; -webkit-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transition-property: min-height, width, top, right; transition-property: min-height, width, top, right; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); border-radius: 0; overflow: hidden; } .morphsearch.open, .morphsearch:focus, .morphsearch:active { background: transparent; } .morphsearch.open { background-color: white; } .morphsearch input::-webkit-input-placeholder, .morphsearch input::placeholder { color: #8792a1 !important; } .morphsearch input:-webkit-autofill { box-shadow: 0 0 0 1000px white inset; color: #8792a1; } .morphsearch input:-webkit-autofill::first-line { font-size: 4rem; color: #8792a1; } .morphsearch input:-internal-autofill-selected { color: #8792a1; } .morphsearch input::-webkit-search-cancel-button { position: relative; right: 20px; -webkit-appearance: none; height: 20px; width: 20px; border-radius: 0; background: red; display: none; } .login_nav_open .morphsearch, .cart_quickview_open .morphsearch { z-index: 1; } .morphsearch.open { width: calc(100% - 20px); min-height: calc(100% - 20px); top: 10px !important; right: 10px !important; } .morphsearch.open .morphsearch-input { opacity: 1; } .morphsearch.transitioning { background: white; border-radius: 0; } .morphsearch.transitioning .morphsearch-input { width: 100%; } .morphsearch-form { display: flex; flex-direction: column; width: 100%; height: 26px; margin: 0 auto; position: relative; -webkit-transition-property: width, height, -webkit-transform; transition-property: width, height, transform; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); z-index: 1; } .morphsearch.open .morphsearch-form { width: 80%; height: 160px; -webkit-transform: translate3d(0, 3em, 0); transform: translate3d(0, 3em, 0); } .morphsearch-input { width: 26px; height: 100%; padding: 10px; border: none; border-radius: 0; background-color: transparent; font-size: 0.65em; color: #8792a1; -webkit-transition: font-size 0.5s cubic-bezier(0.7, 0, 0.3, 1); transition: font-size 0.5s cubic-bezier(0.7, 0, 0.3, 1); text-align: left; opacity: 0; } .morphsearch-input:hover { cursor: pointer; } .morphsearch.open .morphsearch-input { width: 100%; font-size: 4em; -webkit-transition: font-size 0.5s cubic-bezier(0.7, 0, 0.3, 1); transition: font-size 0.5s cubic-bezier(0.7, 0, 0.3, 1); text-align: left; } .morphsearch.open .morphsearch-input::-webkit-input-placeholder, .morphsearch.open .morphsearch-input::placeholder { color: #8792a1; } .morphsearch-input::-ms-clear { /* remove cross in IE */ display: none; } .morphsearch.hideInput .morphsearch-input { color: transparent; } /* placeholder */ /* hide placeholder when active in Chrome */ .gn-search:focus::-webkit-input-placeholder { color: transparent; } input[type='search'] { /* reset normalize */ -webkit-box-sizing: border-box; box-sizing: border-box; } .morphsearch-input:focus, .morphsearch-submit:focus { outline: none; color: #8792a1; } .morphsearch .morphsearch-submit { position: absolute; width: 26px; height: 26px; right: 0; margin-top: 0 !important; border: none; pointer-events: none; transform-origin: 50% 50%; opacity: 0; transform: translate3d(0, 0, 0) scale(1); transition: transform 0.3s; transition-delay: 0.25s; } .morphsearch.open .morphsearch-submit { pointer-events: auto; opacity: 1; transform: translate3d(0, 200%, 0) scale(2); transition: transform 0.3s; } .morphsearch.transitioning .morphsearch-submit { opacity: 0.5; } .morphsearch-close { width: 36px; height: 36px; position: absolute; right: 1em; top: 1em; overflow: hidden; text-indent: 100%; cursor: pointer; pointer-events: none; opacity: 0; -webkit-transform: scale3d(0, 0, 1); transform: scale3d(0, 0, 1); } .morphsearch.open .morphsearch-close { opacity: 1; pointer-events: auto; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, transform 0.3s; -webkit-transition-delay: 0.5s; transition-delay: 0.5s; } .morphsearch-close::before, .morphsearch-close::after { content: ''; position: absolute; width: 2px; height: 100%; top: 0; left: 50%; border-radius: 3px; opacity: 0.2; background: #000000; } .morphsearch-close:hover.morphsearch-close::before, .morphsearch-close:hover.morphsearch-close::after { opacity: 1; } .morphsearch-close::before { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .morphsearch-close::after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .morphsearch-content { width: 100%; height: 0; margin-top: 4.5rem; overflow: hidden; padding: 0 10.5%; position: absolute; pointer-events: none; opacity: 0; } @media screen and (max-width: 851px) { .morphsearch-content { margin-top: 0; } } .morphsearch.open .morphsearch-content { opacity: 1; height: 100%; overflow: visible; /* this breaks the transition of the children in FF: https://bugzilla.mozilla.org/show_bug.cgi?id=625289 */ pointer-events: auto; -webkit-transition: opacity 0.3s 0.5s; transition: opacity 0.3s 0.5s; } .search-form__submit svg { width: 26px; height: 26px; } /* Overlay */ .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); } .morphsearch.open ~ .overlay { opacity: 1; } @media screen and (max-width: 851px) { .morphsearch.open .morphsearch-input { font-size: 2em; } } .search-form--standalone { display: flex; align-items: center; justify-content: space-between; max-width: 500px; padding: 0.65rem; background-color: white; border-radius: 50px; } .search-form--standalone__input { height: 40px; border: none; font-size: 0.65rem; } .search-form--standalone__input:focus { outline: none; } .search-form--standalone__input::placeholder { color: #403932; } .search-form--standalone__input:-webkit-autofill { box-shadow: 0 0 0 1000px white inset; } .search-form--standalone__btn { justify-content: space-around; min-width: 125px; margin-top: 0 !important; padding: 0.65rem; border-radius: 50px; } @media screen and (max-width: 851px) { .search-form--standalone { padding: 0.65rem; } .search-form--standalone__input { height: 20px; padding: 0.65rem; } .search-form--standalone__btn { min-width: 0; } .search-form--standalone__btn .btn__text { display: none; } } /* General overrides */ #catalogue-browse .headline--extra-large { margin-bottom: 0; } #catalogue-browse .headline--intro { grid-column: 4 / span 8; } @media screen and (min-width: 852px) { #catalogue-browse .headline--intro { visibility: hidden; opacity: 0; } } #catalogue-browse p { margin-bottom: 0; } #catalogue-browse.category-index-jewelry body { background-color: #ac956f; } #catalogue-browse.category-index-arts-crafts body { background-color: #7f7766; } /* Category Menu */ @media screen and (min-width: 852px) { .category__list__outer { grid-column: 2 / span 4; margin-top: 4.8rem; visibility: hidden; opacity: 0; } .category__list, ul.category__list { display: flex; flex-flow: column wrap; } .js-hover-text-gallery__image { position: absolute; top: 0; left: 0; display: none; } .js-hover-text-gallery__image.active { display: block; } .category__list-item__image { position: absolute; right: 0; top: 0; visibility: hidden; } } .category__link { display: block; font-family: 'Miasma-Sharp'; font-weight: 300; font-size: 1.1rem; line-height: 1.5; } .dark-theme .category__link { color: #403932; } .light-theme .category__link { color: white; } @media screen and (max-width: 851px) { .category__list__outer { margin-top: 3.2rem; } .category__list { display: grid; grid-column: 2 / span 4; } .category__list-item { margin-bottom: 1.2rem; } .category__link { margin-top: 1.2rem; } } /* Category Image */ .category__image { grid-column: 8 / span 5; margin-top: 3.2rem; margin-left: 4.5rem; } @media screen and (min-width: 852px) { .category__image { opacity: 0; visibility: hidden; } } @media screen and (max-width: 851px) { #catalogue-browse #main-content { margin-top: 3.2rem; } #catalogue-browse .headline--extra-large { font-size: 3.1rem; } #catalogue-browse .headline--intro { margin-left: 4.8rem; margin-bottom: 0; font-size: 0.65rem; } #catalogue-browse .grid-sidebar { grid-template-columns: 0; padding: 0; } /* Category Menu */ .category__list { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 0.6rem; margin-top: 0; margin-bottom: 3.2rem; } } /* General overrides */ #artists-browse body { background-color: #535653; } #artists-browse .headline--extra-large { margin-bottom: 0; } #artists-browse .headline--intro { grid-column: 4 / span 8; } .artist-list { display: grid; justify-content: flex-start; margin-top: 3.2rem; } @media screen and (max-width: 851px) { .artist-list { grid-template-columns: repeat(2, 1fr); grid-gap: 1.2rem; } } @media screen and (min-width: 852px) { .artist-list { grid-template-columns: repeat(4, 1fr); grid-gap: 1.6rem; } } /* General overrides */ #artist-detail body { background-color: #535653; } #artist-detail .headline--extra-large { margin-bottom: 0; } @media screen and (max-width: 851px) { #artist-detail h1 { margin-bottom: 2.2rem; } #artist-detail .js-scroll-zoom__image { justify-content: flex-end; align-items: end; } #artist-detail .latest-arrivals.s-xxl--padded { margin: 0; padding-top: 2.2rem; padding-bottom: 2.2rem; } } .artist__image { grid-column: 2 / span 6; margin-top: 4.8rem; } .artist__bio { grid-column: 9 / span 4; margin-top: 4.8rem; } .artist__bio p { line-height: 1.5; } .artist__type { color: rgba(255, 255, 255, 0.5); } @media screen and (max-width: 851px) { .artist__details { margin-bottom: 0; } .artist__type { margin: 0.2rem; } .artist__image { margin-top: 0; } .artist__image.image-wrapper { max-width: 85%; } .artist__image__outer { padding: 0; padding-bottom: 2.2rem; } .artist__image__outer .image-wrapper--portrait { padding: 0; } .artist__image__outer .image.zoom-image--scroll { position: relative; } .artist__bio { margin-top: 2.2rem; padding-left: 1.2rem; padding-right: 1.2rem; } } .artist-card { position: relative; display: flex; flex-direction: column; } @media screen and (max-width: 851px) { .artist-card { margin-bottom: 1.2rem; } } @media screen and (min-width: 852px) { .artist-card { margin-bottom: 3.2rem; } } .artist-card__image { width: 100%; opacity: 0; visibility: hidden; } .artist-card__link picture { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); filter: grayscale(100%); transition: filter 0.7s ease-in-out; } .artist-card__link picture:hover { -webkit-filter: grayscale(0%); -moz-filter: grayscale(0%); filter: grayscale(0%); transition: filter 0.7s ease-in-out; } .artist-card__details-container { display: flex; justify-content: space-between; margin-top: 0.8rem; } @media screen and (max-width: 851px) { .artist-card__details-container { flex-direction: column; } } .artist-card__details h2.artist-card__title { margin-top: 1.2rem; } .artist-card__title { margin: 0; line-height: 1.6; font-size: 0.8rem; } .dark-theme .artist-card__link { color: white; } .light-theme .artist-card__link { color: #403932; } .artist-card__subtitle, .artist-card__author { margin: 0; line-height: 1.6; color: #c1b9b0; font-weight: normal; } .artist-card__subtitle { margin: 0; } .artist-card__utils { line-height: 1.6; } #checkout-thank-you body, #checkout-information body { background-color: white; color: #403932; } #checkout-thank-you .grid__outer, #checkout-information .grid__outer { display: none; } #checkout-thank-you fieldset, #checkout-information fieldset { margin-bottom: 1.2rem; } #checkout-thank-you .btn, #checkout-information .btn { padding-left: 1.85rem; padding-right: 1.85rem; } .checkout-layout__container { display: grid; grid-template-columns: 1fr 0.7fr; grid-gap: 3.2rem; height: 100vh; } .checkout-layout__column { padding-top: 2.2rem; padding-bottom: 2.2rem; } .checkout-layout__column.left { justify-self: center; max-width: 80%; margin-left: 2.2rem; } .checkout-layout__column.left .logo svg path { fill: #403932; } .left .checkout-layout__column__inner { margin-top: 3.2rem; } .right .checkout-layout__column__inner { margin-top: calc(46px + s('s-l')); padding: 0 3.2rem; } @media screen and (max-width: 851px) { .checkout-layout__container { display: flex; flex-direction: column; } .right .checkout-layout__column__inner { margin-top: calc(46px + s('s-l')); padding: 0; } .checkout-layout__column { padding-top: 0; } .checkout-layout__column.left { justify-self: flex-start; max-width: 100%; margin-left: 0; padding-left: 1.2rem; padding-right: 1.2rem; } .checkout-layout__column.right { padding-top: 1.2rem; padding-left: 1.2rem; padding-right: 1.2rem; } } .logo-header { display: flex; justify-content: space-between; } .logo-header__link { display: flex; } .checkout-layout__column--bg-color { background-color: #f6f5ef; } .checkout-heading { margin-bottom: 2.2rem; font-family: 'Miasma-Sharp'; font-weight: 300; font-size: 1.1rem; } .checkout-heading:first-child { margin-top: 0; } .checkout-subheading { margin: 1.2rem 0 0.8rem; font-size: 0.8rem; } .checkout-subheading:first-child { margin-top: 0; } .checkout-subheading__link { font-size: 0.65rem; color: #b97332; } .checkout-subheading__link::after { background-color: #b97332; } /* Payment */ .form-fields__list { margin: 0; padding: 0; } .form-fields__list-item { display: flex; align-items: flex-start; justify-content: flex-start; } .form-fields__list-item:last-child { margin-bottom: 0; } .form-fields__description { font-size: 0.65rem; } .form-fields__label { font-size: 0.65rem; line-height: 1.2; color: black; letter-spacing: 0.02em; } .form-fields__text { display: block; margin-top: 0.25rem; font-size: 0.65rem; line-height: 1.4; letter-spacing: 0.02em; } .styled-checkbox { display: flex; } .styling-helper { display: inline-block; line-height: 1.4; } /* Billing */ .fieldset__item.legend-billing { margin-bottom: 0; } #billing-address-fields { margin-top: 1.2rem; } /* Addresses */ #address_book_fields { display: none; } #checkout-information ul.address-list { grid-template-columns: repeat(2, 1fr); margin-top: 1.2rem; } .shipping-address-heading { display: flex; align-items: flex-end; } .shipping-address-heading h3 { margin-bottom: 0; margin-right: 1.2rem; } .address-list li { display: flex; flex-flow: column wrap; padding: 1.2rem; border: 1px solid #d8d2cc; border-radius: 3px; } .address-list li:last-child { margin-right: 0; } .add-address { color: #b97332; } .shipping-choice-container { margin-top: 1.2rem; } /* Checkout Preview */ #checkout-preview main { margin: 0 auto; padding: 0 2.2rem 3.2rem; } #checkout-information .checkout-page--preview .headline--medium, #checkout-thank-you .headline--medium { margin-top: 3.2rem; text-transform: none; } #checkout-information .checkout-page--preview .order-details__sum, #checkout-thank-you .order-details__sum { padding-bottom: 0; } #checkout-information .checkout-page--preview .order-sum, #checkout-thank-you .order-sum { display: flex; align-items: center; margin-bottom: 0.2rem; } #checkout-information .checkout-page--preview .order-sum.total, #checkout-thank-you .order-sum.total { margin: 0; margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid rgba(64, 57, 50, 0.1); } #checkout-information .checkout-page--preview .order-sum.total span, #checkout-thank-you .order-sum.total span { line-height: 1; } #checkout-information .checkout-page--preview .order-details__sum__container, #checkout-thank-you .order-details__sum__container { padding: 0; } #checkout-information .checkout-page--preview #account-form-id, #checkout-thank-you #account-form-id { margin-top: 1.2rem; } .content-block__parent { display: flex; justify-content: space-between; gap: 3.2rem; margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid rgba(64, 57, 50, 0.1); } .content-block--order-review { width: 50%; } .content-block__parent--full .content-block--order-review { width: 100%; } .content-block__heading { margin-top: 0; margin-bottom: 0.2rem; font-family: 'Miasma-Grotesque'; font-weight: 300; font-size: 0.65rem; color: rgba(64, 57, 50, 0.5); } .checkout-page--thank-you .left .content-block { margin-top: 1.2rem; margin-bottom: 3.2rem; } .checkout-page--thank-you .right .checkout-layout__column__inner { margin-top: calc(46px + s('s-l')); } #invoice-address-fields { margin-top: 0.8rem; } #checkout-thank-you .menu-sticky--bottom, #checkout-information .menu-sticky--bottom, #basket .menu-sticky--bottom { display: none; } /* Accordion override for checkout gateway page */ .form-stacked .collapse { margin-top: 0; } .form-stacked .collapse .collapse__title { margin-top: 3.2rem; } .form-stacked .collapse .collapse__content .btn--full { margin-top: 1.2rem; } #checkout-gateway { /* Gateway page overrides */ } #checkout-gateway .collapse__title { padding: 0.8rem; font-size: 0.8rem; line-height: 1; } #checkout-gateway .collapse__title.active { display: none; } #checkout-gateway .form-group { margin-bottom: 0.8rem; } #checkout-gateway .form-group.error { margin-top: 0; } #checkout-gateway .form-group.error .errorlist { margin-top: 0; } #checkout-gateway .ac-radio { margin-top: 0; } #password-wrapper.form-field { margin-top: 0.8rem; margin-bottom: 1.2rem; } #password-wrapper .field { margin-bottom: 0.8rem; } #password-wrapper .password-reminder { color: #b97332; } /* General overrides for the customer addresses page */ .customer-baseaccountpage .headline--medium, .customer-baseaccountpage .headline--small { margin-top: 0; } .customer-baseaccountpage .headline--medium { margin-bottom: 2.2rem; } .customer-baseaccountpage form { max-width: 600px; } @media screen and (max-width: 851px) { .customer-baseaccountpage main { padding-top: 0; } .customer-baseaccountpage .headline--medium, .customer-baseaccountpage .headline--small { margin-top: 0; } .customer-baseaccountpage .headline--small { margin-bottom: 2.2rem; } .customer-baseaccountpage .headline--medium { margin-bottom: 2.2rem; } .customer-baseaccountpage .headline--large { margin-top: 1.2rem !important; font-size: 1.2rem; } } .action-link { font-size: 0.65rem; color: #b97332; } .action-link--danger { color: #eb5757; } .alert { margin-top: 1.2rem; color: #eb5757; } /* General overrides for the customer profile page */ /* Menu styles */ @media screen and (min-width: 852px) { .account__sidebar__list-item { margin-bottom: 0.4rem; line-height: 1.4; } } @media screen and (max-width: 851px) { ul.account__sidebar__list { margin-bottom: 2.2rem; } .account__sidebar__list-item { margin-right: 0.8rem; } } .account__sidebar__link { font-family: 'Miasma-Grotesque'; font-weight: 300; font-size: 0.65rem; color: #948677; } .account__sidebar__link::after { background-color: #948677; } .account__sidebar__link:hover, .account__sidebar__link:focus, .account__sidebar__link:active { color: #403932; transition: color 0.25s linear; } .active .account__sidebar__link { color: #403932; text-decoration: underline; } .active .account__sidebar__link::after { display: none; } @media screen and (max-width: 851px) { .account__sidebar .headline--small { position: relative; margin-bottom: 0; padding: 1.2rem; background-color: #403932; } .account__sidebar .headline--small::after { right: 1.2rem; } ul.account__sidebar__list { display: flex; margin-top: 0; padding-left: 1.2rem; padding-right: 1.2rem; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; } ul.account__sidebar__list::-webkit-scrollbar { display: none; } ul.account__sidebar__list.active { padding-bottom: 0.8rem; } } .logout .account__sidebar__link { color: #b97332; } /* Content styles */ .account__data-list { display: flex; flex-flow: row nowrap; grid-gap: 1.2rem; margin-bottom: 3.2rem; justify-content: space-between; grid-template-columns: repeat(11, 1fr); grid-gap: 1.2rem; margin-bottom: 3.2rem; } .account__data-list-item { display: flex; flex-direction: column; } .account__data-list-item:first-child { grid-column: 1 / span 3; } .account__data-list-item:nth-child(2) { grid-column: 4 / span 3; } .account__data-list-item:nth-child(3) { grid-column: 7 / span 3; } @media screen and (min-width: 415px) and (max-width: 851px) { .account__data-list { grid-template-columns: repeat(9, 1fr); } } @media screen and (max-width: 851px) { .account__data-list { display: flex; flex-direction: column; } } .account__label, .account__content { font-size: 0.65rem; } .account__label { display: block; margin-bottom: 0.2rem; color: #c1b9b0; } /* Profile links */ .profile-actions { display: flex; flex-flow: row wrap; } @media screen and (max-width: 414px) { .profile-actions { flex-flow: row nowrap; } } .profile-actions .action-link { margin-bottom: 1.2rem; margin-right: 2.2rem; font-size: 0.65rem; color: #b97332; } .action-link { font-size: 0.65rem; color: #b97332; white-space: nowrap; } .action-link::after { background-color: #b97332; } .action-link.action-link--danger { color: #eb5757; } .action-link.action-link--danger::after { background-color: #eb5757; } /* General overrides for the customer addresses page */ #customer-address-address-list address { margin-bottom: 2.2rem; } #checkout-information .address-list label { display: flex; } .address-list { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1.2rem; margin-bottom: 1.2rem; } @media screen and (min-width: 415px) and (max-width: 851px) { .address-list { grid-template-columns: repeat(2, 1fr); } } @media screen and (max-width: 851px) { .address-list { display: flex; flex-direction: column; } } .address-list__item { display: flex; flex-flow: column wrap; justify-content: space-between; min-width: 185px; padding: 1.2rem; border: 1px solid #c1b9b0; border-radius: 10px; } .address-list__item:last-child { margin-right: 0; } .default-address__btn { margin-bottom: 1.2rem; } .default-address__label { display: flex; justify-content: flex-start; align-items: center; margin-bottom: 1.2rem; font-size: 0.65rem; } .default-address__label svg { margin-right: 0.4rem; } .light-theme .default-address__label svg path { stroke: transparent; } .actions-nav { display: flex; justify-content: space-between; margin-top: 1.2rem; } @media screen and (max-width: 851px) { #customer-order-order-list .data-table tr { display: flex; flex-flow: column wrap; } #customer-order-order-list .data-table th { display: none; } #customer-order-order-list .data-table td { display: flex; } #customer-order-order-list .data-table td:last-child { border-bottom: none; } #customer-order-order-list .data-table td span:first-child { display: block; font-family: 'Miasma-Sharp'; font-weight: 300; margin-right: 1.2rem; } } /* Order detail page */ #customer-order-order-detail > * { font-size: 0.65rem; line-height: 1.6; } #customer-order-order-detail .back-link { position: absolute; margin-top: -3.2rem; } #customer-order-order-detail .headline--medium:first-child { display: none; } .order-details__status { display: flex; flex-wrap: wrap; justify-content: space-between; padding-bottom: 0.4rem; /* 1. Giving the child elements a large line-height so * it degrades gracefully for smaller resolutions * when the line folds. **/ } .order-details__status p { margin: 0; font-size: 0.65rem; line-height: 2; /* 1 */ } .order-details__status .status { margin-right: 0.8rem; } .order-details__status aside { display: flex; } .order-details__status .action-link { display: inline-flex; margin: 0; line-height: 2; /* 1 */ } a.basket-overview__product__link:hover { text-decoration: underline; } /* Reorder form */ #reorder-all { display: flex; justify-content: flex-end; max-width: 100%; margin-top: 1.2rem; } #reorder-all [type='submit'] { margin: 0; } .secure-checkout { display: flex; align-items: center; } .secure-checkout svg { margin-right: 0.8rem; } @media screen and (max-width: 851px) { #reorder-all { justify-content: flex-start; } #reorder-all [type='submit'] { margin: 0; } } /* Order details tables */ .order-details__products { margin-top: 1.2rem; } .order-details__sum__container { display: flex; justify-content: flex-end; margin-top: 1.2rem; padding: 0 0 0.8rem; } .order-details__sum { display: flex; flex-direction: column; width: 100%; max-width: 100%; font-size: 0.65rem; line-height: 2; } .order-details__sum li { display: flex; justify-content: space-between; } .order-details__sum span { line-height: 1.4; } .order-details__sum span:first-child { margin-right: 1.2rem; } .order-details__sum .total { margin-top: 1.2rem; align-items: flex-end; } .order-details__sum .total .price { font-family: 'Miasma-Sharp'; font-weight: 300; font-size: 1.2rem; } @media screen and (min-width: 852px) { .order-details__sum { max-width: 300px; } } /* Order details customer details */ .order-details__customer-details { display: flex; flex-wrap: wrap; margin-top: 1.2rem; } .order-details__shipping-address { margin-right: 3.2rem; margin-bottom: 1.2rem; } .order-details__shipping-address:last-child { margin: 0; } .order-details__shipping-address h2 { margin: 0; font-size: 0.65rem; color: rgba(64, 57, 50, 0.3); } .order-details__shipping-address footer { display: flex; flex-flow: column wrap; margin-top: 1.2rem; } .order-details__shipping-address footer .label { font-size: 0.65rem; color: rgba(64, 57, 50, 0.3); } .order-review__shipping-address--notes { /* Todo: add some notes and fix the classes */ } .secondary-links { margin-top: 5.5rem; } #customer-order-order-detail .basket-overview__products-list, #checkout-information .basket-overview__products-list, #checkout-preview .basket-overview__products-list, #checkout-thank-you .basket-overview__products-list { display: flex; flex-flow: column wrap; margin-top: 3.2rem; padding-top: 1.2rem; border-top: 1px solid rgba(64, 57, 50, 0.1); } #customer-order-order-detail .basket-overview__products__list-item, #checkout-information .basket-overview__products__list-item, #checkout-preview .basket-overview__products__list-item, #checkout-thank-you .basket-overview__products__list-item { display: flex; margin-bottom: 0.8rem; padding-bottom: 0.8rem; border-bottom: 1px solid rgba(64, 57, 50, 0.1); } #customer-order-order-detail .basket-overview__products__figure, #checkout-information .basket-overview__products__figure, #checkout-preview .basket-overview__products__figure, #checkout-thank-you .basket-overview__products__figure { display: flex; margin: 0; padding: 0; } #customer-order-order-detail .basket-overview__products__figure img, #checkout-information .basket-overview__products__figure img, #checkout-preview .basket-overview__products__figure img, #checkout-thank-you .basket-overview__products__figure img { height: 100px; } #customer-order-order-detail .basket-overview__product__details, #checkout-information .basket-overview__product__details, #checkout-preview .basket-overview__product__details, #checkout-thank-you .basket-overview__product__details { width: 70%; } #customer-order-order-detail .basket-overview__product__title, #customer-order-order-detail .basket-overview__product__title .basket-overview__product__link, #checkout-information .basket-overview__product__title, #checkout-information .basket-overview__product__title .basket-overview__product__link, #checkout-preview .basket-overview__product__title, #checkout-preview .basket-overview__product__title .basket-overview__product__link, #checkout-thank-you .basket-overview__product__title, #checkout-thank-you .basket-overview__product__title .basket-overview__product__link { margin: 0; padding: 0; color: #403932; line-height: 1.2; } #customer-order-order-detail .basket-overview__product__subtitle, #customer-order-order-detail .basket-overview__product__subtitle .basket-overview__product__link, #checkout-information .basket-overview__product__subtitle, #checkout-information .basket-overview__product__subtitle .basket-overview__product__link, #checkout-preview .basket-overview__product__subtitle, #checkout-preview .basket-overview__product__subtitle .basket-overview__product__link, #checkout-thank-you .basket-overview__product__subtitle, #checkout-thank-you .basket-overview__product__subtitle .basket-overview__product__link { color: #403932; } #customer-order-order-detail .basket-overview__product__cost, #checkout-information .basket-overview__product__cost, #checkout-preview .basket-overview__product__cost, #checkout-thank-you .basket-overview__product__cost { display: flex; flex-direction: column; justify-content: space-between; width: 18%; padding: 0; /* Basket overview overrides */ } #customer-order-order-detail .basket-overview__product__cost .price-line, #checkout-information .basket-overview__product__cost .price-line, #checkout-preview .basket-overview__product__cost .price-line, #checkout-thank-you .basket-overview__product__cost .price-line { margin: 0; } #customer-order-order-detail .basket-overview__product__cost .price-line del, #checkout-information .basket-overview__product__cost .price-line del, #checkout-preview .basket-overview__product__cost .price-line del, #checkout-thank-you .basket-overview__product__cost .price-line del { color: rgba(64, 57, 50, 0.5); } #customer-order-order-detail .basket-overview__product__cost .action-link, #checkout-information .basket-overview__product__cost .action-link, #checkout-preview .basket-overview__product__cost .action-link, #checkout-thank-you .basket-overview__product__cost .action-link { display: inline; text-align: right; margin: 0; } @media screen and (max-width: 851px) { #customer-order-order-detail .basket-overview__products__list-item, #checkout-information .basket-overview__products__list-item, #checkout-preview .basket-overview__products__list-item, #checkout-thank-you .basket-overview__products__list-item { flex-wrap: wrap; } #customer-order-order-detail .basket-overview__product__details, #checkout-information .basket-overview__product__details, #checkout-preview .basket-overview__product__details, #checkout-thank-you .basket-overview__product__details { margin-left: 0; width: 100%; margin-top: 0.8rem; } #customer-order-order-detail .basket-overview__product__cost, #checkout-information .basket-overview__product__cost, #checkout-preview .basket-overview__product__cost, #checkout-thank-you .basket-overview__product__cost { flex-direction: row; width: 100%; margin-left: 0; margin-top: 0.8rem; } } #customer-order-order-detail .basket-overview__products-list { margin: 0; padding-top: 0.8rem; } /* Checkout information overrides * TODO: basket overview needs to go in its own file */ #checkout-information .basket-overview__products-list, #checkout-preview .basket-overview__products-list, #checkout-thank-you .basket-overview__products-list { margin-top: 0; border-top: 1px solid rgba(64, 57, 50, 0.3); } #checkout-information .basket-overview__products__list-item, #checkout-preview .basket-overview__products__list-item, #checkout-thank-you .basket-overview__products__list-item { border-bottom: 1px solid rgba(64, 57, 50, 0.3); } #checkout-information .basket-overview__products__figure img, #checkout-preview .basket-overview__products__figure img, #checkout-thank-you .basket-overview__products__figure img { height: auto; } #checkout-information .basket-overview__product__details, #checkout-preview .basket-overview__product__details, #checkout-thank-you .basket-overview__product__details { display: flex; flex-direction: column; justify-content: space-between; width: calc(100% - 74px); } #checkout-information .basket-overview__product__cost, #checkout-preview .basket-overview__product__cost, #checkout-thank-you .basket-overview__product__cost { align-self: flex-end; width: calc(100% - 74px); margin: 0; } #checkout-information .order-details__sum, #checkout-preview .order-details__sum, #checkout-thank-you .order-details__sum { max-width: 100%; } #checkout-information .secondary-links a, #checkout-preview .secondary-links a, #checkout-thank-you .secondary-links a { font-size: 0.65rem; color: #403932; margin-right: 1.2rem; } @media screen and (max-width: 851px) { #checkout-information .basket-overview__products__list-item, #checkout-preview .basket-overview__products__list-item, #checkout-thank-you .basket-overview__products__list-item { flex-wrap: wrap; } #checkout-information .basket-overview__product__details, #checkout-preview .basket-overview__product__details, #checkout-thank-you .basket-overview__product__details { margin-left: 0; width: 100%; margin-top: 1.2rem; } #checkout-information .basket-overview__product__cost, #checkout-preview .basket-overview__product__cost, #checkout-thank-you .basket-overview__product__cost { flex-direction: column; width: 100%; margin-left: 0; margin-top: 1.2rem; } } #checkout-information .basket-overview__products-list, #checkout-thank-you .basket-overview__products-list { padding-bottom: 1.2rem; border: none; border-bottom: 1px solid rgba(64, 57, 50, 0.1); } #checkout-information .basket-overview__products__list-item, #checkout-thank-you .basket-overview__products__list-item { border: none; margin-bottom: 0.8rem; padding-bottom: 0; } #checkout-information .basket-overview__products__list-item:last-child, #checkout-thank-you .basket-overview__products__list-item:last-child { margin-bottom: 0; padding-bottom: 0; } #checkout-information .basket-discount__message, #checkout-thank-you .basket-discount__message { margin-bottom: 0.8rem; padding: 0.4rem 0.8rem; border-radius: 3px; background-color: #4c7b60; color: white; text-align: center; line-height: 1.3; } /* Order list page */ #customer-order-order-list .data-table { width: 100%; border-collapse: collapse; } #customer-order-order-list .data-table th, #customer-order-order-list .data-table td { padding: 0.8rem 0; font-size: 0.65rem; text-align: left; } #customer-order-order-list .data-table th { color: rgba(64, 57, 50, 0.5); border-bottom: 1px solid rgba(64, 57, 50, 0.1); font-family: 'Miasma-Grotesque'; font-weight: 300; } #customer-order-order-list .data-table td { border-bottom: 1px solid rgba(64, 57, 50, 0.1); } #customer-order-order-list .data-table span:first-child { display: none; } #customer-order-order-list .data-table .order-view { text-align: right; } /* General overrides for the customer addresses page */ #customer-wishlists-wishlists-detail address { margin-bottom: 2.2rem; } #customer-wishlists-wishlists-detail .product-card__details-container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; margin-top: 0.8rem; } #customer-wishlists-wishlists-detail .price__container { width: auto; } .wishlist-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1.2rem; margin-bottom: 1.2rem; } .toggle-favorite--delete { position: absolute; top: 1.2rem; right: 1.2rem; } .flatpages h1, .flatpages h2, .flatpages h3, .flatpages h4, .flatpages h5, .flatpages h6 { margin-bottom: 1.2rem; font-size: 0.8rem; font-weight: 300; line-height: 25.6px; color: #403932; } .flatpages p { margin-bottom: 1.2rem; font-size: 0.65rem; line-height: 20.8px; color: #403932; } .flatpages strong, .flatpages b { font-weight: bold !important; } #contact-form .two-col { margin-top: 1.2rem; } #contact-form address { font-size: 0.65rem; line-height: 1.4; } /* General overrides */ #our-store body { background-color: #86856c; } #our-store .headline--extra-large { margin-bottom: 0; } #our-store .headline--intro { grid-column: 4 / span 8; } #our-store .product-detail__images { grid-column: 4 / span 9; margin-left: 0; } #our-store .gallery-top .swiper-slide { margin-right: 0; } /* Category Menu */ .store__sidebar { grid-column: 1 / span 2; margin-top: 4.8rem; } .store__sidebar address { color: white; } .store__sidebar a { display: inline-block; margin-top: 0.8rem; color: white; line-height: 1.3; border-bottom: 1px solid white; } .store__sidebar a:after { content: none; } @media screen and (max-width: 851px) { .store__sidebar { order: 2; } } .category__link { font-family: 'Miasma-Sharp'; font-weight: 300; font-size: 1.1rem; line-height: 1.5; } .light-theme .category__link { color: #403932; } .dark-theme .category__link { color: white; } /* Store Image */ .store__image { grid-column: 3 / span 9; margin-top: 3.2rem; } @media screen and (max-width: 851px) { .store__statue { display: none; } } /* Statue */ @media screen and (min-width: 852px) { #our-store .recently-viewed { margin-top: 9.6rem; } .store__statue { position: absolute; top: 10vw; right: 10vw; z-index: -1; mix-blend-mode: luminosity; } .main_nav_open .store__statue { position: absolute; } } .gallery-slider__slide img { will-change: transform; backface-visibility: hidden; } /* BANNER BLOCKS */ .top-banner { position: relative; } .top-banner .column-1 { position: relative; } .top-banner .column-2 { position: relative; } /* Give the top banner a min width so it doesn't jump on page load till image loads */ @media screen and (max-width: 851px) { .top-banner .column-2 { max-width: 80%; } } @media screen and (min-width: 852px) { .top-banner { z-index: -1; } .top-banner .column-1 { z-index: 1; display: flex; align-items: center; } .top-banner .column-2 { position: absolute; top: -2.2rem; right: 0; margin-right: 0; margin-left: 0; grid-column: unset; grid-column: auto; background-color: transparent; } } @media screen and (min-width: 852px) and (max-width: 1279px) { .top-banner .column-1 { grid-column: 1 / span 7; height: 50vmin; } .top-banner .column-2 { top: -1.2rem; } .top-banner .banner__image { max-height: 50vmin; } .cut .bg-color.bg-color--medium { height: 60vmin; } } @media screen and (min-width: 1280px) { .top-banner .column-1 { grid-column: 1 / span 7; height: 78vh; } .top-banner .column-2 { top: -2.2rem; } .top-banner .banner__image { max-height: 78vh; } .cut .bg-color.bg-color--medium { height: 62vh; max-height: 700px; } } @media screen and (min-width: 1400px) { .top-banner .column-1 { grid-column: 1 / span 8; } } @media screen and (max-width: 851px) { .top-banner .column-2 { margin-top: 2.2rem; } } .top-banner__category.grid-15-columns.layout-2-1 .grid-column:first-child { grid-column: 1 / span 9; } .layout-2-1 .banner { width: 100%; } .banner { display: flex; border-radius: 10px; } .banner--blue { background-color: #403932; } .banner--blue .banner__details > * { color: white; } @media screen and (max-width: 851px) { .top-banner { padding-top: 0; padding-bottom: 1.2rem; } .top-banner nav[aria-label='breadcrumb'] ul.absolute { position: relative !important; top: 0; } } .banners--medium { margin: 3.2rem 0; } .banners--medium .grid-column:first-child .banner--medium { background-color: #d9ecf4; } .banners--medium .grid-column:nth-child(2) .banner--medium { background-color: #e9edb9; } .banners--medium .grid-column:nth-child(3) .banner--medium { background-color: #edd1df; } .banner--medium { justify-content: space-between; height: 100%; padding: 1.2rem; /* Overrides based on the parent element */ } .banner--medium .banner__category { margin-top: 0; } @media screen and (max-width: 851px) { .banner--medium .banner--medium { padding: 0.8rem; } } .banner--medium .banner__details { max-width: 60%; margin-right: 1.2rem; } .banner--medium .banner__title { margin-top: 0.2rem; margin-bottom: 0.65rem; font-family: 'Miasma-Sharp'; font-weight: 300; font-size: 1.2rem; } .banner--medium .banner__image { shape-outside: circle(50%) margin-box; clip-path: circle(50%); } .banner--medium .banner__graphic { align-self: center; display: flex; align-items: center; max-width: 130px; } @media screen and (min-width: 415px) and (max-width: 851px) { .banner--medium { padding: 1.2rem; } } @media screen and (max-width: 851px) { .banners--medium { margin: 0; margin-top: 1.2rem; } } @media screen and (max-width: 414px) { .banner--medium { padding: 0.8rem; } .banner--medium .banner__graphic { max-width: 110px; } } .banners--small { margin: 3.2rem 0; } .banner--small { justify-content: space-between; align-items: center; height: 100%; padding: 0.8rem; border: 2px solid #403932; border-radius: 10px; font-family: 'Miasma-Sharp'; font-weight: 300; font-size: 0.65rem; /* Overrides based on the parent element */ } .banner--small .banner__title { margin: 0; font-size: 0.65rem; } .banner--small .banner__icon { align-self: flex-end; display: flex; align-items: center; padding: 0.65rem; border-radius: 50%; background-color: #403932; } @media screen and (max-width: 851px) { .banner--small { padding: 0.65rem; padding-left: 0; padding-right: 0; border-left: none; border-right: none; border-bottom: none; border-radius: 0; } .banners--small { border-bottom: 2px solid #403932; } .banners--small .grid-4-columns { display: flex; flex-direction: column; grid-gap: 0; } } @media screen and (min-width: 852px) { .banners--zoom { margin: 0; } .banners--zoom .column-1.banners--zoom__image { grid-column: 1 / span 6; } .banners--zoom .column-1.banners--zoom__text { grid-column: 2 / span 4; } .banners--zoom .column-2.banners--zoom__text { grid-column: 8 / span 4; } .banners--zoom .column-2.banners--zoom__image { grid-column: 7 / span 6; } .banners--zoom__title { margin-bottom: 2.2rem; /* Transition attributes handled via js */ transform: translateY(80px); } .banners--zoom__text { margin-top: 3.2rem; } .banners--zoom__copy { line-height: 1.5; margin: 0; /* Transition attributes handled via js */ transform: translateY(50px); } .banners--zoom__link { position: relative; min-width: 214px; padding-bottom: 0.8rem; /* Transition attributes handled via js */ transform: translateY(50px); transition: color 0.5s linear; } .banners--zoom__link::after { content: ''; position: absolute; bottom: -1px; left: -30px; width: 30px; height: 1px; background-color: black; opacity: 0; } .dark-theme .banners--zoom__link::after { background-color: white; } .banners--zoom__link:hover { color: #daa777; transition: color 0.5s linear; } .banners--zoom__link:hover svg { animation: arrowSlide 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.25s; } .banners--zoom__link:hover::after { animation: borderHighlight 1.5s cubic-bezier(0.19, 1, 0.22, 1) 0.25s; } .cut__bottom .bg-color { height: 85vmin; } .cut__bottom .banners--zoom__text { margin-top: 9.6rem; } .image-wrapper__zoom .image-wrapper { width: 100%; position: relative; } .image-wrapper__zoom--portrait .image-wrapper { padding-top: 127.064%; } .image-wrapper__zoom--landscape .image-wrapper { padding-top: 56.5%; } .image-wrapper > .inner { position: absolute; top: auto; bottom: 0; left: 0; height: 100%; width: 100%; } .image-wrapper__zoom .inner { position: absolute; top: auto; bottom: 0; left: 0; height: 100%; width: 100%; } .image-shadow { height: 100%; width: 100%; overflow: hidden; } .image-shadow { display: block; width: 100%; height: 100%; position: relative; overflow: hidden; } .image { position: absolute; width: 100%; height: auto; bottom: 0; left: 0; } .image-wrapper__zoom .image { position: absolute; width: 100%; height: auto; bottom: 0; left: 0; } } .banners--zoom__text .btn--pill { margin-top: 1.2rem; } @media screen and (max-width: 851px) { .banners--zoom__image .image-wrapper { max-width: 84.75%; } .banners--zoom__text { margin-top: 2.2rem; margin-left: 3.2rem; margin-right: 3.2rem; } .banners--zoom__title { margin-top: 0; margin-bottom: 1.2rem; } .banners--zoom__copy { max-width: 350px; } /* Category 9 are arts and crafts * This is the second banner which is aligned right * Should check whether this could be odd even banner logic */ [data-type='category-9'] { margin-bottom: 4.8rem; } [data-type='category-9'] .banners--zoom .column-1 { order: 2; } [data-type='category-9'] .banners--zoom .column-2 { display: flex; justify-content: flex-end; order: 1; } .banners--category__outer { margin-top: 4.8rem; padding-bottom: 3.2rem; } .category__featured .headline--super, .category__featured .banners--zoom__title { margin-bottom: 1.2rem; } .category__featured .btn { margin-top: 1.2rem; } } @keyframes arrowSlide { 0% { transform: scaleX(1); } 30% { transform: scaleX(0); } 100% { transform: scaleX(1); } } @keyframes borderHighlight { 0% { transform: translateX(0); opacity: 1; } 99% { opacity: 0; } 100% { transform: translateX(214px); } } /* COMPONENT PARTS: * */ /* Slim select extra styles */ .select-list.ss-main { width: 100%; height: auto; } .select-list.ss-main .ss-single-selected { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; margin: 0; padding: 0.65rem; border: 1px solid #eeece9; border-radius: 2px; background-color: white; line-height: 1.3; } .select-list.ss-main .ss-single-selected .placeholder .ss-disabled, .select-list.ss-main .ss-single-selected .placeholder { flex: unset; font-size: 0.65rem; line-height: 1.3; } .select-list.ss-main .ss-content { overflow-x: hidden; } .select-list.ss-main .ss-list { width: 100%; overflow-y: scroll; padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */ box-sizing: content-box; /* So the width will be 100% + 17px */ } .select-list.ss-main .ss-list .ss-option { width: 118%; } .ss-main .ss-single-selected .placeholder .ss-disabled::before { content: ''; } .select-list.ss-main .ss-content { width: 100%; margin: -1px 0 0 -1px; left: 1px; border: 1px solid #eeece9; } .select-list.ss-main .ss-content .ss-list .ss-option { padding: 0.8rem; line-height: 1.4; letter-spacing: 0.02em; border-bottom: 1px solid #eeece9; color: #403932; } .select-list.ss-main .ss-content .ss-list .ss-option:last-child { border-bottom: none; } .select-list.ss-main .ss-content .ss-list .ss-option:hover, .select-list.ss-main .ss-content .ss-list .ss-option.ss-highlighted { color: white; } /* CHECKOUT FORM */ /* Country select */ .ss-single-selected { padding: 0.8rem; border-radius: 2px; color: #403932; } .ss-single-selected .placeholder { line-height: 1.3; color: #403932; } .ss-content { line-height: 1.3; } .ss-content .ss-search { padding: 0; } .ss-content .ss-search input { border: none; border-bottom: 1px solid #eeece9; border-radius: 0; height: auto; padding: 1.1rem; } .select-list.ss-main .ss-content .ss-list .ss-option { padding-left: 1.1rem; } .select-list.ss-main .ss-content .ss-list .ss-option.ss-disabled { color: rgba(64, 57, 50, 0.3); } .ss-content .ss-list .ss-option:hover, .ss-content .ss-list .ss-option.ss-highlighted { background-color: #403932; color: white; } .select-list.ss-main .ss-content .ss-list .ss-option.ss-disabled.ss-selected:hover { color: rgba(246, 245, 239, 0.5); } .ss-content .ss-search input:focus { box-shadow: 0 0 0 transparent; } /* Add to cart form */ .add-to-cart__form .select-list.ss-main .ss-content { border: none; } .add-to-cart__form .select-list.ss-main .ss-content .ss-list { max-height: 400px; color: white; background-color: #403932; border: none; } .add-to-cart__form .select-list.ss-main .ss-content .ss-list .ss-option { width: 100%; padding: 0.6rem 0.8rem; color: white; border-bottom: none; } .add-to-cart__form .select-list.ss-main .ss-content .ss-list .ss-option:hover, .add-to-cart__form .select-list.ss-main .ss-content .ss-list .ss-option.ss-highlighted { background-color: #27231f; } .add-to-cart__form .select-list.ss-main .ss-single-selected { padding: 0; background-color: #f6f5ef; border: none; } .add-to-cart__form .select-list.ss-main .ss-content .ss-list .ss-option.ss-disabled, .add-to-cart__form .select-list.ss-main .ss-content .ss-list .ss-option.ss-disabled:hover { background-color: #403932; color: #cccccc; opacity: 0.5; } .pagination { display: flex; justify-content: center; align-items: center; margin-top: 4.8rem; } .pagination__page_num { display: flex; justify-content: center; align-items: center; width: 2.2rem; height: 2.2rem; margin-right: 0.8rem; font-size: 0.65rem; color: rgba(64, 57, 50, 0.5); border-radius: 50%; } .pagination__page_num:hover { color: #403932; background-color: rgba(64, 57, 50, 0.1); } .pagination__page_num::after { content: none; } .pagination__page_num:last-child { margin-right: 0; } .pagination__page_num.active { color: #b97332; background-color: white; border: none; } .pagination__previous svg { transform: rotate(180deg); } .pagination__next, .pagination__previous { display: flex; justify-content: center; align-items: center; width: 2.2rem; height: 2.2rem; } .pagination__next::after, .pagination__previous::after { content: none; } .pagination__next:hover svg path, .pagination__previous:hover svg path { fill: black; } .user-login-form__container-outer .close-button { display: flex; align-items: center; justify-content: center; width: 1.2rem; height: 1.2rem; background-color: transparent; border-radius: 50%; } .user-login-form__container-outer .close-button svg { width: 1.2rem; height: 1.2rem; } .user-login-form__container-inner { margin-top: 2.2rem; } .user-login-form__container-inner h2 { margin-top: 0; } .price-slider__outer { display: flex; flex-direction: column; align-items: flex-start; height: 400px; margin: 0 auto; } .price-slider { position: relative; width: calc(264px - 16px); height: 1px; top: 0; padding: 0; overflow: visible; } .knob { position: absolute; width: 16px; height: 16px; top: 0; background-color: white; border: 1px solid #403932; border-radius: 16px; text-align: center; z-index: 2; } .price-range { position: relative; height: 1px; margin-top: 8px; background-color: #403932; } .price-range__background { position: absolute; top: 8px; width: 100%; height: 1px; background-color: rgba(64, 57, 50, 0.2); } .price-slider__indicators { position: relative; width: 100%; margin-top: 24px; } .price-range__min, .price-range__max { position: absolute; } .price-range__min { left: -8px; } .price-range__max { right: -8px; } .c-fixed_wrapper { position: relative; overflow: hidden; background-color: transparent; } @media (min-width: 852px) { .c-fixed_wrapper { height: 100vh; } } @media (max-width: 851px) { .c-fixed_wrapper { height: 50vh; } } .c-fixed_target { position: absolute; top: -100vh; bottom: -100vh; right: 0; left: 0; } .c-fixed { position: absolute; top: -100vh; right: 0; left: 0; height: 100%; background-size: cover; background-position: center center; opacity: 0.75; mix-blend-mode: multiply; } html:not(.has-scroll-smooth) .c-fixed { top: 0; } .intro__title { position: absolute; max-width: inherit; margin: 0; overflow: hidden; visibility: hidden; } @media screen and (max-width: 851px) { .intro__title { position: relative; } } @media screen and (min-width: 415px) and (max-width: 851px) { .intro__title { font-size: 2rem; } } @media screen and (min-width: 852px) and (max-width: 1365px) { .intro__title { font-size: 4vw; } } @media screen and (min-width: 1366px) { .intro__title { font-size: 3rem; } } @media screen and (min-width: 1920px) { .intro__title { font-size: 5vw; } } .line-parent { overflow: hidden; font-family: inherit; font-size: inherit; line-height: 1.1; background-color: transparent; } .line-parent .line-child { font-family: inherit; font-size: inherit; line-height: 1.1; background-color: transparent; will-change: transform; } .line-parent .line-parent { overflow: hidden; } .line-parent .line-parent .line-child { transform: translateY(62px); } .project__description .line-parent { overflow: hidden; } .project__description .line-parent .line-child { transform: translateY(33px); } @media screen and (min-width: 852px) { h2.js-split--chars { overflow-y: hidden; visibility: hidden; opacity: 0; } } .char { font-family: inherit; font-size: inherit; transform: translateY(100%); } .loader.intro { position: absolute; align-items: center; justify-content: center; display: none; width: 100vw; height: 100vh; background-color: #ebe9e3; z-index: 3; } .loader.intro .letter-k.active, .loader.intro .letter-o.active, .loader.intro .letter-r.active, .loader.intro .letter-i.active { opacity: 1; transition: opacity 0.25s ease-out; } #home .loader { display: flex; } .gallery-slider__wrapper, .gallery-slider__outer { position: relative; } @media screen and (min-width: 852px) { .gallery-slider__wrapper { display: grid; grid-template-columns: repeat(12, 1fr); grid-gap: 0.8rem; width: 100%; } } .gallery-slider__outer { overflow: hidden; } .gallery-slider, .gallery-slider__slide { position: absolute; top: 0; left: 0; } /* Setting the picture element to display flex * to make it wrap the image and eliminate white space */ .gallery-slider__slide picture { display: flex; } .gallery-slider__loader-image { visibility: hidden; } .gallery-slider__loader-image--small { position: absolute; bottom: 4px; right: 0; background-color: transparent; } .gallery-slider--small { position: absolute; background-color: transparent; overflow: hidden; } .c-text-underlined { position: relative; padding-bottom: 0.4rem; transition: color 0.5s linear; } .c-text-underlined__outer:hover .c-text-underlined { color: #daa777; transition: color 0.5s linear; } .c-text-underlined__outer:hover .c-text-underlined::after { animation: borderHighlight 1.5s cubic-bezier(0.19, 1, 0.22, 1) 0.25s; } .c-text-underlined::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 1px; background-color: black; opacity: 0; } .dark-theme .c-text-underlined::after { background-color: white; } .banners--zoom__link { position: relative; } @media screen and (min-width: 852px) { .banners--zoom__link { /* Transition attributes handled via js */ transform: translateY(50px); transition: color 0.5s linear; } .banners--zoom__link:hover { color: #daa777; transition: color 0.5s linear; } .banners--zoom__link:hover svg { animation: arrowSlide 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.25s; } .banners--zoom__link:hover::after { animation: borderHighlight 1.5s cubic-bezier(0.19, 1, 0.22, 1) 0.25s; } .banners--zoom__link::after { content: ''; position: absolute; bottom: -1px; left: -30px; width: 30px; height: 1px; background-color: black; opacity: 0; } .dark-theme .banners--zoom__link::after { background-color: white; } } .cc-window { max-width: 350px; border-radius: 2px; background-color: white; color: black; opacity: 0; bottom: 44px; } .cc-window.cc-banner { flex-direction: column !important; padding: 2.2rem !important; } .cc-banner.cc-bottom { left: 1.2rem !important; bottom: 1.2rem !important; } .cc-message { font-size: 0.65rem; line-height: 1.6; } .cc-link { opacity: 1 !important; text-decoration: none !important; color: #b97332 !important; } .cc-link:active, .cc-link:visited, .cc-link:hover { color: #b97332 !important; } .cc-compliance { width: 100%; margin-top: 1.2rem; } .cc-compliance .cc-btn { position: relative; display: flex; justify-content: center; width: 100%; padding: 0.8rem; border: none; border-radius: 3px; font-size: 0.65rem; line-height: 1; color: white; background-color: #403932; } .termsfeed-com---palette-dark.termsfeed-com---nb { background-color: white; } .termsfeed-com---nb-simple { right: auto; top: auto; bottom: 0; left: 2rem; max-width: 45% !important; position: fixed; } @media screen and (max-width: 1000px) { .termsfeed-com---nb-simple { max-width: 100% !important; } } .termsfeed-com---nb { overflow: auto; z-index: 99999999999; border-radius: 2px; } .termsfeed-com---nb .cc-nb-main-container { padding: 2rem !important; } .termsfeed-com---palette-dark .cc-nb-title { color: black !important; font-size: 18px !important; } .termsfeed-com---palette-dark .cc-nb-text { color: black !important; font-size: 14px !important; } .termsfeed-com---nb .cc-nb-text { color: black !important; font-size: 14px !important; margin-bottom: 1rem !important; } .termsfeed-com---palette-dark .cc-nb-okagree, .termsfeed-com---palette-dark .cc-nb-reject, .termsfeed-com---nb .cc-nb-reject, .termsfeed-com---nb .cc-nb-okagree { color: white !important; background-color: #403932 !important; border: 1px solid #403932; border-radius: 2px; font-weight: var(--bold) !important; font-size: 14px !important; margin-right: 0.25rem !important; margin-bottom: 0.25rem !important; transition: all 0.5s ease; } .termsfeed-com---palette-dark .cc-nb-okagree:hover, .termsfeed-com---palette-dark .cc-nb-reject:hover, .termsfeed-com---nb .cc-nb-reject:hover, .termsfeed-com---nb .cc-nb-okagree:hover { color: var(--link) !important; background-color: white !important; border: 1px solid #403932; } .termsfeed-com---palette-dark .cc-nb-changep, .termsfeed-com---nb .cc-nb-changep, .termsfeed-com---reset button { background-color: white !important; margin-left: 1rem; color: var(--link) !important; font-weight: var(--fw-regular) !important; border: 1px solid #403932; border-radius: 2px; transition: all 0.5s ease; } @media screen and (max-width: 500px) { .termsfeed-com---palette-dark .cc-nb-changep, .termsfeed-com---nb .cc-nb-changep, .termsfeed-com---reset button { margin-left: 0rem; } } .termsfeed-com---palette-dark .cc-nb-changep:hover, .termsfeed-com---nb .cc-nb-changep:hover, .termsfeed-com---reset button:hover { background-color: #403932 !important; color: white !important; } .hover--roll { user-select: none; cursor: pointer; opacity: 0.6; } .hover--roll > span, .hover--roll span { transform: translateY(0); transition: transform 0.4s ease, opacity 0.4s ease; } .hover--roll::after { position: absolute; content: attr(data-hover-text); transform: translateY(12px); transition: transform 0.4s ease, opacity 0.4s ease; opacity: 0; } .hover--roll:hover { opacity: 1; } .hover--roll:hover > span { transform: translateY(-12px); opacity: 0; } .hover--roll:hover::after { transform: translateY(0); opacity: 1; } .hover--roll.banner--small:hover { opacity: 1; } .hover--roll.banner--small:hover > span.banner__title { transform: translateY(-12px); opacity: 0; } .hover--roll.banner--small:hover > span.banner__icon { transform: translateY(0); opacity: 1; } .menu-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background-color: black; opacity: 0; visibility: hidden; transition: opacity 250ms ease; } .menu-overlay.active { z-index: 1; opacity: 0.3; visibility: visible; } .menu-overlay--white { background-color: #f6f5ef; } .menu-overlay--white.active { opacity: 0.95; } .none { display: none; } .no-results { display: flex; justify-content: center; align-items: center; } .absolute { position: absolute; } .fixed { position: fixed; } .loading::before { content: url(/static/svg/loading.svg); display: block; width: 38px; height: 38px; position: absolute; top: 30%; left: 50%; transform: translate(-50%, -25%); z-index: 9999; visibility: visible; opacity: 1; transition-property: visibility, opacity; transition-duration: 300ms; transition-timing-function: ease-out; } .rotate-left { transform: rotate(90deg); transition: transform 0.25s ease-in; } .rotate-right { transform: rotate(-90deg); transition: transform 0.25s ease-in; } .rotate-bottom { transform: rotate(-180deg); transition: transform 0.25s ease-in; } .rotate-top { transform: rotate(180deg); transition: transform 0.25s ease-in; } @media screen and (min-width: 852px) { .mobile-display { display: none; } } @media screen and (max-width: 851px) { .desktop-display { display: none; } } .hidden { opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility; } .fade-in { opacity: 1; visibility: visible; transition: opacity 1s ease-in-out 0.5s; } .block { display: block; } /* The following needs to go in its own component file */ .bg-color { position: absolute; content: ''; width: 100%; height: 100%; z-index: -1; } .cut .bg-color { height: 70vmin; max-height: 725px; } .cut__top .bg-color { top: 0; } .cut__bottom .bg-color { bottom: 0; } .category__featured.cut .bg-color { height: 75vmin; max-height: 100vh; top: 0; bottom: auto; } .category__featured.cut .banners--zoom__text { grid-column: 8 / span 5; margin-top: 4.8rem; } .category__featured.cut .banner__image { max-height: 654px; } #home .bg-color.type-1 { background-color: #ebe9e3; } #home .bg-color.type-2 { background-color: #ebe9e3; } @media screen and (max-width: 851px) { #home .bg-color { display: none; } #home .bg-color.type-1 { background-color: transparent; } #home .bg-color.type-2 { background-color: transparent; } } @media screen and (max-width: 851px) { .cut .bg-color { height: 90%; } } @media screen and (min-width: 852px) { .image-wrapper { position: relative; width: 100%; max-width: 100%; } .image-wrapper--square { padding-top: 100%; } .image-wrapper--portrait { padding-top: 127%; } .image-wrapper--landscape { padding-top: 56.25%; } .image-wrapper--store { padding-top: 66.78%; } .image-wrapper--custom-store { padding-top: 136%; } .image-wrapper--custom-store .image-shadow { height: 116%; } .image-wrapper .lazyload, .image-wrapper__content { position: absolute; top: 0; height: auto; } } @media screen and (min-width: 852px) { [data-scroll-section], .product-detail__title { transform-style: preserve-3d; } }