/* fonts */ /* vietnamese */ @font-face { font-family: 'Barlow Semi Condensed'; font-style: italic; font-weight: 600; font-display: swap; src: url('fonts/VNBarlowSemiCondensedSemiBold600Italic.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Barlow Semi Condensed'; font-style: italic; font-weight: 600; font-display: swap; src: url('fonts/LTEBarlowSemiCondensedSemiBold600Italic.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Barlow Semi Condensed'; font-style: italic; font-weight: 600; font-display: swap; src: url('fonts/LTBarlowSemiCondensedSemiBold600Italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* vietnamese */ @font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/VNBarlowSemiCondensedBold700.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/LTEBarlowSemiCondensedBold700.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/LTBarlowSemiCondensedBold700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/CYEInterRegular400.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/CYInterRegular400.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/GEInterRegular400.woff2') format('woff2'); unicode-range: U+1F00-1FFF; } /* greek */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/GInterRegular400.woff2') format('woff2'); unicode-range: U+0370-03FF; } /* vietnamese */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/VNInterRegular400.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/LTEInterRegular400.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/LTInterRegular400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/CYEInterRegular400.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/CYInterRegular400.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/GEInterRegular400.woff2') format('woff2'); unicode-range: U+1F00-1FFF; } /* greek */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/GInterRegular400.woff2') format('woff2'); unicode-range: U+0370-03FF; } /* vietnamese */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/VNInterRegular400.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/LTEInterRegular400.woff2') format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/LTInterRegular400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } body { --resoledFG: #FBFCFC; --resoledBlack: #191A21; --resoledBlue: #3D8DF7; --resoledDarkGrey: #363943; --resoledGrey: #A6B8C3; --resoledError: #CF2663; --white: #FFFFFF; /* colours */ --bgMain: var(--resoledBlack); --fgMain: var(--resoledFG); --bgDim: var(--resoledBlack); --fgDim: var(--resoledGrey); --fgAnchor: var(--resoledBlue); --fgAnchorTrim: var(--resoledBlue); --fgAnchorHover: var(--resoledBlue); --fgAnchorVisited: var(--resoledBlue); --fgAnchorDim: var(--resoledGrey); --fgAnchorDimHover: var(--resoledGrey); --fgAnchorDimVisited: var(--resoledGrey); --bgModal: var(--bgDim); --bgModalMenu: var(--resoledBlue); --bgLine: var(--resoledDarkGrey); --bgTooltip: var(--resoledBlue); --fgTooltip: var(--white); --fgHeadline: var(--white); --bgTrim: var(--resoledDarkGrey); --bgTableEven: var(--resoledDarkGrey); --bgFaqs: var(--resoledBlack); --fgFaqs: var(--resoledBlue); --fgFaqsBorder:var(--resoledDarkGrey); --bgHoverBorder:var(--resoledBlue); --bgActionBar:var(--resoledBlue); --bgSizeFilter: var(--resoledBlack); --bgSizeFilterTrim: var(--resoledDarkGrey); --bgProductSize: var(--resoledBlue); --bgOutOfStock: #24252C; --fgOutOfStock: var(--resoledGrey); --fgProductCard: var(--white); --fgProductCardCue: var(--resoledBlue); --fgFeatureCards: var(--resoledGrey); /* widths */ --flowMaxWidth: 87.5rem; --flowArticleMaxWidth: 66.5rem; --flowCards: 50rem; --flowPadding: 1.88rem 3.75rem 0 3.75rem; --flowPaddingMax: 1.88rem 3.75rem 1.88rem 3.75rem; --flowFixPadding: 1.88rem 3.75rem 0 3.75rem; --flowFixPaddingMax: 1.88rem 3.75rem 1.88rem 3.75rem; --flowFixPaddingCut: 0 3.75rem 0 3.75rem; /* ext */ --billboardImage: url('https://res.cloudinary.com/rsld/image/upload/v1712396060/web/now-hero_el3lr3.jpg'); --posterImage: url('https://res.cloudinary.com/rsld/image/upload/v1712396074/web/now-kicks-hero_igpsbo.png'); --focus: 0 0 0.125em #048, 0 0 0.5em #08F; --padding:clamp(0.5rem, 2vw, 1rem); --announcement: var(--resoledError); } /* icons */ /* reset */ html,body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,form,fieldset,caption, legend,table,tr,td,th,address,blockquote,img { margin:0; padding:0; } img, fieldset { border:none; } blockquote, q { quotes:none; } hr { display:none; } body *, *:after, *:before { box-sizing:border-box; } legend { -webkit-appearance: none; -moz-appearance: none; appearance: none; display:block; } button, label, summary { cursor:pointer; } html, body { height:100%; } body, button, input, table, textarea, select { font-size:1rem; line-height:1.5; font-weight: 400; font-family:inherit; } body { font-family: Inter, sans-serif; color:var(--fgMain); background:var(--bgMain); } input:focus, button:focus, select:focus, textarea:focus { outline:none; box-shadow:var(--focus); } a { color:var(--fgAnchor); text-decoration: none; } a:visited { color:var(--fgAnchorVisited); } a:focus, a:hover { color:var(--fgAnchorHover); } /* styles */ h1,h2,h3,h4,h5,h6 { font-family: Barlow Semi Condensed; font-style: normal; font-weight: 700; } #billboard h2, main h2 { color: var(--resoledBlue); font-family: 'Barlow Semi Condensed'; font-size: 4.375rem; font-style: normal; font-weight: 700; line-height: 3.875rem; /* 88.571% */ letter-spacing: -0.0875rem; text-transform: uppercase; margin-bottom: 2.38rem; } main h3 { font-size: 2.25rem; line-height: 2rem; /* 88.889% */ } main h4 { font-size: 1.95rem; line-height: 2rem; /* 88.889% */ } #scrollFix { position:absolute; top:0; left:0; width:100%; height:100%; overflow:auto; scroll-behavior:smooth; } #bodyFacade { display:flex; flex-direction:column; min-height:100%; } #bodyFacade > header, #bodyFacade > footer, #bodyFacade #announcement { flex-grow:0; background:var(--bgMain); } #bodyFacade > footer { line-height:1.25; } #bodyFacade > header > div, #bodyFacade > footer > div, #bodyFacade #announcement > div { padding: var(--flowFixPaddingMax); width:100%; max-width:var(--flowMaxWidth); margin:0 auto; } #bodyFacade > header > div { display:flex; align-items:center; } #bodyFacade > #announcement > div { background-color: var(--announcement); } #bodyFacade > #announcement > div .error, #bodyFacade > #announcement > div .notice { font-family: 'Barlow Semi Condensed'; font-style: italic; font-weight: 600; font-size: 1.3rem; line-height: 1.3rem; leading-trim: both; text-edge: cap; color: #FFFFFF; } .error p { margin-bottom: 1rem; } th.error { color: var(--resoledError); } #bodyFacade > header h1 { font-size: 1.75rem; line-height: 1.25rem; /* 86.667% */ position: relative; text-transform: uppercase; } #bodyFacade > header h1:after { content: ''; position: relative; display: inline-block; width: 100%; top: 0.2rem; left: -0.4rem; max-width: 8rem; height: 1.5rem; background: url('/images/device-laces-extended.svg') center left repeat-y; background-size: contain; } #bodyFacade > header ul { list-style:none; display:flex; align-items:center; } #mainMenu li { display: inline; margin: 0 1.25rem 1rem 1rem; padding: 0 1rem 0.625rem 1rem; border-bottom: solid 0.125rem transparent; transition:color 0.3s, scale 0.3s; } #mainMenu li.current, #mainMenu li:hover { border-bottom: solid 0.125rem var(--fgAnchorHover); } #mainMenu li a { position:relative; transition:scale 0.3s; color: var(--fgMainMenuAnchor); font-family: 'Barlow Semi Condensed'; font-style: italic; font-weight: 600; line-height: 0.75rem; /* 75% */ text-transform: uppercase; } .actions a:focus, .actions a:hover, #mainMenu li a:focus, #mainMenu li a:hover { scale:1.2; } #bodyFacade > header#billboard { /*flex-grow:1;*/ display: flex; flex-direction:column; background:var(--bgMain) var(--billboardImage); background-size: cover; min-height:100%; width: 100%; min-height:100vh; color: var(--fgMain); font-family: 'Barlow Semi Condensed'; font-size: 1.125rem; font-style: italic; font-weight: 600; line-height: 1.125rem; /* 100% */ text-transform: uppercase; } #billboard > div + div { display:flex; flex-direction:column; justify-content:center; flex-grow:1; width:var(--flowMaxWidth); max-width:100%; margin:0 auto; align-items: unset; min-height:100%; padding: var(--flowFixPaddingCut); } #billboard .cta { margin-top: 1rem; } #bodyFacade > footer { margin-top: 2.5rem; color: var(--fgDim); font-family: Inter; font-size: 0.875rem; font-style: normal; font-weight: 400; line-height: 1.375rem; /* 157.143% */ } #bodyFacade > footer ul { list-style:none; } #bodyFacade > footer a { text-decoration:none; color:var(--fgAnchorDim); } #bodyFacade > footer > div section { flex-grow:0; } #bodyFacade footer > div section:first-of-type { /*width: 25rem;*/ max-width: 25rem; } #bodyFacade footer > div section:last-of-type { display:flex; } #bodyFacade > footer > div div { width: 100%; padding-top: 5.25rem; padding-bottom: 1.75rem; } #bodyFacade > footer > div div:first-of-type { padding-top: 2.5rem; border-top: 0.0625rem solid var(--bgLine); } #bodyFacade > footer > div { display:flex; flex-wrap:wrap; justify-content:space-between; } h1 { flex-grow:1; font-size:1.25rem; } h1 ~ * { flex-grow:0; } #billboard h2 { width:34.5rem; max-width:100%; margin-bottom: 2.38rem; } #poster { display: flex; min-height:100%; width: 100%; margin-bottom: 4.32rem; } #poster img { width: 100%; height: auto; max-width:100%; } #poster h2 { color: var(--fgMain); font-family: Barlow Semi Condensed; font-size: 10rem; font-style: normal; font-weight: 700; line-height: 8rem; /* 80% */ letter-spacing: -0.2rem; width: 100%; flex-grow: 0; max-width: 31.875rem; } @media (max-width:55em) { #poster h2 { font-size: 7rem; line-height: 6rem; } #poster > div > div { position:absolute; left:-999rem; } } #poster > div { flex-grow: 0; width: 100%; max-width: 62.125rem; background:transparent url('/images/bg-device-laces-2.svg') no-repeat; background-size: contain; } #poster > div > div { background: var(--posterImage) center bottom no-repeat; background-size: cover; margin-left: -15rem; height: 100%; } #poster h2 span, #billboard h2 span { color: var(--resoledBlue); } #bodyFacade > footer h2, #productFilters > fieldset legend, #productFilters h2 { position:absolute; left:-999rem; } .socialIcons { flex-grow:1; text-align:right; } .socialIcons li { display:inline; margin-right:2.19rem; } .socialIcons a { position:relative; display:inline-block; } .socialIcons span { position:absolute; top:-3em; right:200vw; padding:0.25em 1em; border-radius:1em; background:var(--bgTooltip); color:var(--fgTooltip); opacity:0; transform:translateX(50%); transition:right 0s 0.3s, opacity 0.3s; } .socialIcons a:focus span, .socialIcons a:hover span { right:50%; opacity:1; transition:right 0s, opacity 0.3s; } .socialIcons span:after { content: ''; position:absolute; left:50%; top:100%; width:0; height:0; margin-left:-0.5em; border-style:solid; border-color:var(--bgTooltip) transparent transparent; border-width:0.75em 0.5em 0; } .socialIcons img { transition:transform 0.3s, color 0.3s; } .socialIcons img:hover { color:#FFF; transform:scale(1.2); } /*--flowMaxWidth: 87.5rem;*/ /* --flowArticleMaxWidth: 66.5rem;*/ main, main.copy { width: 100%; max-width:var(--flowMaxWidth); margin:0 auto; padding: var(--flowPaddingMax); font-size: 1.1875rem; line-height: 1.75rem; /* 147.368% */ } main.copy { max-width: var(--flowArticleMaxWidth); } main > article ul, main > article ol { padding: 0 0 1rem 2rem; } main > article h4 { margin-bottom: 0.75rem; } main > article h3 { margin-bottom: 1.75rem; } main > article li, .faqs details li, #tableOfContents ol li{ padding-bottom: 0.5rem; } main > article.placement { margin-bottom: 5.78rem; } main > article.placement img { width: 100% height: auto; max-width: 100%; } main > article.placement h3:first-of-type { position: absolute; left:-999rem; } main > article.placement .content { display: flex; gap: 9.9rem; } @media (max-width:55em) { main > article.placement .content { display: block; gap: unset; } } main > article.placement section { width:100%; max-width: 31.875rem; } main > article.placement .extras { display: flex; flex-direction: column; } main > article.placement .videoFacade { width:100%; max-width: 25rem; height: 15.625rem; background-color: var(--resoledBlue); align-self: self-end; } main > article.placement section{ margin-top: 8rem; } main p, .faqs details p { padding-bottom: 1.75rem; } @media (max-width:55em) { #bodyFacade > footer > div > section { min-width:6em; } .socialIcons { margin-top: 2.75rem; } } .socialPosts { display:flex; flex-wrap:wrap; gap: 0.56rem; max-width:var(--flowMaxWidth); /*margin:auto;*/ /*justify-content: center;*/ } .socialPosts a { line-height: 0; } .socialPosts > h3 { width:100%; position:absolute; left:-999rem; } /*.socialPosts img {*/ /* width: 100%;*/ /* max-width: 100%;*/ /* height: auto;*/ /*}*/ .socialPosts img { position:relative; width: 100%; max-width: 17.25rem; flex:1 0 auto; } @media (max-width:32em) { .socialPosts img { width:100%; } } .dataCollectionReasons table { border-collapse:collapse; border:0.0625rem solid var(--bgTrim); } .dataCollectionReasons table caption { padding:0.25rem; font-weight: 700; } .dataCollectionReasons table tr > * { padding:0.25rem 0.5rem; font-weight:normal; text-align:center; } .dataCollectionReasons table tr:nth-child(even) > * { background:var(--bgTableEven); } .dataCollectionReasons table thead th { font-weight:bold; white-space:nowrap; border-bottom:0.0625rem solid var(--bgTrim); } .dataCollectionReasons table th:first-child { text-align:left; } .dataCollectionReasons tbody td { border-left:0.0625rem solid var(--bgTrim); } @media (max-width:26rem) { .dataCollectionReasons table > thead { display:none; } .dataCollectionReasons table tbody tr > * { display:block; width:auto; text-align:center; border:0; } .dataCollectionReasons table th:first-child { text-align:center; font-weight:bold; padding:0.5rem; border:solid var(--bgTrim); border-width:0.0625rem 0; } .dataCollectionReasons table tr:first-child th:first-child { border-top:0; } .dataCollectionReasons table tbody td:first-of-type { padding-top:1rem; } .dataCollectionReasons table tbody td:last-of-type { padding-bottom:1rem; } .dataCollectionReasons table > tbody td:before { display:block; font-weight:bold; } .dataCollectionReasons > tbody td:nth-of-type(1):before { content:"Purpose/Activity++"; } .dataCollectionReasons > tbody td:nth-of-type(2):before { content:"Type of data++"; } .dataCollectionReasons > tbody td:nth-of-type(3):before { content:"Legal basis for processing++"; } } .productCards img { width: 100%; height:auto; max-width: 100%; } .productCards { display:flex; justify-content:stretch; flex-wrap:wrap; max-width:var(--flowMaxWidth); margin:auto; /*padding:0 0.5em 0.5em 0;*/ /*background:linear-gradient(#CCC, #888);*/ } .productCards > * { flex:1 0 auto; width:16rem; margin-left:0.5rem; } .productCards section { display:flex; flex-direction:column; justify-content:end; /*margin-top:3.5rem;*/ margin:0 0.81rem 6rem; background:var(--bgMain); text-align: center; } .productCards h3 { padding:0.4rem 0.8rem 0.38rem 0.4rem; margin-bottom:0; font-size: 1.125rem; font-style: italic; font-weight: 700; line-height: 1.125rem; /* 100% */ text-transform: uppercase; color: var(--fgProductCard); } .productCards strong { display: block; font-size: 1.375rem; color: var(--fgProductCard); } .productCards p { padding:0 1rem 1rem; } .productCards a { text-transform: uppercase; leading-trim: both; text-edge: cap; font-family: 'Barlow Semi Condensed'; font-size: 1.125rem; font-style: italic; font-weight: 600; line-height: 1.125rem; /* 100% */ position:relative; } .productCards a:after { /*content:attr(data-visualCue);*/ content:''; color: var(--fgProductCardCue); display: block; margin-left: 0.5rem; margin-top: 1.5rem; text-align:center; position: absolute; /*width:1.4385rem;*/ width: 100%; height:1rem; font-size:1.125rem; background: center no-repeat; background-image:url("data:image/svg+xml,%3Csvg width='138' height='15' viewBox='0 0 138 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.492 14C3.36 14 3.288 13.94 3.276 13.82L1.674 1.634V1.598C1.674 1.466 1.746 1.4 1.89 1.4H3.618C3.75 1.4 3.822 1.46 3.834 1.58L4.77 10.634C4.782 10.682 4.8 10.706 4.824 10.706C4.848 10.706 4.866 10.682 4.878 10.634L7.992 1.598C8.052 1.466 8.136 1.4 8.244 1.4H9.954C10.098 1.4 10.146 1.478 10.098 1.634L5.508 13.82C5.46 13.94 5.37 14 5.238 14H3.492ZM10.4115 14C10.3515 14 10.3035 13.982 10.2675 13.946C10.2315 13.898 10.2195 13.844 10.2315 13.784L11.7255 1.616C11.7375 1.556 11.7615 1.508 11.7975 1.472C11.8455 1.424 11.8995 1.4 11.9595 1.4H13.5795C13.6395 1.4 13.6875 1.424 13.7235 1.472C13.7595 1.508 13.7715 1.556 13.7595 1.616L12.2655 13.784C12.2535 13.844 12.2235 13.898 12.1755 13.946C12.1395 13.982 12.0915 14 12.0315 14H10.4115ZM22.9814 2.984C22.9814 3.044 22.9574 3.098 22.9094 3.146C22.8614 3.182 22.8074 3.2 22.7474 3.2H17.9054C17.8574 3.2 17.8214 3.23 17.7974 3.29L17.3834 6.674C17.3834 6.734 17.4074 6.764 17.4554 6.764H20.5694C20.6294 6.764 20.6774 6.788 20.7134 6.836C20.7494 6.872 20.7614 6.92 20.7494 6.98L20.5874 8.348C20.5754 8.408 20.5454 8.462 20.4974 8.51C20.4614 8.546 20.4134 8.564 20.3534 8.564H17.2394C17.1794 8.564 17.1494 8.594 17.1494 8.654L16.7174 12.11C16.7174 12.17 16.7414 12.2 16.7894 12.2H21.6494C21.7094 12.2 21.7574 12.224 21.7934 12.272C21.8294 12.308 21.8414 12.356 21.8294 12.416L21.6674 13.784C21.6554 13.844 21.6254 13.898 21.5774 13.946C21.5414 13.982 21.4934 14 21.4334 14H14.6654C14.6054 14 14.5574 13.982 14.5214 13.946C14.4854 13.898 14.4734 13.844 14.4854 13.784L15.9794 1.616C15.9914 1.556 16.0154 1.508 16.0514 1.472C16.0994 1.424 16.1534 1.4 16.2134 1.4H22.9814C23.0414 1.4 23.0894 1.424 23.1254 1.472C23.1614 1.508 23.1734 1.556 23.1614 1.616L22.9814 2.984ZM25.8065 14C25.6745 14 25.6025 13.94 25.5905 13.82L24.3305 1.634V1.598C24.3305 1.466 24.4025 1.4 24.5465 1.4H26.2385C26.2985 1.4 26.3465 1.418 26.3825 1.454C26.4185 1.49 26.4365 1.538 26.4365 1.598L27.0845 9.464C27.0965 9.5 27.1145 9.518 27.1385 9.518C27.1625 9.518 27.1805 9.494 27.1925 9.446L29.6585 1.598C29.6945 1.466 29.7785 1.4 29.9105 1.4H31.4405C31.5005 1.4 31.5485 1.418 31.5845 1.454C31.6205 1.49 31.6385 1.538 31.6385 1.598L32.2865 9.464C32.2985 9.512 32.3165 9.536 32.3405 9.536C32.3645 9.536 32.3825 9.512 32.3945 9.464L34.8965 1.598C34.9325 1.466 35.0165 1.4 35.1485 1.4H36.7505C36.9185 1.4 36.9785 1.478 36.9305 1.634L32.8265 13.802C32.7905 13.934 32.7065 14 32.5745 14H31.0085C30.8765 14 30.8105 13.934 30.8105 13.802L30.1985 5.684C30.1865 5.648 30.1685 5.63 30.1445 5.63C30.1205 5.63 30.1025 5.648 30.0905 5.684L27.5705 13.802C27.5345 13.934 27.4505 14 27.3185 14H25.8065ZM46.1894 1.382C47.1014 1.382 47.8274 1.67 48.3674 2.246C48.9074 2.81 49.1774 3.566 49.1774 4.514C49.1774 4.634 49.1654 4.838 49.1414 5.126C49.0094 6.218 48.5894 7.1 47.8814 7.772C47.1734 8.444 46.3094 8.78 45.2894 8.78H43.1474C43.0994 8.78 43.0634 8.81 43.0394 8.87L42.4454 13.784C42.4334 13.844 42.4034 13.898 42.3554 13.946C42.3194 13.982 42.2714 14 42.2114 14H40.5914C40.5314 14 40.4834 13.982 40.4474 13.946C40.4114 13.898 40.3994 13.844 40.4114 13.784L41.9054 1.598C41.9174 1.538 41.9474 1.49 41.9954 1.454C42.0434 1.406 42.0974 1.382 42.1574 1.382H46.1894ZM45.1814 7.106C45.7454 7.106 46.2074 6.896 46.5674 6.476C46.9394 6.044 47.1254 5.48 47.1254 4.784C47.1254 4.292 46.9934 3.902 46.7294 3.614C46.4774 3.326 46.1234 3.182 45.6674 3.182H43.8314C43.7834 3.182 43.7474 3.212 43.7234 3.272L43.2734 7.016C43.2734 7.076 43.2974 7.106 43.3454 7.106H45.1814ZM55.4732 14C55.3292 14 55.2512 13.94 55.2392 13.82L53.9972 8.654C53.9732 8.606 53.9432 8.582 53.9072 8.582H52.4132C52.3532 8.582 52.3232 8.612 52.3232 8.672L51.6932 13.784C51.6812 13.844 51.6512 13.898 51.6032 13.946C51.5672 13.982 51.5192 14 51.4592 14H49.8392C49.7792 14 49.7312 13.982 49.6952 13.946C49.6592 13.898 49.6472 13.844 49.6592 13.784L51.1532 1.616C51.1652 1.556 51.1892 1.508 51.2252 1.472C51.2732 1.424 51.3272 1.4 51.3872 1.4H55.4192C56.3432 1.4 57.0692 1.682 57.5972 2.246C58.1252 2.81 58.3892 3.56 58.3892 4.496C58.3892 4.616 58.3772 4.808 58.3532 5.072C58.2572 5.852 57.9992 6.53 57.5792 7.106C57.1592 7.682 56.6312 8.09 55.9952 8.33C55.9232 8.354 55.8992 8.396 55.9232 8.456L57.3272 13.748L57.3452 13.82C57.3452 13.94 57.2792 14 57.1472 14H55.4732ZM53.0792 3.2C53.0312 3.2 52.9952 3.23 52.9712 3.29L52.5392 6.872C52.5152 6.932 52.5392 6.962 52.6112 6.962H54.4472C54.9872 6.962 55.4372 6.758 55.7972 6.35C56.1572 5.942 56.3372 5.408 56.3372 4.748C56.3372 4.268 56.2052 3.89 55.9412 3.614C55.6892 3.338 55.3472 3.2 54.9152 3.2H53.0792ZM62.6099 14.162C61.5539 14.162 60.7199 13.862 60.1079 13.262C59.4959 12.662 59.1899 11.858 59.1899 10.85C59.1899 10.73 59.2019 10.526 59.2259 10.238L59.8379 5.162C59.9339 4.394 60.1799 3.716 60.5759 3.128C60.9719 2.528 61.4819 2.066 62.1059 1.742C62.7299 1.418 63.4259 1.256 64.1939 1.256C65.2619 1.256 66.1079 1.556 66.7319 2.156C67.3559 2.756 67.6679 3.56 67.6679 4.568C67.6679 4.676 67.6559 4.874 67.6319 5.162L67.0019 10.238C66.9059 11.018 66.6599 11.708 66.2639 12.308C65.8679 12.896 65.3519 13.352 64.7159 13.676C64.0919 14 63.3899 14.162 62.6099 14.162ZM62.8439 12.362C63.4079 12.362 63.8819 12.176 64.2659 11.804C64.6619 11.42 64.8959 10.928 64.9679 10.328L65.6159 5.108C65.6279 5.036 65.6339 4.928 65.6339 4.784C65.6339 4.256 65.4839 3.836 65.1839 3.524C64.8839 3.212 64.4819 3.056 63.9779 3.056C63.4259 3.056 62.9579 3.248 62.5739 3.632C62.1899 4.004 61.9559 4.496 61.8719 5.108L61.2419 10.328C61.2299 10.412 61.2239 10.532 61.2239 10.688C61.2239 11.192 61.3679 11.6 61.6559 11.912C61.9439 12.212 62.3399 12.362 62.8439 12.362ZM68.7357 14C68.6757 14 68.6277 13.982 68.5917 13.946C68.5557 13.898 68.5437 13.844 68.5557 13.784L70.0497 1.616C70.0617 1.556 70.0857 1.508 70.1217 1.472C70.1697 1.424 70.2237 1.4 70.2837 1.4H73.9017C74.9217 1.4 75.7317 1.676 76.3317 2.228C76.9317 2.768 77.2317 3.5 77.2317 4.424C77.2317 4.544 77.2197 4.724 77.1957 4.964L76.5297 10.436C76.3977 11.516 75.9477 12.38 75.1797 13.028C74.4237 13.676 73.4817 14 72.3537 14H68.7357ZM70.7877 12.11C70.7877 12.17 70.8117 12.2 70.8597 12.2L72.5877 12.182C73.1037 12.182 73.5297 12.008 73.8657 11.66C74.2137 11.3 74.4357 10.814 74.5317 10.202L75.1437 5.198C75.1677 5.006 75.1797 4.874 75.1797 4.802C75.1797 4.31 75.0477 3.92 74.7837 3.632C74.5197 3.344 74.1597 3.2 73.7037 3.2H71.9757C71.9277 3.2 71.8917 3.23 71.8677 3.29L70.7877 12.11ZM81.773 14.144C80.729 14.144 79.901 13.844 79.289 13.244C78.689 12.644 78.389 11.84 78.389 10.832C78.389 10.712 78.401 10.508 78.425 10.22L79.469 1.616C79.481 1.556 79.505 1.508 79.541 1.472C79.589 1.424 79.643 1.4 79.703 1.4H81.323C81.383 1.4 81.431 1.424 81.467 1.472C81.503 1.508 81.515 1.556 81.503 1.616L80.423 10.328C80.411 10.4 80.405 10.508 80.405 10.652C80.405 11.168 80.549 11.582 80.837 11.894C81.125 12.194 81.515 12.344 82.007 12.344C82.559 12.344 83.021 12.158 83.393 11.786C83.777 11.414 84.005 10.928 84.077 10.328L85.157 1.616C85.157 1.556 85.181 1.508 85.229 1.472C85.277 1.424 85.331 1.4 85.391 1.4H86.993C87.053 1.4 87.101 1.424 87.137 1.472C87.173 1.508 87.185 1.556 87.173 1.616L86.111 10.22C86.015 11 85.769 11.69 85.373 12.29C84.989 12.878 84.485 13.334 83.861 13.658C83.237 13.982 82.541 14.144 81.773 14.144ZM91.2267 14.144C90.1707 14.144 89.3367 13.856 88.7247 13.28C88.1127 12.692 87.8067 11.906 87.8067 10.922C87.8067 10.79 87.8187 10.592 87.8427 10.328L88.4907 5.036C88.6347 3.896 89.0967 2.984 89.8767 2.3C90.6687 1.604 91.6407 1.256 92.7927 1.256C93.8487 1.256 94.6827 1.544 95.2947 2.12C95.9187 2.684 96.2307 3.446 96.2307 4.406C96.2307 4.514 96.2187 4.7 96.1947 4.964L96.1767 5.072C96.1647 5.132 96.1347 5.186 96.0867 5.234C96.0507 5.282 96.0027 5.306 95.9427 5.306L94.3047 5.378C94.1727 5.378 94.1127 5.306 94.1247 5.162L94.1427 4.946C94.1547 4.874 94.1607 4.772 94.1607 4.64C94.1607 4.148 94.0167 3.764 93.7287 3.488C93.4527 3.2 93.0687 3.056 92.5767 3.056C92.0247 3.056 91.5627 3.23 91.1907 3.578C90.8187 3.926 90.5967 4.382 90.5247 4.946L89.8587 10.472C89.8467 10.544 89.8407 10.646 89.8407 10.778C89.8407 11.258 89.9847 11.642 90.2727 11.93C90.5607 12.206 90.9507 12.344 91.4427 12.344C91.9827 12.344 92.4387 12.176 92.8107 11.84C93.1827 11.492 93.4047 11.036 93.4767 10.472L93.4947 10.238C93.5067 10.106 93.5847 10.04 93.7287 10.04L95.3487 10.112C95.4087 10.112 95.4567 10.136 95.4927 10.184C95.5287 10.22 95.5407 10.268 95.5287 10.328L95.5107 10.4C95.3787 11.528 94.9167 12.434 94.1247 13.118C93.3447 13.802 92.3787 14.144 91.2267 14.144ZM105.567 1.4C105.699 1.4 105.765 1.472 105.765 1.616L105.585 3.002C105.573 3.062 105.543 3.116 105.495 3.164C105.459 3.2 105.411 3.218 105.351 3.218H102.651C102.603 3.218 102.567 3.248 102.543 3.308L101.265 13.784C101.253 13.844 101.223 13.898 101.175 13.946C101.139 13.982 101.091 14 101.031 14H99.4112C99.3512 14 99.3032 13.982 99.2672 13.946C99.2312 13.898 99.2192 13.844 99.2312 13.784L100.527 3.308C100.527 3.248 100.497 3.218 100.437 3.218H97.8452C97.7852 3.218 97.7372 3.2 97.7012 3.164C97.6652 3.116 97.6532 3.062 97.6652 3.002L97.8272 1.616C97.8392 1.556 97.8632 1.508 97.8992 1.472C97.9472 1.424 98.0012 1.4 98.0612 1.4H105.567Z' fill='%233D8DF7'/%3E%3Cpath d='M114 7.48855H136.978' stroke='%233D8DF7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M131.236 1.74402L137.016 7.50002L131.236 13.256' stroke='%233D8DF7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size:contain; } @media (min-width:73.4375rem) { .productCards > * { width:20rem; } } @media (max-width:36.187rem) { .productCards > * { width:12rem; } } @media (max-width:28.687rem) { .productCards > * { width:8rem; } } .productSizes { width: 100%; max-width: 23.5625rem; } .productSizes > span { display: block; font-size: 1rem; text-align: left; margin-bottom: 0.87rem; } .productSizes ul { display: flex; flex-wrap: wrap; list-style: none; border: 0.0625rem solid var(--bgSizeFilterTrim); border-right: none; border-bottom: none; /*border-top: none;*/ width: 100%; max-width: 21.0625rem; margin-top: 0.87rem; } .productSizes ul li { width: 100%; max-width: 4.185rem; display: inline; } .productSizes ul input[type='checkbox']:checked + label, .productSizes ul :not(input[type='checkbox']:disabled) + label:focus, .productSizes ul :not(input[type='checkbox']:disabled) + label:hover { background: var(--bgProductSize); border-right-color: var(--bgProductSize); border-bottom-color: var(--bgProductSize); } .productSizes ul input[type='checkbox']:disabled + label, .productSizes ul input[type='checkbox']:disabled + label:hover, .productSizes ul input[type='checkbox']:disabled + label:focus { background: var(--bgOutOfStock); color: var(--fgOutOfStock); text-decoration: line-through; } .productSizes ul label { display: block; padding: 1.31rem; text-align: center; font-family: Inter; font-size: 1rem; font-style: normal; font-weight: 400; line-height: 0.875rem; /* 87.5% */ border-right: 0.0625rem solid var(--bgSizeFilterTrim); border-bottom: 0.0625rem solid var(--bgSizeFilterTrim); } .productSizes ul input[type='checkbox']:checked + label, .productSizes ul :not(input[type='checkbox']:disabled) + label:focus, .productSizes ul :not(input[type='checkbox']:disabled) + label:hover { background: var(--bgProductSize); border-right-color: var(--bgProductSize); border-bottom-color: var(--bgProductSize); } .productSizes ul input[type='checkbox']:disabled + label, .productSizes ul input[type='checkbox']:disabled + label:hover, .productSizes ul input[type='checkbox']:disabled + label:focus { background: var(--bgOutOfStock); color: var(--fgOutOfStock); text-decoration: line-through; } #productFilters { width: 100%; max-width: var(--flowMaxWidth); margin: 6.25rem 0 3.81rem 0; display:flex; flex-wrap:wrap; /*overflow: hidden;*/ } #productFilters footer { width: 100%; } #productFilters fieldset { flex-grow: 1; display: flex; flex-wrap: wrap; gap: 1rem; } #productFilters .sizeFilters { text-align: right; align-items: end; display: flex; flex-direction: column; position: relative; } #productFilters .sizeFilters .productSizes { position: absolute; top: 1.75rem; opacity: 0.9200000166893005; border-top: 1px solid var(--bgSizeFilterTrim); background: var(--bgSizeFilter); scale:0; opacity:0; /*transition:right 0s 0.5s, opacity 0.3s;*/ transition:scale 0.3s, opacity 0.3s; /*right:-100vw;*/ padding: 1.5rem 1.25rem; } #productFilters .sizeFilters > label { padding-right: 0.5rem; } #productFilters .sizeFilters > label:after { content:''; position:relative; display:inline-flex; width: 1.2rem; height: 1rem; margin-left: 0.5rem; vertical-align: top; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%233D8DF7' d='M192 384c-8.188 0-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L192 306.8l137.4-137.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-160 160C208.4 380.9 200.2 384 192 384z'/%3E%3C/svg%3E") center no-repeat; background-size: contain; transition: transform 0.5s; } #productFilters .sizeFilters > input[type="checkbox"]:checked + label:after { transform:rotateX(180deg); } #productFilters .sizeFilters > input[type="checkbox"]:checked ~ .productSizes { opacity:1; right:0; transition:opacity 0.3s; scale: 1; z-index: 1; } @media (max-width:40em) { #productFilters .sizeFilters { text-align: left; align-items: start; margin-top: 2rem; } #productFilters .sizeFilters > input[type="checkbox"]:checked ~ .productSizes { right:unset; left:0; } } #productFilters fieldset > label { font-family: 'Barlow Semi Condensed'; font-size: 1rem; font-style: italic; font-weight: 600; line-height: 0.75rem; /* 75% */ text-transform: uppercase; padding: 0 1.125rem; margin-right: 1rem; padding-bottom: 0.63rem; border-bottom: 0.125rem solid var(--bgMain); } #productFilters fieldset > label:last-of-type { margin-right: 0; } #productFilters fieldset > input[type="radio"]:checked + label, #productFilters fieldset > label:hover, #productFilters fieldset > label:focus { border-bottom-color: var(--fgAnchorTrim); } @media (max-width:52rem) { #bodyFacade > header ul { display: block; align-items: unset; } #mainMenu li { font-family: 'Barlow Semi Condensed'; font-size: 2rem; font-style: italic; font-weight: 600; line-height: 2rem; /* 100% */ letter-spacing: -0.02rem; } .menuModalOpen { display:block; width:2em; height:0.9rem; background:linear-gradient( var(--fgMain) 10%, transparent 10%, transparent 40%, transparent 0%, transparent 0%, transparent 70%, transparent 90%, var(--fgMain) 90% ); transition:scale 0.3s; } #mainMenu, #mainMenu > .modalClose { position:fixed; top:0; right:0; width:100%; bottom:0; } #mainMenu { width:auto; right:200vw; overflow:auto; background:var(--bgDim); opacity:0; transition:right 0s 0.5s, opacity 0.5s; } #mainMenu:target { right:0; opacity:1; transition:opacity 0.5s; background: transparent; width: 80%; max-width: 80%; } #mainMenu > div { position:relative; min-height:100%; max-width:100%; background:var(--bgModalMenu); /*background:var(--bgModalMenu) url('/images/laces-device-vertical.svg') left no-repeat;*/ box-shadow:0 0 0.5rem #0006; translate:100% 0; transition:translate 0.5s; } #mainMenu:target > div { translate:0 0; } .menuModalOpen span, .modalClose span { position:absolute; right:200vw; } #mainMenu > .modalClose { left:0; } #mainMenu > div .modalClose { position:absolute; right:0.5rem; top:0.625rem; transition:scale 0.3s; } .menuModalOpen:focus, .menuModalOpen:hover, #mainMenu > div .modalClose:focus, #mainMenu > div .modalClose:hover { scale:1.2; } #mainMenu > div .modalClose:after { content:''; display:block; width:1em; height:1em; font-size:1.2rem; background: var(--bgModalMenu) center no-repeat; background-image:url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 1L1 20' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M1 1L20 20' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size:cover; } #mainMenu:target .modalClose { display:block; opacity: 0.6499999761581421; background:var(--bgModal); } #mainMenu > div:before { content:''; display:block; font-size:1.2rem; font-weight:bold; padding:0.25rem 3.5rem 0.25rem 0.5rem; margin-bottom:0.5rem; text-align:left; height: 9.625rem; opacity: 0.5; mix-blend-mode: color-burn; background:url('/images/laces-device-vertical.svg') left no-repeat; } #mainMenu li a { display:block; margin:0; padding:0.25rem 1.9rem; text-align:left; line-height: 2rem; } } /* max-width:52rem */ @media (max-width:40em) { #billboard h2 { font-size: 3.125rem; line-height: 2.8125rem; /* 90% */ letter-spacing: -0.0625rem; } #bodyFacade > footer > div, .socialIcons { display:block; } .about ul { margin-top: 1.75rem; } .socialIcons { text-align: left; } } @media (max-width:50em) { body { --flowPaddingMax: 1.88rem 1.625rem 1.88rem 1.625rem; --flowPadding: 1.88rem 1.625rem 1.88rem 1.625rem; --flowFixPaddingMax: 1.88rem 1.625rem 1.88rem 1.625rem; --flowFixPadding: 1.88rem 1.625rem 1.88rem 1.625rem; } } @media (max-width:30em) { #billboard > div + div { padding: 1.75rem 1.05rem; } #billboard h2 { font-size: 2.125rem; line-height: 1.8125rem; /* 90% */ letter-spacing: -0.0625rem; } .socialIcons { flex-grow: 0; padding-top: 2.87rem; } } .featureCards { display:flex; flex-wrap:wrap; gap:3rem 2.5rem; justify-content:center; width:100%; } .featureCards article, .featureCards > div { position:relative; width: 18.125rem; max-width:100%; flex-grow:0; } .featureCards h3 { margin-bottom: 1.56rem; } .featureCards h3:before { content: ''; display: block; width: 2.9375rem; height: 2.9375rem; } .featureCards article h3:before { background-size: cover; background: top left no-repeat; } .featureCards article:nth-child(1) h3:before { background-image: url('/images/auth.svg'); } .featureCards article:nth-child(2) h3:before { background-image: url('/images/packaging.svg'); } .featureCards article:nth-child(3) h3:before { background-image: url('/images/delivery.svg'); } .featureCards > div h3:before { background: none; } .featureCards h3 span { position:absolute; left:-999rem; } .featureCards p { color: var(--fgFeatureCards); font-family: Inter; font-size: 1rem; line-height: 1.5rem; /* 150% */ } .featureCards > div { font-family: Barlow Semi Condensed; font-size: 3.75rem; font-style: normal; font-weight: 700; line-height: 3.25rem; /* 86.667% */ letter-spacing: -0.075rem; text-transform: uppercase; color: var(--resoledBlue); } .featureCards > div:after { content: ''; position: absolute; display: inline-block; width: 100%; max-width: 10.875rem; height: 3.435rem; background: url('/images/device-laces-extended.svg') center right repeat-y; background-size: contain; /*bottom: -0.3125rem;*/ } #backToTop { flex-grow:0; position:sticky; bottom:5rem; display:block; width:2.125rem; z-index:999; margin:0 1rem 0 auto; opacity:0.5; transition:opacity 0.3s; } #backToTop:hover, #backToTop:focus { opacity:1; } #backToTop span { position:absolute; right:50%; top:1.75rem; padding:0.25rem 2rem 0.25rem 1rem; white-space:nowrap; background:var(--toolTipBgColor); color:var(--toolTipTextColor); border:var(--traceBorderWidth) solid var(--borderColor); border-radius:1rem 0 0 1rem; scale:0 1; transform-origin:center right; transition:scale 0.5s; } #backToTop:hover span, #backToTop:focus span { scale:1; } #backToTop:after { content:''; position:absolute; top:1.75rem; bottom:0; display:block; width: 1em; height: 1em; text-align:center; vertical-align: top; font-size:1.5rem; line-height:2.125rem; border-radius:1.0625rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%233D8DF7' d='M192 384c-8.188 0-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L192 306.8l137.4-137.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-160 160C208.4 380.9 200.2 384 192 384z'/%3E%3C/svg%3E") center no-repeat; background-size: contain; color:var(--buttonTextColor); transition:scale 0.3s; transform:rotateX(180deg); color:var(--buttonTextColor); transition:scale 0.3s; } #backToTop:hover:after, #backToTop:focus:after { scale:1.2; } #backToTop.hideScroll { opacity:0; } .faqs details { position:relative; overflow:hidden; /*max-width:32em;*/ margin-bottom:0.5rem; --detailContentHeight:auto; border-bottom:1px solid var(--fgFaqsBorder); } .faqs summary { position:relative; display:block; /* turns off the open indicator on modern UA's */ padding:1rem 0 1rem 0; background: var(--bgFaqs); color:var(--fgFaqs); } .faqs summary::-webkit-details-marker { display:none; /* turn off open indicator in crApple's "new IE" */ } .faqs summary:after { position: absolute; top: 1rem; right: 1rem; content: ''; display: inline-block; width: 1em; height: 1em; font-weight: bold; text-align: center; vertical-align: top; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%233D8DF7' d='M192 384c-8.188 0-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L192 306.8l137.4-137.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-160 160C208.4 380.9 200.2 384 192 384z'/%3E%3C/svg%3E") center no-repeat; background-size: contain; transition: transform 0.5s; } .faqs details[open]:not(.closed) > summary:after { transform:rotateX(180deg); } .faqs details p { margin:1em; } .faqs details > div { overflow:hidden; /* wrap margins */ transition:margin-top 0.3s; } .faqs details.closed > div { margin-top:var(--detailContentHeight); } .faqs details summary { font-family: Inter; font-size: 1.1875rem; font-style: normal; font-weight: 400; line-height: 1.75rem; /* 147.368% */ } #callToActionBar { /*position: absolute;*/ /*top: 0;*/ overflow:hidden; /* wrap floats and margins */ zoom:1; /* trip haslayout, wrap floats and margins legacy IE */ width: 100%; background: var(--bgActionBar); } #callToActionBar > div { width: 100%; max-width:var(--flowMaxWidth); padding: var(--flowPaddingMax); margin:0 auto; } #callToActionBar div div { float: right; margin-left: 1em; } .product { display:flex; flex-wrap:wrap; /*align-items:stretch;*/ /*justify-content:center;*/ gap:2rem; } .product > * { flex-grow:1; } .product > header { width:100%; order:1; } .product .productDetails { max-width: 46rem; min-width:min(20em, 100%); padding-left: 3rem; order:3; } .product .productImages { order:2; max-width:30rem; min-width:min(15rem, 100%); } .product .productImages img { width: 100%; max-width: 100%; height: auto; } #productForm { padding-bottom: 3rem; margin-bottom: 3rem; border-bottom: 0.0625rem solid var(--resoledDarkGrey); } #productForm fieldset, #productForm footer { margin-top: 3rem; } form input[type='text'] { display: block; padding: 0.5rem; text-align: center; font-family: Inter; font-size: 1rem; font-style: normal; font-weight: 400; color: var(--resoledFG); background: var(--resoledBlack); border: 0.0625rem solid var(--bgSizeFilterTrim); line-height: 0.875rem; /* 87.5% */ border-right: 0.0625rem solid var(--bgSizeFilterTrim); border-bottom: 0.0625rem solid var(--bgSizeFilterTrim); } #contactForm > footer button, #productFilters > footer button, #productForm button, #shoppingCartForm button, #shoppingCartExtrasForm button, #shoppingCartForm footer a, #billboard .cta a { display: block; padding: 1.31rem; text-align: center; font-family: Inter; font-size: 1rem; font-style: normal; font-weight: 400; /*background: var(--bgOutOfStock);*/ color: var(--white); background: var(--resoledBlack); line-height: 0.875rem; /* 87.5% */ border: 0.0625rem solid var(--bgSizeFilterTrim); border-right: 0.0625rem solid var(--bgSizeFilterTrim); border-bottom: 0.0625rem solid var(--bgSizeFilterTrim); } #billboard .cta a { display: inline-block; background: var(--resoledBlue); border: 0.0625rem solid var(--resoledBlue); border-right: 0.0625rem solid var(--resoledBlue); border-bottom: 0.0625rem solid var(--resoledBlue); } #productForm button:focus, #productForm button:hover, #contactForm > footer button:focus, #contactForm > footer button:hover, #shoppingCartExtrasForm button:focus, #shoppingCartExtrasForm button:hover, #shoppingCartForm button:focus, #shoppingCartForm button:hover, #shoppingCartForm footer a:focus, #shoppingCartForm footer a:hover { background: var(--bgProductSize); border-right-color: var(--bgProductSize); border-bottom-color: var(--bgProductSize); } .checkout { background: var(--bgProductSize); } .shoppingCart { width:100%; max-width:80em; margin:0 auto; border-collapse:collapse; border-bottom:0.125rem solid var(--bgTrim); } .shoppingCart input[type='text'], .shoppingCart input[type='number'] { background-color: var(--resoledBlackrey); color: var(--resoledGrey); color: #FFF; border: none; /* padding: 1.31rem; */ line-height: 0.875rem; text-align: right; -moz-appearance: textfield; } .shoppingCart input[type="number"]::-webkit-outer-spin-button, .shoppingCart input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .shoppingCart tfoot tr:first-child > * { border-top:0.125rem solid var(--resoledBlue); } .shoppingCart tr > * { padding:0.5em; text-align:left; } .shoppingCart tr > *:last-child { text-align:center; } .shoppingCart thead th { background: var(--resoledBlack); color:var(--resoledFG); } .shoppingCart tbody tr > * { background:var(--resoledBlack); } .shoppingCart td { width:1%; white-space:nowrap; } .shoppingCart input { max-width: 2.3rem; } .shoppingCart tbody tr:nth-child(even) > * { background:var(--bgTableEven); border-top:0.125rem solid var(--resoledDarkGrey); } @media (max-width:30em) { .shoppingCart tr { display:flex; flex-wrap:wrap; } .shoppingCart tbody th { width:100%; } .shoppingCart td { width:auto; } .shoppingCart tr > *:nth-child(2) { flex-grow:1; } } /* lazy images */ /* basic functionality */ .lazyImage { position:relative; display:inline-block; width:100%; /*height:0;*/ overflow:hidden; vertical-align:bottom; } .lazyImage img { opacity:1; transform:scale(1); transition:background 0.5s, opacity 0.5s, transform 0.5s; } .lazyImageError img, .lazyImageWaiting img { opacity:0; transform:scale(0); transition:none; } .lazyImageError:after { content:"Image Not Found"; box-sizing:border-box; position:absolute; top:0; left:0; width:100%; height:100%; overflow:auto; display:flex; align-items:center; justify-content:center; padding:1em; background:#FF4; color:#F00; border:2px solid #F00; transform:scale(0); transition:transform 0.5s; } .lazyImageErrorShow:after { transform:scale(1); } /* loading animation */ .lazyImage:before { content:""; position:absolute; width:30%; height:0; padding-top:30%; top:50%; left:50%; opacity:0; transform:translate(-50%,-50%); transition:transform 0.5s, opacity 0.5s; border:1em solid; border-color:#0484 #0488; border-radius:50%; } .lazyImageWaiting:before { animation:spin 1s linear infinite; opacity:1; } @keyframes spin { 0% { transform:translate(-50%,-50%) rotate(0deg) scale(1); } 50% { transform:translate(-50%,-50%) rotate(180deg) scale(0.7); } 100% { transform:translate(-50%,-50%) rotate(360deg) scale(1); } } form+form { margin-top: 3rem; padding-top: 3rem; border-top: 1px solid var(--resoledDarkGrey); } #shoppingCartExtrasForm label { display: block; margin:0.25em 0 1rem; } #shoppingCartExtrasForm > * { margin-bottom: 1.5rem; } #shoppingCartExtrasForm label { white-space:nowrap; align-items:start; gap:0.4em; } #shoppingCartExtrasForm input { flex-grow:0; } #shoppingCartForm footer { display: flex; margin-top: 1.5rem; } #shoppingCartForm footer ul { list-style: none; display: flex; gap: 1rem; flex-grow: 1; } #contactForm legend { float:left; width:100%; } #contactForm { width:100%; max-width:44em; margin:auto; } #contactForm > fieldset { display:flex; flex-wrap:wrap; gap:1rem; /*padding:0 min(2rem, 3vw);*/ margin-bottom: 2rem; } #contactForm > header { margin-bottom: 3rem; } #contactForm > fieldset > * { width: 34%; min-width: min(16rem, 100%); } #contactForm > fieldset > label br { margin-bottom: 0.625rem; } #contactForm > fieldset > label, #contactForm legend { text-indent:0.5rem; flex: 1 0 auto; } #contactForm > fieldset > label.longData { width:100%; } #contactForm > fieldset > label * + br { display:none; } #contactForm > fieldset > label input, #contactForm > fieldset > label select, #contactForm > fieldset > label textarea { display:block; width:100%; /*font-size:1.125rem;*/ padding: 1.31rem; margin-top:0.125rem; background:var(--resoledBlack); color:var(--resoledFG); border:0.0625rem solid var(--bgTrim); border-radius:0.25rem; text-align: left; } #contactForm input, #contactForm select, #contactForm textarea { outline:none; } #contactForm textarea { resize:vertical; } #contactForm input:focus, #contactForm select:focus, #contactForm textarea:focus { box-shadow:0 0 0.0625rem 0.125rem var(--resoledBlue); } #contactForm > footer { /*padding:1rem min(2rem, 3vw);*/ text-align:right; } #contactForm > footer button { display: inline-block; /*padding:0.625rem 1.25rem;*/ /*font-size:1.125rem;*/ /*color:#FFF;*/ /*background:#075;*/ /*border:none;*/ /*border-radius:0.3125em;*/ /*text-shadow:0 0 0.5em #000;*/ transition:transform 0.3s; } #contactForm > footer button+button { margin-left: 1rem; } #contactForm > footer button:hover, #contactForm > footer button:focus { transform:scale(1.1); } #aboutUs section { display: grid; grid-template-rows: 1fr; grid-template-columns: 1fr 1fr; grid-template-areas: "header header" "details sample"; margin-bottom: 6rem; grid-gap: 0 1rem; } #aboutUs > div, #aboutUs > footer { margin-bottom: 6rem; } #aboutUs > div:last-of-type { margin-bottom: 2rem; } @media(max-width:1200px) { #aboutUs section { display: block; } } #aboutUs section>* { grid-area: details; } #aboutUs section>h3 { grid-area: header; } #aboutUs section .details { grid-area: details; display: flex; align-items: center; } @media(min-width:1200px) { #aboutUs section .details { padding-right: 1rem; } } #aboutUs section .details p:first-child { margin-top: 0; } #aboutUs section .media { grid-area: sample; } .vimeoFacade { position:relative; width:100%; } .videoEmbed { border: none; } .videoEmbed, .vimeoFacade img { width:100%; height:auto; max-height: 50rem; } .vimeoFacade img { display:block; aspect-ratio:attr(data-aspect-ratio); } .vimeoFacade a { text-decoration:none; } .vimeoFacade a:first-child:after { content:""; position:absolute; top:50%; left:50%; translate:-50% -50%; width:4rem; height:4rem; background-size:4rem; background: url("data:image/svg+xml,%3Csvg width='100%2524' height='100%2524' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 12C19 12.3557 18.8111 12.6846 18.5039 12.8638L6.50387 19.8638C6.19458 20.0442 5.81243 20.0455 5.50194 19.8671C5.19145 19.6888 5 19.3581 5 19L5 5C5 4.64193 5.19145 4.3112 5.50194 4.13286C5.81243 3.95452 6.19458 3.9558 6.50387 4.13622L18.5039 11.1362C18.8111 11.3154 19 11.6443 19 12Z' fill='%233D8DF7' fill-rule='evenodd'%3E%3C/path%3E%3C/svg%3E") center no-repeat; } .vimeoFacade a:last-child { position:absolute; bottom:1rem; left:0; padding:1rem; background:var(--resoledDarkGrey); color:#FFF; } .vimeoFacade a:last-child b { display:inline-block; width:5rem; margin-left:0.25rem; font-size:1.2rem; line-height:1.2rem; color:transparent; background-size:5rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 507.9 113.39'%3E%3Cg fill='%23fff'%3E%3Cpath d='M64.792 80.99V32.396l42.082 24.297zm93.803-63.285a20.285 20.285 0 00-14.32-14.32C131.642 0 80.99 0 80.99 0S30.337 0 17.705 3.385a20.286 20.286 0 00-14.32 14.32C0 30.338 0 56.693 0 56.693S0 83.049 3.385 95.68A20.285 20.285 0 0017.705 110c12.632 3.386 63.285 3.386 63.285 3.386s50.652 0 63.285-3.386a20.284 20.284 0 0014.32-14.32c3.385-12.632 3.385-38.988 3.385-38.988s0-26.355-3.385-38.988m94.473 74.326c.887-2.314 1.332-6.098 1.332-11.35V58.556c0-5.097-.445-8.822-1.332-11.178-.888-2.355-2.452-3.533-4.69-3.533-2.163 0-3.69 1.178-4.577 3.533-.888 2.356-1.332 6.081-1.332 11.178V80.68c0 5.25.424 9.035 1.275 11.35.848 2.318 2.392 3.475 4.633 3.475 2.239 0 3.803-1.157 4.691-3.475zm-17.953 11.122c-3.207-2.16-5.486-5.52-6.835-10.079-1.352-4.554-2.027-10.617-2.027-18.185v-10.31c0-7.644.771-13.784 2.316-18.417 1.544-4.633 3.956-8.011 7.24-10.135 3.282-2.123 7.587-3.186 12.916-3.186 5.251 0 9.459 1.082 12.626 3.243 3.165 2.162 5.482 5.542 6.95 10.136 1.466 4.595 2.2 10.715 2.2 18.36v10.31c0 7.567-.714 13.65-2.142 18.243-1.43 4.595-3.747 7.955-6.951 10.077-3.205 2.124-7.548 3.186-13.03 3.186-5.64 0-10.06-1.082-13.263-3.243m248.053-57.981c-.81 1.005-1.352 2.646-1.621 4.923-.272 2.278-.404 5.734-.404 10.367v5.097h11.697V60.46c0-4.555-.155-8.011-.463-10.367-.309-2.355-.868-4.014-1.678-4.98-.812-.966-2.067-1.449-3.766-1.449-1.7 0-2.954.503-3.765 1.506zm-2.025 29.886v3.591c0 4.557.132 7.974.404 10.251.269 2.279.828 3.94 1.68 4.982.849 1.041 2.16 1.564 3.938 1.564 2.392 0 4.035-.927 4.923-2.781.887-1.853 1.37-4.942 1.447-9.268l13.785.812c.077.62.116 1.469.116 2.548 0 6.565-1.795 11.47-5.387 14.712-3.589 3.242-8.669 4.865-15.232 4.865-7.876 0-13.398-2.47-16.564-7.414-3.168-4.94-4.75-12.586-4.75-22.935V63.589c0-10.657 1.641-18.436 4.924-23.342 3.281-4.903 8.9-7.355 16.854-7.355 5.482 0 9.691 1.004 12.626 3.012 2.933 2.01 5 5.137 6.197 9.383 1.197 4.247 1.796 10.117 1.796 17.607v12.163h-26.757m-284.953-1.33l-18.187-65.68h15.869l6.37 29.77c1.623 7.339 2.82 13.594 3.591 18.766h.464c.54-3.706 1.738-9.922 3.591-18.65l6.603-29.886h15.869l-18.417 65.68v31.51h-15.754v-31.51M322.115 34.23v71.007h-12.511l-1.39-8.688h-.347c-3.399 6.564-8.496 9.845-15.291 9.845-4.71 0-8.185-1.543-10.425-4.633-2.24-3.087-3.359-7.915-3.359-14.48V34.23h15.985v52.126c0 3.168.348 5.426 1.043 6.776.695 1.353 1.853 2.027 3.475 2.027 1.39 0 2.722-.423 3.996-1.275 1.274-.849 2.22-1.928 2.838-3.241V34.229h15.986m81.995.001v71.007h-12.511l-1.391-8.688h-.345c-3.402 6.564-8.498 9.845-15.292 9.845-4.711 0-8.186-1.543-10.426-4.633-2.24-3.087-3.358-7.915-3.358-14.48V34.23h15.985v52.126c0 3.168.347 5.426 1.041 6.776.696 1.353 1.855 2.027 3.476 2.027 1.391 0 2.723-.423 3.996-1.275 1.275-.849 2.22-1.928 2.839-3.241V34.229h15.985'%3E%3C/path%3E%3Cpath d='M365.552 20.908h-15.87v84.329h-15.637v-84.33h-15.869V8.05h47.376v12.858m76.811 53.636c0 5.174-.215 9.229-.639 12.162-.424 2.937-1.139 5.021-2.143 6.255-1.004 1.236-2.357 1.854-4.053 1.854a7.404 7.404 0 01-3.65-.927c-1.12-.618-2.026-1.544-2.722-2.78V50.796c.54-1.93 1.467-3.513 2.78-4.749 1.313-1.234 2.74-1.853 4.285-1.853 1.623 0 2.876.637 3.766 1.91.886 1.275 1.505 3.418 1.853 6.43.348 3.011.523 7.297.523 12.857zm14.652-28.964c-.967-4.478-2.531-7.721-4.692-9.73-2.163-2.007-5.136-3.011-8.919-3.011-2.935 0-5.676.83-8.224 2.49a16.926 16.926 0 00-5.908 6.545h-.117l.001-37.416h-15.405v100.777h13.204l1.622-6.717h.347c1.235 2.393 3.088 4.285 5.56 5.675 2.47 1.39 5.213 2.085 8.225 2.085 5.404 0 9.382-2.491 11.931-7.471 2.548-4.982 3.823-12.76 3.823-23.341V64.23c0-7.953-.484-14.17-1.448-18.65'%3E%3C/path%3E%3C/g%3E%3C/svg%3E") center no-repeat; } .productPrice .colourway { display: block; margin-bottom: 1.5rem; font-family: 'Barlow Semi Condensed'; font-style: italic; font-weight: 600; font-size: 1.125rem; line-height: 1.125rem; color: var(--resoledGrey); } .productPrice .brandStyleCode { display: block; margin-bottom: 1.5rem; font-family: 'Inter'; font-style: normal; font-weight: 400; font-size: 1rem; line-height: 1.5rem; color: var(--resoledGrey); } h3#priceRange { font-family: 'Barlow Semi Condensed'; font-style: italic; font-weight: 600; font-size: 2.25rem; line-height: 2rem; color: var(--resoledBlue); } .productDescription { font-family: 'Barlow Semi Condensed'; font-style: italic; font-weight: 600; font-size: 1.375rem; line-height: 1.375rem; color: var(--resoledBlue); margin-bottom: 1.313rem; } #bagCount { font-family: 'Barlow Semi Condensed'; font-style: italic; font-weight: 600; font-size: 14px; line-height: 14px; leading-trim: both; text-edge: cap; text-align: center; color: #FFFFFF; /* Ellipse 4 */ width: 0.3rem; height: 0.3rem; background: var(--resoledBlue); padding: 0.3rem 0.6rem; margin-right: 0.5rem; border-radius: 100%; } #bagcon { position: relative; top: 0.2rem; }