/** Shopify CDN: Minification failed Line 1263:24 Unexpected ")" **/ /* * ---------------------------------------------------------------------------- * THEME CSS OVERRIDES AND ADDITIONS FOR NEW TEMPLATES ADDED BY ANNA * ---------------------------------------------------------------------------- */ :root{ --main-heading-spacing-top: calc(1.2rem + .025vw); --main-heading-spacing-bottom: calc(1.5rem + .025vw); --page-intro-spacing-top: calc(0.8rem + .1vw); --page-intro-spacing-bottom: calc(0.8rem + 1.5vw); --bodyfont-size: calc(1rem + 0.025vw); --price-size: calc(0.9rem + 0.025vw); --price-size-big: calc(1.2rem + 0.025vw); --price-letter-spacing: calc(0.1rem + 0.25vw); } html { scroll-behavior: smooth; padding-bottom:0!important; } .Section--spacingNormal { margin: 4vw 0; } .hide{ display: none; } /* * ---------------------------------------------------------------------------- * MAKE FOOTER ALWAYS STICK TO BOTTOM OF PAGE * ---------------------------------------------------------------------------- */ .PageContainer { display: flex; min-height: 100vh; flex-direction: column; } #main { flex: 1; } /* * ---------------------------------------------------------------------------- * GLOBAL HEADER * ---------------------------------------------------------------------------- */ .Header__LogoImage { width: calc(12rem + 15vw); max-width:54vw!important; margin: 0.25vw; } @media screen and (min-width: 641px) { .Header__LogoImage { max-width:none!important; } } @media screen and (min-width: 1140px) { .Header__LogoImage { width: calc(16rem + 6vw); max-width:none!important; } } .MegaMenu__PushHeading.Heading.u-h6, .Text--subdued{ opacity:0.7; color: var(--header-light-text-color); } @media screen and (max-width: 640px) { .Header__Icon + .Header__Icon { margin-left: 10px; } .Header:not(.Header--sidebar) .Header__Wrapper { padding: calc(1rem + 0.3vw) 5.5vw calc(1rem + 0.3vw); } } @media screen and (min-width: 1140px) { .Header:not(.Header--sidebar) .Header__Wrapper { padding: calc(0.5rem + 0.3vw) 2vw calc(0.7rem + 0.3vw); } .Header__SecondaryNav .features--heading-small .Rte h5, .Header__SecondaryNav .Heading.rb--heading.Link.Link--primary.u-h5, .Header__SecondaryNav .Heading.rb--heading.u-h6, .Header__MainNav .Heading.rb--heading.u-h6{ font-weight: bold; font-size: 14px; font-family: var(--heading-font-family); border:0; letter-spacing: 0.1rem; opacity:1; } } /* * ---------------------------------------------------------------------------- * REDUCE BRIGHTNESS OF HERO IMAGES WHEN USING A TRANSPARENT HEADER ON * HOME AND COLLECTION PAGES SO CAN SEE WHITE TEXT ON TOP. * ---------------------------------------------------------------------------- */ #shopify-section-1614103881c72ac684{ filter:brightness(0.8); } /* No longer want overlays on images in headers */ .PageHeader--withBackground:after{ display:none; } .PageHeader--withBackground .Container { padding: 0 80px; position: relative; z-index: 1; } .PageHeader--withBackground { min-height: 340px; margin: 0!important; } .template-collection .PageHeader--withBackground { min-height: 340px; margin-bottom: 2vw!important; } .Contact__Social { margin: 0 0 12vw; } @media screen and (min-width: 1140px) { .Contact__Social { margin: 3vw 0 3vw; } } .CollectionInner { margin-top: 0; } /* * ---------------------------------------------------------------------------- * GLOBAL FOOTER - DIDN'T LIKE THE RANGE LEFT LOOK ON MOBILE AND TABLET * ---------------------------------------------------------------------------- */ .Footer__title{ color: var(--text-color) } @media screen and (max-width: 680px) { .Footer--withMargin { margin-top: 10vw; } .Footer__Block { flex:1 1 30%; margin-top:0; margin-bottom:50px; box-sizing: border-box; } .Footer__Block:first-child{ flex: 1 1 90%; position: relative; } .Footer__Block.Footer__Block--newsletter{ clear: both; flex: 1 1 90%; text-align:center; margin-bottom: 0; border-top: 1px solid var(--border-color); padding-top:2vw; } .Footer__Block.Footer__Block--newsletter p{ clear: both; display: block; max-width:600px; padding:3vw 5vw 2vw; margin:auto; font-size:3vw; } .Footer__Block.Footer__Block--newsletter .Form__Input{ text-align: center; } .Footer__Inner + .Footer__Aside { margin-top: 0; text-align: center; } .Footer__Aside .Footer__Copyright{ margin:auto; } .Footer__Inner, .Footer__Inner .Linklist__Item{ text-align: center; } .Footer__Inner .Linklist__Item{ text-align: left; font-size:3vw; margin-bottom: 3vw; } .Footer__Inner .Linklist{ padding: 0 0 0 6vw; } .Footer__Title { display: none!important; } .Footer__Social { margin-top: 0; } .Button{ width:100%; } .Footer__Inner { display: flex; flex-wrap: wrap; justify-content: space-between; margin-left:0; margin-right:0; } .Icon { height: 5vw; width: 5vw; } .Footer__Inner .Linklist__Item { transition: none; } } @media screen and (min-width: 681px) and (max-width: 1139px) { .Footer--withMargin { margin-top: 5vw; } .Footer__Block { flex:1 1 30%; margin-top:0; margin-bottom:50px; box-sizing: border-box; } .Footer__Block:first-child{ flex: 1 1 90%; position: relative; } .Footer__Block.Footer__Block--newsletter{ clear: both; flex: 1 1 90%; text-align:center; margin-bottom: 0; } .Footer__Block.Footer__Block--newsletter p{ clear: both; display: block; max-width:600px; padding:3vw 5vw 2vw; margin:auto; } .Footer__Block.Footer__Block--newsletter .Form__Input{ text-align: center; } .Footer__Inner + .Footer__Aside { margin-top: 0; text-align: center; } .Footer__Aside .Footer__Copyright{ margin:auto; } .Footer__Inner, .Footer__Inner .Linklist__Item{ text-align: center; } .Footer__Inner .Linklist__Item{ text-align: left; font-size:2vw; margin-bottom: 3vw; } .Footer__Title { display: none!important; } .Footer__Social { margin-top: -10px; } .Button{ width:100%; } .Footer__Inner { display: flex; flex-wrap: wrap; justify-content: space-between; margin-left:0; margin-right:0; } .Icon { height: 3vw; width: 3vw; } } @media screen and (min-width: 1140px) { .Footer--withMargin { margin-top: 5vw; } .Footer .Container{ padding:0 2vw; } .Footer__Inner + .Footer__Aside { margin-left: 0px; margin-right: 0px; } .Footer__Inner { display: flex; flex-wrap: wrap; justify-content: space-between; margin-left: -2vw; margin-right: -2vw; } .Footer__Block { padding-left: 2vw; padding-right: 2vw; margin-bottom: 20px; } .Footer__Social { margin: 0 0 3vw -0.7vw; } .HorizontalList--spacingExtraLoose .HorizontalList__Item, .HorizontalList--spacingLoose .HorizontalList__Item{ margin-right: 0.7vw; margin-left: 0.7vw; } .Icon { height: 0.9vw; width: 0.9vw; } .Footer__Block--newsletter { flex-basis: 22vw; } .Footer__Inner .Linklist__Item { transition: none; } } /* * ---------------------------------------------------------------------------- * ALL HEADERS AND DESCRIPTIONS IN HEADERS * ---------------------------------------------------------------------------- */ .Article__Header, .PageHeader { margin: var(--main-heading-spacing-top) auto var(--main-heading-spacing-bottom); } .PageHeader.galleryPage .SectionHeader__Heading, .PageHeader .SectionHeader__Description{ margin:var(--page-intro-spacing-top) auto 2rem!important; } .template-blog .Article__Content{ margin: var(--page-intro-spacing-top) auto var(--page-intro-spacing-bottom); } .quote-link{ text-align: center; } @media screen and (max-width: 640px) { .PageContent--narrow { max-width: none; } .ProductMeta__Description { padding-top: 0; border-top: 0 solid var(--border-color); } } @media screen and (min-width: 641px) and (max-width: 1139px) { .PageContent--narrow { max-width: 800px; } } @media screen and (min-width: 1140px) { .PageContent--narrow { max-width: 800px; } } /*@media screen and (min-width: 1600px) { .PageContent--narrow { max-width: 900px; } } */ /* * ---------------------------------------------------------------------------- * BUTTONS * ---------------------------------------------------------------------------- */ .Button, .shopify-payment-button__button--unbranded, input.spr-button-primary, .spr-summary-actions-newreview, .spr-button-primary:not(input), .spr-pagination-prev > a, .spr-pagination-next > a{ font-family: var(--text-font-family); font-weight: var(--text-font-weight); font-style: var(--text-font-style); font-size:12px; } @media screen and (max-width: 640px) { .Button, .shopify-payment-button__button--unbranded, input.spr-button-primary, .spr-summary-actions-newreview, .spr-button-primary:not(input), .spr-pagination-prev > a, .spr-pagination-next > a{ font-family: var(--text-font-family); font-weight: var(--text-font-weight); font-style: var(--text-font-style); font-size:12px; } } @media screen and (max-width: 640px) { .cc-btn.cc-dismiss, .template-cart .continue-shopping, .Button{ padding:4vw; } } @media screen and (min-width: 641px) { .cc-btn.cc-dismiss, .template-cart .continue-shopping, .Button{ padding:3vw; } } @media screen and (min-width: 1040px) { .cc-btn.cc-dismiss, .template-cart .continue-shopping, .Button{ padding:0.75vw 2vw; min-width:200px; } } /* solve glitch on firefox */ .Button::before, .shopify-payment-button__button--unbranded::before, .spr-button-primary:not(input)::before, .spr-pagination-next > a::before, .spr-pagination-prev > a::before, .spr-summary-actions-newreview.spr-summary-actions-newreview::before, input.spr-button-primary::before { height: 101%; } /* * ---------------------------------------------------------------------------- * HOME PAGE * ---------------------------------------------------------------------------- */ .template-index .homepage-collections{ margin:2vw 0; } .template-index .SectionHeader__Heading.Heading.rb-heading.u-h2{ margin-top:0; } .template-index .Section--spacingNormal { padding-top: 6.2vw; padding-bottom:6vw; } .Button--primary.white{ color: var(--background); border: 1px solid var(--background); color: var(--text-color-light); } .Button--primary.white::before{ background-color: var(--background); } @media screen and (min-width: 1140px) { .template-index .Section--spacingNormal { padding-top: 2vw; padding-bottom:0; } } /* * ---------------------------------------------------------------------------- * HOME PAGE - FEATURED COLLECTION * ---------------------------------------------------------------------------- */ .CollectionItem__ImageWrapper { height: auto; } .template-index .SectionFooter { margin-top: 6vw; margin-bottom: 5vw; } @media screen and (min-width: 441px) { .template-index .SectionFooter { margin-top: 2vw; margin-bottom: 0; } } @media screen and (min-width: 1140px) { .template-index .SectionFooter { margin-top: 2vw; margin-bottom: 4vw; } } @media (-moz-touch-enabled: 0), (hover: hover) { .features--show-button-transition .Button--primary.white:not([disabled]):hover { color: var(--background); background-color: transparent; border: 1px solid rgba(var(--background-rgb), 0.8); } } /* * ---------------------------------------------------------------------------- * HOME PAGE - FULL SCREEN HERO * ---------------------------------------------------------------------------- */ .fullscreen-video-container{ min-height:100vh; } .fullscreen-video { left: 0; width: 100%; height: 100vh; z-index: 0; pointer-events: none; overflow: hidden; padding:0; position: absolute; } .template-index .fullscreen-video{ margin-top:-1px; } .fullscreen-video .thumbnail{ z-index: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; } .fullscreen-video .thumbnail img{ min-width:100%; max-width:none; min-height:100vh; max-height:none; } .fullscreen-video .thumbnail, .fullscreen-video iframe{ top: 50%; left: 50%; position: absolute; min-height: 100vh; min-width: 177.77vh; transform: translate(-50%, -50%); width: 100vw; height: 56.25vw; z-index: 1; } .fullscreen-video:after{ position: absolute; left:0; top:0; right:0; bottom:0; display: block; content:" "; background:black; opacity:0.2; z-index:1; } @media screen and (max-width: 1023px) { .fullscreen-video-container, .fullscreen-video { height: 61vh; min-height:61vh; } .fullscreen-video iframe, .fullscreen-video .thumbnail{ top: 50%; left: 50%; position: absolute; min-height: 0; min-width: 177.77vh; transform: translate(-50%, -50%); width: 100vw; height: 100%; z-index: 1; } .fullscreen-video .thumbnail{ min-height: 100%; min-width: 100%; width: auto; height: 100%; } .fullscreen-video iframe{ display: block; } .fullscreen-video .thumbnail img { min-width:100%; max-width:none; min-height:100%; max-height:100%; height:auto; width:auto; } } /* * ---------------------------------------------------------------------------- * HOME PAGE - COLLECTIONS LIST (PENDANTS, CLUSTERS, WALL LIGHT PODS) * ---------------------------------------------------------------------------- */ .template-index #section-collection-list a.CollectionItemCarousel__Cell{ position: relative; display: block; } .template-index .CollectionItem__ImageWrapper { background-size: cover; background-position: center; height: 100%; width: 100%; transform: scale(1); transition: transform 8s cubic-bezier(.25, .46, .45, .94); } .template-index #section-collection-list .SectionHeader { position: absolute; padding: 0; margin-bottom: 0 !important; top: 50%; left: 0; width: 100%; text-align: center; transform:translateY(-50%); } .template-index .SectionHeader__Heading.Heading.rb-heading.u-h1, .template-index #section-collection-list .SectionHeader__Heading.SectionHeader__Heading--emphasize.Heading.rb--heading.u-h1{ color:#fff; padding:0; margin:0; } @media screen and (max-width: 640px) { .template-index .CollectionList.galleryList--spaced{ margin-left:0; } .template-index .CollectionList--grid .Grid__Cell { padding: 0 3vw 0 3vw; margin: 0 0 3vw 0; } } @media screen and (min-width: 641px) and (max-width: 1139px) { .template-index .CollectionList.galleryList--spaced{ margin-left:-2vw; padding: 0 3vw; } .template-index .homepage-collections .Grid__Cell { padding: 0 0 0 2vw; margin: 0 0 2vw 0!important; } } @media screen and (min-width: 1140px) { .template-index .CollectionList.galleryList--spaced{ margin-left:-2vw; padding: 0 2vw; } .template-index .homepage-collections .Grid__Cell { padding: 0 0 0 2vw; margin: 0 0 2vw 0 !important; } } /* * ---------------------------------------------------------------------------- * HOME PAGE - BANNER WITH TEXT OVER (LONDON SHOWROOM) * ---------------------------------------------------------------------------- */ .template-index .ImageHero__ContentOverlay { text-shadow:none; padding:0 6vw; } @media screen and (min-width: 1140px) { .ImageHero--fullscreen { min-height: 100vh; } .template-index .ImageHero__ContentOverlay { flex-basis: 600px; padding:0; } } /* * ---------------------------------------------------------------------------- * HOME PAGE - RICH TEXT SECTION - ANNA'S NEW * ---------------------------------------------------------------------------- */ .template-index .Section--spacingNormal.SectionRichtext { margin: 4vw 0 0; } .template-index .Section--spacingNormal.SectionRichtext .SectionHeader::after { display: none; } .template-index .Section--spacingNormal.SectionRichtext .Article__Body { margin-top: 0; margin-bottom: 0; } @media screen and (min-width: 1140px){ .template-index .Section--spacingNormal.SectionRichtext .Article__Body { max-width: 1200px; margin: auto; } } /* * ---------------------------------------------------------------------------- * HOME PAGE - SEO TEXT CARDS SECTION - ANNA'S NEW * ---------------------------------------------------------------------------- */ .template-index .Section--spacingNormal.SectionTextCards{ padding-bottom:4vw; } @media screen and (max-width: 1139px){ .template-index .Section--spacingNormal.SectionTextCards .Grid__Cell{ margin: 0 0 12vw 0; } .template-index .SectionTextCards .ArticleItem__Title.Heading.u-h2 { margin-bottom:10px; } } @media screen and (min-width: 1140px){ .template-index .SectionTextCards .ArticleItem__Title.Heading.u-h2 { margin-left: 0; margin-right: 0; padding:0; text-align: left; margin-bottom:10px; } } /* * ---------------------------------------------------------------------------- * HOME PAGE - IF FLICKETY IS ENABLED ON MOBILE, IE ITEMS AREN'T STCKED. MAKE THE CAROUSEL LOOK MORE LIKE THE CUSTOM PAGES * ---------------------------------------------------------------------------- */ .template-index .homepage-collections .flickity-enabled .flickity-viewport { height: 68vw; } .template-index .homepage-collections .flickity-enabled .CollectionItemCarousel__Cell{ transition: opacity .3s ease-in-out; } .template-index .homepage-collections .flickity-enabled .Grid__Cell{ width:75vw!important; padding: 0 6vw!important; margin-left:-6.5vw!important; } .template-index .SectionHeader:not(:only-child) { margin-bottom: 6vw; } @media screen and (min-width: 1140px) { .template-index .SectionHeader:not(:only-child) { margin-bottom: 2vw; } } /* * ---------------------------------------------------------------------------- * COLLECTION TEMPLATE - THIS DISPLAYS ALL PRODUCTS IN A COLLECTION, * E.G. PIC N MIX STANDARD * ---------------------------------------------------------------------------- */ .ProductItem__PriceList.Heading{ font-family: var(--text-font-family); font-weight: var(--text-font-weight); font-style: var(--text-font-style); font-size: var(--price-size); letter-spacing: calc(.1rem + .025vw); } .ProductItem__LabelList{ left:0; } .ProductItem__Label.ProductItem__Label--soldOut.Heading.Text--subdued{ background:transparent; text-align: center; line-height:1.2; color: var(--text-font-color); } .breadcrumb{ display: block; padding: 20px; text-align: center; } @media screen and (max-width: 640px) { .ProductItem__Info { margin-top: 3vw; } } @media screen and (min-width: 1140px) { .ProductItem__Info { margin-top: 0.8vw; } } /* * ---------------------------------------------------------------------------- * PRODUCT TEMPLATE - SECTION/CONTAINER DEFAULTS * ---------------------------------------------------------------------------- */ /* testing for ipad bug #shopify-section-product-template{ outline:5px solid red; overflow:hidden; } .template-product .Product{ outline:5px solid blue; overflow:hidden; pointer-events: relative; } .ProductForm, .Product__Info{ outline:5px solid yellow; overflow:hidden; padding-bottom:50px; } .Product__InfoWrapper{ outline:5px solid cyan; overflow:hidden; height: auto; } .Product__Wrapper{ outline:5px solid green; overflow:hidden; } */ .template-product section{ display:block; padding-bottom:30px; } .template-product section.Product{ padding-bottom:0.5rem; } .template-product #main .shopify-section{ overflow:hidden; } .template-product .PageContent { margin: 0 auto; padding: 50px 0; } .template-product .Product { position: relative; margin: 0 auto 50px auto; margin-bottom: 50px; max-width: 1200px; } @media screen and (max-width: 640px) { .template-product section{ padding-bottom:0.5rem; } } @media screen and (min-width: 1140px) { .template-product section{ padding-bottom:0; } .template-product .PageContent { padding: 5.8vw 0; } } /* large desktop */ @media screen and (min-width: 1600px) { .template-product .Product { max-width: 1330px; } } /* * ---------------------------------------------------------------------------- * PRODUCT TEMPLATE - MAIN PRODUCT AREA / PRODUCT META AND FORM * ---------------------------------------------------------------------------- */ .ProductMeta{ text-align: center; } .ProductMeta .rb--heading.u-h1{ margin-bottom:0; text-transform: uppercase; } .ProductMeta__PriceList { font-size: var(--price-size-big); letter-spacing:var(--price-letter-spacing); } /* ADDED BY ANNA OCT 2022 */ .ProductMeta__PriceList .u-h4{ font-size: var(--price-size-big); } .ProductMeta__Price{ font-family: var(--text-font-family); font-weight: var(--text-font-weight); font-style: var(--text-font-style); margin:0 auto; } .ProductMeta__Description p{ margin-bottom:0.6rem!important; } .ProductMeta__Description { margin: 0; padding-top: 24px; border-top: 0; text-align: left; } .ProductMeta__Description .divider:last-of-type{ display:none; } .Product__Info .scroll-links { margin-top: calc(0.6rem + .025vw); } .Product__Info .scroll-link{ text-decoration: underline; color: var(--link-color); transition: color 0.2s ease-in-out, -webkit-text-decoration-color 0.2s ease-in-out; transition: color 0.2s ease-in-out, text-decoration-color 0.2s ease-in-out; transition: color 0.2s ease-in-out, text-decoration-color 0.2s ease-in-out, -webkit-text-decoration-color 0.2s ease-in-out; } .Product__Info .scroll-link:hover{ color: var(--text-color); } .template-product .ProductForm{ margin-top: calc(1.2rem + .025vw); } .ColorSwatch--large { width: 36px; height: 36px; border-radius: 50%; } .ColorSwatch::after { content: ""; position: absolute; width: calc(100%); height: calc(100%); top: 0; left: 0; border-radius: 50%; } /* .ColorSwatch.is-active::after, .ColorSwatch__Radio:checked + .ColorSwatch::after { border: 1.75px solid currentColor !important; } .ColorSwatch.is-active::after, .ColorSwatch__Radio:checked + .ColorSwatch::after { border: 5px solid white !important; -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.20); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.20); } .ColorSwatch.is-active::after, .ColorSwatch__Radio:checked + .ColorSwatch::after { -webkit-box-shadow: 0px 1px 8px 3px rgba(0,0,0,0.20); box-shadow: 0px 1px 8px 3px rgba(0,0,0,0.20); border:1px solid rgba(0,0,0,0.50) !important; } */ /* like a radio button */ .ColorSwatch.is-active::after, .ColorSwatch__Radio:checked + .ColorSwatch::after { content: ""; position: absolute; width: 50%; height: 50%; top: 25%; left: 25%; border-radius: 50%; background: white; -webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.20); box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.20); border:0!important; } /* desktop */ @media screen and (min-width: 1140px) { .Product__Info{ top:0!important; } } /* desktop */ @media screen and (min-width: 1140px) { .template-product .productgallery-image-caption{ padding:0.5vw; } .Product__Info{ padding-bottom:80px; } } /* ========================================================================== PRODUCT TEMPLATE - DPO tooltip ========================================================================== */ #itoris_dynamicproductoptions .fieldset .dpo_tooltip_icon .dpo_tooltip_body { padding:12px 15px 15px!important; -webkit-box-shadow: 0px 1px 20px 3px rgba(0,0,0,0.10); box-shadow: 0px 1px 20px 3px rgba(0,0,0,0.10); border: 0; border-radius: 5px; border:0; text-align: center!important; line-height:1.3; width:300px!important; font-size:calc(0.9rem + 0.025vw)!important; left:-128px!important; } #itoris_dynamicproductoptions .dpo_tooltip_icon:hover .dpo_tooltip_body { } body .submitting:before, body .dpo-loading:before { background-image:url(/cdn/shop/files/loading.gif); width:50px; height:2px; left:auto; top:auto; right:auto; bottom:auto; z-index:0; position:absolute; } body .dpo-loader { display:none } /* body .dpo-loader { background-image:url(/cdn/shop/files/loading.gif); width:50px; height:2px; margin:5px 0; position:absolute; top:20px; left:0; } */ /* ========================================================================== PRODUCT TEMPLATE - PRODUCT GALLERY AREA ========================================================================== */ .productgallery-image-caption{ position: absolute; bottom:0; left:0; color:white; padding:3vw; background:rgba(0,0,0,0.1); z-index: 2000; margin:0!important; } .Product__Gallery:not(.Product__Gallery--stack).Product__Gallery--withThumbnails .Product__SlideshowNavImage { margin: 15px 10px 10px; } .Product__SlideshowNavImage { opacity:1; } .Product__SlideshowNavImage.is-selected { border-color: transparent!important; opacity:1; } @media screen and (min-width: 1140px) { .template-product .plyr__control--overlaid{ opacity:0!important; } } .plyr__control--overlaid) { background-color: transparent; display: none; } .template-product .plyr.plyr--full-ui.plyr--video .plyr__controls { display: none; } .template-product .Product__SlideshowNavImage .Icon.Icon--media-video-badge { fill: red!important; stroke-width: 0; pointer-events: none; } /* ========================================================================== PRODUCT TEMPLATE - RELATED PRODUCTS AND BOTTOM BANNER IMAGE AREA ========================================================================== */ .template-product .related-products-section{ background: var(--background); margin:5px auto 0; } .template-product .Product__FeatureImageWrapper { margin-top: 60px; } @media screen and (min-width: 1140px){ .template-product .related-products-section{ padding-bottom:5.8vw; max-width:1800px; margin:auto; /*padding-bottom:10vw;*/ } .template-product .Product__FeatureImageWrapper { margin-top: 0; } .template-product .related-products-section .SectionHeader:not(:only-child) { margin: 2vw 0; } } /* ========================================================================== PRODUCT TABS SNIPPET IN PRODUCT PAGES - FURTHER INFO ABOUT PRODUCT ========================================================================== */ .template-product #product-tabs{ padding:0; } .template-product .product-tabs-section{ background:#fff; } #product-tabs .Product__Tabs { margin: 0; padding: 0 0; } #product-tabs .rb--heading.u-h2 { display: none; } #product-tabs .Product__Tabs .Collapsible { border:0; margin-top: -60px; padding-top: 60px; } #product-tabs #detail .Collapsible__Content{ padding-right:0; } #product-tabs .Collapsible__Content strong, #product-tabs .Collapsible__Content strong a{ font-weight:normal; color:#be7d73; } #product-tabs .Collapsible__Content strong a{ text-decoration-color: #be7d73; } #product-tabs #tech-spec{ padding: 80px 0 0; margin-top:-50px; text-align:center; } #product-tabs #tech-spec.download-buttons .Button{ margin-bottom:10px; width: 100%; } #product-tabs .Collapsible__Button{ margin-bottom:0; width: 100%; border-top: 1px solid var(--border-color)!important; } #product-tabs #tech-spec.download-buttons .Button:last-child{ margin-bottom:0; } #product-tabs .Product__Tabs .Collapsible{ border-top:0; padding-left:0; padding-right:0; } #product-tabs .Product__Tabs{ margin-bottom:0px; } #product-tabs #detail img{ max-width:400px; width:100%; margin:0 auto 20px; } @media screen and (min-width: 641px){ #product-tabs #tech-spec.download-buttons .Button{ margin-right:20px; } #product-tabs #tech-spec.download-buttons .Button:last-child{ margin-right:0; } } @media screen and (min-width: 1140px){ #product-tabs .Product__Tabs{ padding: 0; } #product-tabs #tech-spec.download-buttons .Button{ margin-right:20px; width:auto; } #product-tabs #tech-spec{ margin-top:-80px; padding: 120px 40px 0; } } /* ========================================================================== PRODUCT TEMPLATE - CUSTOM QUOTE SECTION ========================================================================== */ .quoteform-section, #shopify-section-quote-custom-cluster, #shopify-section-quote-custom-pendant, #shopify-section-quote-custom-pendant-nocolouroptions{ border:0; } .template-product .quoteform-section{ background: var(--background); } .quoteform-section .SectionHeader__Heading.Heading.rb--heading.u-h2{ margin-bottom:6vw; } .quoteform-section .SectionHeader__Heading.Heading.rb--heading.u-h2{ margin-bottom:6vw; } .quoteform-section .PageContent { padding-bottom: 0; } .quoteform-section .info{ font-size: 80%; opacity: 0.5; margin: -0.5rem 0 2rem; text-align: center; line-height: 1.2; } /* in custom products, this is the only section so make it a bit dark than the product area */ .quoteform-section.shopify-section--darker { background: #f0f0f0; } @media screen and (min-width: 1140px){ .quoteform-section .PageContent { padding-bottom: 5vw; } .quoteform-section .SectionHeader__Heading.Heading.rb--heading.u-h2{ margin-bottom:2vw; } } element { font-size: 80%; opacity: 0.5; margin: -0.5rem 0 1rem; text-align: center; } .shopify-section--white{ background: white; border:0; } .shopify-section--offwhite{ background: var(--background); } .Select--primary select { padding-left: 10px!important; } /* ========================================================================== BESPOKE PAGES TEMPLATE - IN SITU IMAGE CAROUSELS ========================================================================== */ .ShopTheLook.Carousel { max-width: 1080px; } .ShopTheLook__Item { padding: 0 3vw; transition: opacity .3s ease-in-out; } .ProductList--carousel .Carousel__Cell { padding: 0 1vw; } .ShopTheLook.Carousel .flickity-prev-next-button{ display: none; } @media screen and (max-width: 1023px) { .ShopTheLook__Item { padding: 0 3vw; width: calc(80%); transition: opacity .3s ease-in-out; } .ShopTheLook__Item .image-caption{ margin-left: -3vw!important; } .ShopTheLook{ margin-bottom:12vw; } } @media screen and (min-width: 1008px) { .ProductList--carousel { text-align: center; margin:0 22px; overflow:hidden; } .ProductList--carousel .Carousel__Cell { width: 25%; display: inline-block; } } @media screen and (min-width: 1024px) { .ShopTheLook.Carousel { max-width: 900px; } .ShopTheLook.Carousel .flickity-prev-next-button{ display: block; } } @media screen and (min-width: 1440px) { .ShopTheLook.Carousel { max-width: 1000px; } } @media screen and (min-width: 1600px) { .ShopTheLook.Carousel { max-width: 1280px; } } @media screen and (max-width: 640px) { .CollectionInner{ margin:0; } } @media screen and (max-width: 640px) { .ProductItem__Title, .ProductItem__Vendor { margin-bottom: 0; } } /* Don't think this is used but leave in while test #section-collection-footer .Button { color: #363636; border-color: #ffffff; } #section-collection-footer .Button--primary::before { background-color: #fff; } @media (-moz-touch-enabled: 0), (hover: hover) { #section-collection-footer .Button--primary:hover { color: #fff; background-color: transparent; } } */ /* ========================================================================== FINISH OPTION PAGES - TO MAKE THEM LOOK MORE LIKE COLLECTION PAGES ========================================================================== */ .Article__Content, .SectionHeader__Description { max-width: calc(50rem + 10vw); } @media screen and (max-width: 1139px) { .Article__Content, .SectionHeader__Description { /*max-width: 80vw;*/ margin:auto; } } @media screen and (min-width: 1140px) { .SectionHeader__Description { /*max-width: 45vw;*/ margin:auto; } .Article__Content { /*max-width: 50vw;*/ margin:auto; } } /* ========================================================================== GENERAL PAGE TEMPLATE - TRADE AND ORDER SAMPLES - IMAGE AT BOTTOM NOT TOP alSO PRODUCT CARE PAGE WHICH HAS VIDEO AT BOTTOM INSTEAD OF IMAGE ========================================================================== */ .page-trade .Article__Header, .page-order-samples .Article__Header, .page-product-care .Article__Header{ margin: var(--main-heading-spacing-top) auto 0; } .page-product-care .Article__Body { margin-top: 0; } .page-order-samples.Product__FeatureImageWrapper { margin-top: 0; } .page-order-samples .Article__Body{ margin: var(--page-intro-spacing-top) auto var(--page-intro-spacing-bottom)!important; } .page-trade .Article__Body { margin-top: 0!important; margin-bottom:0!important; } .page-product-care .Article__Content.intro .Article__Body { margin: var(--page-intro-spacing-top) auto var(--page-intro-spacing-bottom)!important; } .page-product-care .Article__Body { margin: var(--page-intro-spacing-bottom)!important; } .custom-form{ margin-top: 12vw; } .custom-form .Rte .Form{ margin-top: 6vw; margin-bottom: 15vw; } @media screen and (min-width: 640px) and (max-width: 1139px) { .page-product-care .Article__Body { margin-top: 0; margin-bottom:4vw; } .custom-form{ margin-top: 8vw; } .custom-form .SectionHeader__Heading::before { width: 10vw; } .custom-form .Rte .Form{ margin-top: 4vw; margin-bottom: 10vw; } } @media screen and (min-width: 1140px) { .custom-form{ margin-top: 2vw; } .custom-form .SectionHeader__Heading::before { width: 5vw; } .custom-form .Rte .Form{ margin-top: 1.5vw; margin-bottom: 5vw; } } /* ========================================================================== BLOG LANDING PAGE ========================================================================== */ .ArticleListWrapper { max-width: none; margin-bottom:0; } .Blog__TagList { padding: 0; margin:0; } .SectionHeader .HorizontalList__Item a{ font-family: var(--text-font-family); font-weight: var(--text-font-weight); font-style: var(--text-font-style); font-size: 100%; text-transform: none; letter-spacing: 0; line-height:1.4; } .ArticleItem.Featured .ArticleItem__Content, .ArticleItem__Content { margin: 0; text-align: center; padding:0 5vw; } .ArticleItem.Featured .ArticleItem__Excerpt{ margin:1rem 0 0; } @media screen and (min-width: 640px) { .ArticleItem.Featured .ArticleItem__Excerpt{ margin:1rem 0 0.8rem; } } .ArticleItem__ImageWrapper{ position: relative; } .ArticleItem__Image { width: 100%; } .ArticleItem__ImageWrapper .Image--lazyLoaded.Image--fadeIn { transition: filter 0.3s cubic-bezier(0.4, 0, 0.22, 1); } .ArticleItem__ImageWrapper .Image--lazyLoaded.Image--fadeIn:hover { filter: brightness(0.85); transition: filter 0.3s cubic-bezier(0.4, 0, 0.22, 1); } .ArticleItem__Category.Heading{ font-family: var(--text-font-family); font-weight: var(--text-font-weight); font-style: var(--text-font-style); font-size:70%; } .template-blog .ArticleItem__Title.Heading.u-h2{ padding:0; } .ArticleItem__Excerpt{ margin-bottom:0; } .Pagination { margin: 0; } @media screen and (max-width: 640px) { .template-blog .SectionHeader__Heading.Heading.rb--heading.u-h1{ margin-bottom:0.5rem!important; } } @media screen and (max-width: 1139px) { .ArticleItem__Content.Grid__Cell{ margin-bottom:0; } .ArticleList.Grid.Grid--m{ margin:0; padding:0; } } @media screen and (min-width: 1140px) { .template-blog .SectionHeader__Heading.Heading.rb--heading.u-h1{ margin-bottom:0.2rem!important; } .ArticleItem.Featured .ArticleItem__Content, .ArticleItem__Content { text-align: left; padding:0; } .Pagination { margin: 5vw 0 5vw; } } /* ========================================================================== DESIGN PROJECTS PAGE ========================================================================== */ @media screen and (min-width: 1140px) { .shopify-seciton--design-projects .ArticleItem__Title.Heading.u-h2{ text-align:center!important; } } /* ========================================================================== BLOG LANDING PAGE - LATEST / FEATURED ARTICLE ON BLOG TEMPLATE ========================================================================== */ .ArticleItem.Featured { text-align: center; } .ArticleItem.Featured .ArticleItem__Category{ margin-top:-.2vw; } .ArticleItem.Featured .ArticleItem__ImageWrapper .overflow-hidden { overflow: hidden; } .ArticleItem.Featured .ArticleItem__ImageWrapper{ display: inline-block; overflow: hidden; } /* ========================================================================== HACK TO ADD ELLIPSES TO MULTIPL LINES OF TRUNCATED TEXT ========================================================================== */ .mobile-line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .mobile-line-clamp-3.desk-line-clamp-2 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 3; } .mobile-line-clamp-3.desk-line-clamp-5 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } @media screen and (min-width: 1140px){ .mobile-line-clamp-3.desk-line-clamp-2 { -webkit-line-clamp: 2; } .mobile-line-clamp-3.desk-line-clamp-5 { -webkit-line-clamp: 5; } } /* ========================================================================== BLOG ARTICLE TEMPLATE ========================================================================== */ .template-article .SectionHeader__Heading.SectionHeader__Heading, .template-article .SectionHeader__SubHeading.SectionHeader__SubHeading { margin-top: 0; } .template-search .ArticleListWrapper, .Article__Wrapper { padding: 0 6vw 0 6vw; max-width: none; text-align: center; padding-bottom:0; overflow: hidden; margin-bottom:0; } .article__Image { text-align: center; position: relative; margin:auto; } .template-article .product-recommendations{ margin-top:0; } @media screen and (max-width: 1139px) { .Article__secondaryimage__Wrapper{ padding: 0 0; } } @media screen and (min-width: 1140px) { .Article__secondaryimage__Wrapper{ margin-bottom: calc(1rem + 6vw); } .template-article .product-recommendations{ margin-top:0; } } /* ========================================================================== BLOG ARTICLE NAV - DESKTOP ========================================================================== */ .ArticleToolbar { padding-left: 2vw; padding-right: 2vw; } .ArticleToolbar .Heading.rb--heading.u-h7{ margin-bottom:0.1vw!important; } /* ========================================================================== BLOG ARTICLE NAV - MOBILE ONLY ========================================================================== */ .ArticleToolbar-bottom { position: static; width: 100%; padding: 5vw 6vw 5vw; color: var(--secondary-elements-text-color); z-index: 2; background:var(--secondary-elements-background); overflow: hidden; } @media screen and (min-width: 680px){ .ArticleToolbar-bottom { display: none; } } .ArticleToolbar-bottom .ArticleToolbar__Nav{ margin-left:0; display: block; } .ArticleToolbar-bottom .ArticleToolbar__NavItemSeparator{ display: none; } .ArticleToolbar-bottom .ArticleToolbar__NavItem--prev{ float:right; display: flex; align-items: center; color: var(--secondary-elements-text-color-light); opacity:1; } .ArticleToolbar-bottom .ArticleToolbar__NavItem--next{ float:left; display: flex; align-items: center; color: var(--secondary-elements-text-color-light); opacity:1; } .ArticleToolbar-bottom .ArticleToolbar__NavItem--prev svg { margin: 0 0 0 1vw; } .ArticleToolbar-bottom .ArticleToolbar__NavItem--next svg { margin: 0 1vw 0 0; } .ArticleToolbar-bottom .ArticleToolbar .Link:hover { color: var(--secondary-elements-text-color); } .ArticleToolbar-bottom .ArticleToolbar__Nav svg { color: var(----text-color); } /* ========================================================================== SECTION SPACING IN PAGES BASED ON AN ARTICLE TEMPLATE - ABOUT, SHOWROOM, STUDIO, CONTACT ETC ========================================================================== */ #shopify-section-page-single-point-and-pitched-roofs .Article__Body, #shopify-section-page-tables-and-islands .Article__Body, #shopify-section-page-stairwells-and-atriums .Article__Body{ margin-bottom:3vw; } .template-article .product-recommendations .SectionHeader__Heading.Heading.rb--heading.u-h2{ padding-top:0; } .Article__Featureimage__Wrapper.Container{ padding:0; } /* @media screen and (max-width: 1139px) { .template-article .Article__secondaryimage__Wrapper.Container{ padding:0 10%; } } @media screen and (min-width: 1140px) { .template-article .Article__secondaryimage__Wrapper.Container{ padding:0 15%; } } */ .Article__Video__Wrapper .Article__Body.topPadding { margin-top: calc(1rem + 6vw); margin-bottom: calc(1rem + 6vw); } @media screen and (min-width: 1140px) { .template-article .Article__secondaryimage__Wrapper.Container{ padding:0 0; max-width:1400px; } } /* ========================================================================== SUBSECTIONS IN ARTICLE TEMPLATE AND PAGES BASED ON IT ========================================================================== */ .SectionHeader:not(:only-child) { margin-bottom: 1.5rem; } .shopify-section--article .subSection, #shopify-section-page-showroom .subSection{ margin-top:calc(3rem + .025vw); margin-bottom:calc(4rem + 3vw); } #shopify-section-page-contact-template .Article__Body, #shopify-section-page-showroom .Article__Body{ margin-top:0; margin-bottom:0; } .template-article .Article__Body, .shopify-section--article .Article__Body{ margin-top:calc(1rem + 5vw); margin-bottom:calc(1rem + 6vw); } #shopify-section-page-contact-template .subSection{ margin-top: calc(3rem + .025vw); margin-bottom: calc(3rem + 2vw); } #shopify-section-page-contact-template .SectionHeader:not(:only-child) { margin-bottom: 1rem; } /* ========================================================================== ARTICLE TEMPLATE AND PAGES BASED ON IT - OTHER ELEMENTS ========================================================================== */ .Article__Header{ text-align: center; } .Article__Meta { margin: 0 auto 1rem; } @media screen and (min-width: 641px) { .Article__Meta { margin:var(--main-heading-spacing-top) auto 0.5rem; } } .Article__MetaItem + .Article__MetaItem::before { display: none; } .Article__MetaItem{ font-family: var(--text-font-family); font-weight: var(--text-font-weight); font-style: var(--text-font-style); } .Article__Title{ margin:auto; } .template-article .product-recommendations .features--heading-large.u-h1{ margin-bottom:10px; } @media screen and (min-width: 1140px) { .ArticleNav .Container--narrow{ max-width: 800px; } } .Article__Video__Wrapper { text-align: center; text-align: center; padding: 0; max-width: 1400px; } .Article__Video__Wrapper .Article__Body{ margin-left:auto; margin-right:auto; margin-top:0; } .article__Image img { margin-bottom:0; width:100%; } @media screen and (min-width: 1140px){ .ArticleItem__Category{ text-align:left; } .Article__Title.Heading.features--heading-large.u-h2{ text-align:left; padding:0; } .template-blog .ArticleItem__Title.Heading.u-h2{ margin-left:0; margin-right:0; text-align:left; } } /* * ---------------------------------------------------------------------------- * PULL QUOTES * ---------------------------------------------------------------------------- */ .Rte blockquote, .Rte blockquote.big-quote{ text-transform: none; font-family: var(--heading-font-family); font-weight: var(--heading-font-weight); font-style:italic; border:0; letter-spacing: normal; padding:0; margin:0 40px; } .Rte blockquote cite, .Rte blockquote.big-quote cite{ display: block; opacity: .7; color: var(--header-light-text-color); } .ColorSwatch--white { outline: 0; } /* * ---------------------------------------------------------------------------- * NEW PODS AND HOVER EFFECT - GALLERY LIST * THESE ARE THE META COLLECTIONS - E.G PENDANTS, WALL LIGHTS, * WHICH LISTS ALL THE REELEVANT COLLECTIONS * ---------------------------------------------------------------------------- */ .galleryPage .features--heading-large.u-h1 { margin-bottom: 0; } .galleryList--spaced .Grid__Cell .SectionHeader:not(:only-child) { margin-bottom: 0; } .galleryList--spaced .CollectionItem{ text-align: center; } .galleryList--spaced .CollectionItem .SectionHeader__Heading{ text-align: center; padding:24px 0 0; position: relative; display: inline-block; } .galleryList--spaced .CollectionItem__ImageWrapper{ position: relative; } .ProductItem__ImageWrapper .AspectRatio:after, .galleryList--spaced .CollectionItem__ImageWrapper:after{ content: " "; background:black; display: block; position: absolute; top:0; left:0; right:0; bottom:0; opacity:0; transition: all 0.5s cubic-bezier(0.4, 0, 0.22, 1); } .galleryList--spaced .CollectionItem .SectionHeader__Heading{ padding:20px; } .galleryList--spaced .CollectionItem .SectionHeader__Heading:after{ content: ""; background: var(--text-color); display: block; width:0; bottom:-0.5vw; opacity:0; left:auto; right:auto; height:1px; transition: opacity 0.5s ease-out; margin:auto; position: relative; } .ProductItem__ImageWrapper:hover .AspectRatio:after, .galleryList--spaced .CollectionItem:hover .CollectionItem__ImageWrapper:after{ opacity:0.05; } .galleryList--spaced .CollectionItem:hover .SectionHeader__Heading:after{ opacity:1; width:100px; transition: opacity 0.5s ease-in; } .galleryList--spaced .CollectionItem .SectionHeader__Heading{ padding:20px 12px 40px; line-height:1.2; } .galleryList--spaced .PageHeader .SectionHeader__Heading.Heading.u-h1, .galleryList--spaced .PageHeader--withBackground .SectionHeader__Heading { line-height:1.2; } /* * ---------------------------------------------------------------------------- * REDEFINING ALL THE GRIDS USED IN COLLECTION PAGES, * COLLECTION LISTS AND GALLERY PAGES * SO GUTTERS ARE VIEWPORT BASED AND ALL CONSISTENT. * ---------------------------------------------------------------------------- /* MOBILE AND TABLET GRIDS */ @media screen and (max-width: 1139px) { .CollectionList--grid, .OptionsList--grid, .ProductList--grid, .galleryList--spaced{ margin:0 0 0 1vw; padding: 1vw 0 2vw; } .Grid__Cell, .CollectionList--grid .Grid__Cell, .OptionsList--grid .Grid__Cell, .ProductList--grid .Grid__Cell, .ProductList--grid > .Grid__Cell, .galleryList--spaced .Grid__Cell { padding:0 0 0 2vw; margin:0 0 8vw -1.5vw; } .CollectionList--grid .ProductItem, .OptionsList--grid .ProductItem, .ProductList .ProductItem, .galleryList--spaced .CollectionItem { padding: 0; margin:0 0 0 1.5vw; } /* If only one article */ .ArticleList .Grid__Cell, .ArticleList > .Grid__Cell { padding:0; margin:0 0 15vw 0; } /* design projects blog a bit different */ .shopify-seciton--design-projects .ArticleList .Grid__Cell, .shopify-seciton--design-projects .ArticleList > .Grid__Cell { padding:0; margin:0 0 10vw 0; } /* If only one article #section-blog-template-design-projects .ArticleList .Grid__Cell, #section-blog-template-design-projects .ArticleList > .Grid__Cell { padding:0; margin:0 0 5vw 0; } */ .ArticleItem.Featured { margin-left: 0; } .ArticleItem__ImageWrapper, .ArticleItem.Featured .ArticleItem__ImageWrapper{ margin: 0 0 5vw; } /* a bit different if there is one item full width */ .\31 \/1--phone .CollectionItem { padding: 0; margin: 0 4vw; } .galleryList--spaced .\31 \/1--phone .CollectionItem .SectionHeader__Heading::after { bottom: -2vw; } .galleryList--spaced .CollectionItem .SectionHeader__Heading.Heading.rb--heading.u-h2{ padding:2vw 1.5vw 0; margin:0; line-height:1.2; } .SectionHeader__Description{ margin-bottom:40px; } .mobile-align-center{ text-align: center; } } /* TABLET ONLY */ @media screen and (min-width: 641px) and (max-width: 1139px) { /* tablet and desktop alignment if under 4 items */ .desk-align-center{ text-align: center; } .CollectionList--grid[data-tablet-count="3"], .ProductList--grid[data-tablet-count="3"]{ margin-left: 2.9vw; } .ArticleList.Grid.Grid--m { margin-left:-2vw; } .ArticleList .Grid__Cell, .ArticleList > .Grid__Cell { padding:0 0 0 2vw; margin:0 0 8vw 0; } /* design projects blog a bit different */ .shopify-seciton--design-projects .ArticleList .Grid__Cell, .shopify-seciton--design-projects .ArticleList > .Grid__Cell { padding:0 0 0 2vw; margin:0 0 6vw 0; } .ArticleItem.Featured .Grid__Cell { padding:0 0 0; } .ArticleItem__ImageWrapper, .ArticleItem.Featured .ArticleItem__ImageWrapper{ margin: 0 0 3vw; } } /* ========================================================================== OVERRIDE DESKTOP GRIDS USED THROUGHOUT THE SITE ========================================================================== */ @media screen and (min-width: 1140px) { .galleryList--spaced{ margin:0; padding:0; } /* tablet and desktop alignment if under 4 items */ .desk-align-center{ text-align: center; } .\31 \/2--tablet-and-up .CollectionItem { padding: 0; margin:0; } .Grid--m{ margin-left: -2vw; } .Grid--m > .Grid__Cell { padding-left: 2vw; } .CollectionList--grid, .OptionsList--grid, .ProductList--grid, .galleryList--spaced{ margin:0 0 0 -2vw; padding: 0vw 2vw; } .Grid__Cell, .CollectionList--grid .Grid__Cell, .OptionsList--grid .Grid__Cell, .ProductList--grid .Grid__Cell, .ProductList--grid > .Grid__Cell, .galleryList--spaced .Grid__Cell { padding:0 0 0 2vw; margin:0 0 3vw 0!important; } .ArticleItem.Featured .Grid__Cell { padding-left:2vw; } .galleryList--spaced .CollectionItem .SectionHeader__Heading.Heading.rb--heading.u-h2{ padding:1vw 4vw 1vw; margin:0; line-height:1.2; } .CollectionList--grid[data-desktop-count="3"] > .Grid__Cell, .CollectionList--grid[data-desktop-count="4"] > .Grid__Cell, .ProductList--grid[data-desktop-count="3"] > .Grid__Cell, .ProductList--grid[data-desktop-count="4"] > .Grid__Cell { padding-left: 2vw; margin-bottom: 2vw; } .CollectionList--grid[data-desktop-count="3"], .CollectionList--grid[data-desktop-count="4"], .ProductList--grid[data-desktop-count="3"], .ProductList--grid[data-desktop-count="4"] { margin-left: -2vw; } .Grid--xl { margin-left: -2vw; } .Grid--xl > .Grid__Cell { padding-left: 2vw; } } /* * ---------------------------------------------------------------------------- * BESPOKE PAGES * ---------------------------------------------------------------------------- */ .shopify-section--darker{ background:#f0f0f0; } /* product recommendations and forms are sometimes in a darker strip on these pages so have to redefine form elements */ .shopify-section--darker .Select--primary select { width: 100%; height: 45px; padding-left: 10px; padding-right: 28px; border: 1px solid var(--border-color); background:transparent; } .shopify-section--darker .Select--primary::after { content: ""; position: absolute; right: 1px; top: 1px; height: calc(100% - 2px); width: 55px; background: transparent; pointer-events: none; } .shopify-section--darker .Form__Input:not(:placeholder-shown) ~ .Form__FloatingLabel, .shopify-section--darker .Form__Textarea:not(:placeholder-shown) ~ .Form__FloatingLabel{ background: #f0f0f0; } .BespokeCarousel .image-caption { margin: 0 auto; text-align: center; position: absolute; bottom: 3vw; width: 100%; } /* Bepoke pages image carousels */ @media screen and (min-width: 641px) { .BespokeCarousel .image-caption { bottom: 0; } } @media screen and (min-width: 1140px) { .BespokeCarousel .image-caption { bottom: 0; } } .BespokeCarousel .ShopTheLook__Inner { padding-bottom: 2.5rem; } /* * ---------------------------------------------------------------------------- * BLACK LINES UNDER SELECTED SUBHEADERS * ---------------------------------------------------------------------------- */ .custom-form .SectionHeader__Heading:after, .quoteform-section .SectionHeader__Heading:after, .related-products-section .SectionHeader:after, .product-recommendations .SectionHeader:after, .shopify-section--secondary .SectionHeader:after, .shopify-section--article .SectionHeader:after{ background: var(--text-color); display: block; position: relative; width:20vw; height:1px; content: " "; margin:1rem auto 0; } @media screen and (min-width: 641px) { .custom-form .SectionHeader__Heading:after, .quoteform-section .SectionHeader__Heading:after, .related-products-section .SectionHeader:after, .product-recommendations .SectionHeader:after, .shopify-section--secondary .SectionHeader:after, .shopify-section--article .SectionHeader:after{ width:10vw; } } @media screen and (min-width: 1140px) { .custom-form .SectionHeader__Heading:after, .quoteform-section .SectionHeader__Heading:after, .related-products-section .SectionHeader:after, .product-recommendations .SectionHeader:after, .shopify-section--secondary .SectionHeader:after, .shopify-section--article .SectionHeader:after{ width:5vw; } } /* .Article__Featureimage__Wrapper.Container, .Article__secondaryimage__Wrapper.Container{ padding:0; } @media screen and (min-width: 1140px) { .Article__Featureimage__Wrapper.Container{ padding:0 60px; } } */ .shopify-section--article .Aspect--square{ max-width:80%; } @media screen and (min-width: 1140px) { .shopify-section--article .Aspect--square{ max-width:55%; } } @media screen and (min-width: 1140px) { .CollectionItem.quarter { min-width: 33%; } .CollectionItem.third { min-width: 50%; } .CollectionItem.half { min-width: 50%; } } @media screen and (min-width: 1600px) { .CollectionItem.quarter { min-width: 25%; } .CollectionItem.third { min-width: 33.33333%; } .CollectionItem.half { min-width: 50%; } .CollectionItem__Wrapper--small{ height: 21.7vw; } .CollectionItem__Wrapper--normal{ height: 29.8vw; } .CollectionItem__Wrapper--large{ height: 47.5vw; } } .CollectionItem__Content{ bottom: auto; top: auto; left: auto; transform: none; position: relative; text-align: center; margin-top: 20px; } /* @media screen and (min-width: 1140px) { .CollectionItem.third { min-width: 33.33333%; } .CollectionItem.quarter { min-width: 25%; } .CollectionItem__Wrapper { height: 600px; } } */ /* * ---------------------------------------------------------------------------- * NEW PAGE HEADER IS AT A SET HEIGHT * ---------------------------------------------------------------------------- */ .u-h1 { font-size: 30px; line-height:1.2; margin-bottom: 20px; } @media screen and (max-width: 640px) { .u-h1 { font-size:25px; } } /* * ---------------------------------------------------------------------------- * FAQ PAGE * ---------------------------------------------------------------------------- */ .Faq__Section.Heading.rb--heading.u-h2 { text-align: center; padding:0 0 0; margin:10vw 0 5vw; } @media screen and (min-width: 641px) { .Faq__Section.Heading.rb--heading.u-h2 { text-align: left; padding:0 0 0; margin:5vw 0 2vw; } } @media screen and (min-width: 1140px) { .Faq__Section.Heading.rb--heading.u-h2 { text-align: left; padding:0 0 0; margin:2vw 0 1vw; } } .Faq__Section.Heading.rb--heading.u-h2:first-child { margin-top:0; } /* * ---------------------------------------------------------------------------- * POLICY PAGES * ---------------------------------------------------------------------------- */ .shopify-policy__container { margin:0 auto 5vw; max-width: 1000px; padding:0 6vw; } @media screen and (min-width: 1140px) { .shopify-policy__container { max-width: 50vw; } } .shopify-policy__container h2{ margin:4rem auto 2rem; } .shopify-policy__container h3{ margin:2rem 0 1rem; font-weight: 400; opacity:0.45; text-transform: uppercase; } .shopify-policy__container strong{ font-weight: 400; color: #be7d73; } .shopify-policy__container a{ text-decoration: underline; } .shopify-policy__container ol, .shopify-policy__container ul { margin: 0 25px 1rem; padding: 0; list-style-position: outside; } .shopify-policy__container ol li, .shopify-policy__container ul li { margin-left:20px; padding-left:20px; } a[href^="tel:"] { text-decoration: none!important; } /* * ---------------------------------------------------------------------------- * CUSTOMER PAGES * ---------------------------------------------------------------------------- */ @media screen and (max-width: 500px) { .Customer-Login .Form__ItemHelp { position: static; right: auto; top: auto; transform: none; text-align: center; margin: 1rem auto 0; width: 100%; } } .Customer-Register, .Customer-Login{ display: flex; flex-direction: column; justify-content: space-between; padding: 0 calc(1rem + 0.05vw); width: 100%; min-height: none; background-size: cover; background-position: center top; } .Customer-Register .Form__Title.Heading.u-h1, .Customer-Login .Form__Title.Heading.u-h1{ margin-bottom:0; } .template-customers .PageContent--extraNarrow { width:auto; max-width: 500px; } .Shopify-section--register #create_customer, .Shopify-section--login #recover_customer_password, .Shopify-section--login #customer_login{ padding: calc(1rem + 1vw); background:var(--background); } .Shopify-section--register .Form__Alert, .Shopify-section--login .Form__Alert{ text-align: center; } .Shopify-section--login #customer_login{ padding: calc(1rem + 1vw); } .template-customers .SectionHeader__Description { text-align: center; } .template-customers .u-h7{ font-family: var(--text-font-family); font-weight: var(--text-font-weight); font-style: var(--text-font-style); font-size: calc(.8rem + .025vw); letter-spacing: calc(.1rem + .025vw); } /* * ---------------------------------------------------------------------------- * PASSWORD PAGE * ---------------------------------------------------------------------------- */ .Password{ display: flex; flex-direction: column; justify-content: space-between; padding: calc(1rem + 1vw); width: 100%; min-height: none; background-size: cover; background-position: center top; } .Password .Form__Title.Heading.u-h1{ margin-bottom:0; } .Password__Content{ width:auto; max-width: 500px; } .Password .Header__LogoImage { margin: .25vw auto; } .Password .contact_section{ margin:1.5rem auto 1.8rem; } .Password hr{ border: 0; margin: 1rem; border-bottom:1px solid var(--header-heading-color); } .Password .Password__Message { margin-top: 1.4rem; } .Password .contact_section .Heading{ margin:0; font-size: 150%; } .Password .newsletter-section{ padding-bottom:20px; } .Password__Card{ padding:30px 40px 20px; background:var(--background); } .Password .Button { min-width: auto; } .Password__Header .Heading, .Password__Footer .Heading{ font-family: var(--text-font-family); font-weight: var(--text-font-weight); font-style: var(--text-font-style); font-size: calc(.7rem + .025vw); letter-spacing: calc(.1rem + .025vw); } /* * ---------------------------------------------------------------------------- * CUSTOMER PAGES * ---------------------------------------------------------------------------- */ .page-404{ display: flex; flex-direction: column; justify-content: space-between; padding: 0; width: 100%; min-height: none; background-size: cover; background-position: center top; } .page-404 .PageContent--extraNarrow { width:auto; max-width: 500px; } .page-404 .Heading.u-h1{ font-size: calc(1.4rem + .5vw); line-height: 1.2; padding: 0 calc(1rem + .025vw); letter-spacing: calc(.01rem + .025vw); margin-bottom: var(--main-heading-spacing-bottom); text-transform: uppercase; text-align: center; margin-bottom:0!important; } .page-404 .EmptyState{ width:auto; max-width: 500px; padding: calc(1rem + 1vw); background:var(--background); margin:auto; } .page-404 .EmptyState__Description{ margin:0 auto; } /* * ---------------------------------------------------------------------------- * CART * ---------------------------------------------------------------------------- */ .template-cart .PageHeader, .template-cart .SectionHeader__Heading.Heading.u-h1{ margin-bottom:0; } .template-cart .continue-shopping{ text-align: center; margin-top:2vw; border-top: 1px solid rgba(var(--text-color-light-rgb),.2); border-bottom: 1px solid rgba(var(--text-color-light-rgb),.2); } .template-cart .continue-shopping a{ font-family: var(--text-font-family); font-weight: var(--text-font-weight); font-style: var(--text-font-style); font-size: .6vw; letter-spacing: .1vw; text-transform: uppercase; color: var(--text-color-light); display: inline-block; padding:0; transition: color 0.2s cubic-bezier(.25, .46, .45, .94); } .template-cart .continue-shopping a:hover{ color:var(--heading-color); transition: color 0.2s cubic-bezier(.25, .46, .45, .94); } @media screen and (max-width: 1039px) { .template-cart .continue-shopping{ padding:2vw!important; margin-top:4vw!important; } } .template-cart .clear-cart{ text-align: center; font-family: var(--text-font-family); font-weight: var(--text-font-weight); font-style: var(--text-font-style); font-size: calc(.6rem + .025vw); letter-spacing: calc(.1rem + .025vw); text-transform: uppercase; color: var(--text-color-light); margin:calc(3rem + .025vw) 0; opacity:0.4; } .template-cart .dpo_cart_edit_container{ display: none; } .CartItem__Remove, .CartItem__Meta.Heading{ text-transform: none; letter-spacing: normal; line-height:1.3; font-family: var(--text-font-family); font-size: calc(.8rem + .025vw); letter-spacing: normal; } @media screen and (min-width:640px) { .Cart--expanded .CartItem__Info { max-width:400px; width:400px; } } @media screen and (min-width:1140px) { .Cart--expanded .CartItem__Info { max-width:500px; width:500px } } .CartItem__Title.Heading{ font-size: calc(.9rem + .025vw); letter-spacing: calc(.01rem + .025vw); margin: calc(-.01rem + .025vw) 0 calc(.3rem + .1vw); font-weight: 700; white-space: normal; overflow: hidden; text-overflow: ellipsis; line-height:1.1; } .Cart__HeadItem.Heading.u-h7{ font-family: var(--text-font-family); letter-spacing: calc(.1rem + .025vw); font-size: calc(.8rem + .025vw); letter-spacing: calc(.1rem + .025vw); } .CartItem__PropertyList{ font-style:normal; } .Cart__Total span, .CartItem__Price.Price{ letter-spacing: calc(0.01rem + 0.1vw); font-family: var(--text-font-family); } .Cart__Total span{ margin-left:10px; } .CartItem__Variant{ margin-bottom:0; line-height:1.3; } .Cart__HeadItem.Heading.Text--subdued.u-h7{ color:var(--heading-color); opacity:1; } /* .CartItem__ImageWrapper, .CartItem__Info{ vertical-align:top; } */ .CartItem { display: table; table-layout: fixed; margin: 30px 0 40px; width: 100%; } /* ========================================================================== MAKE ALL THE BIG TITLES THE SAME SIZE ========================================================================== @media screen and (max-width: 640px) { .features--heading-small .Rte h1, .features--heading-small .u-h1, .SectionHeader__Heading.Heading.u-h1, .features--heading-large.u-h1, .rb--heading-u-h1 { font-size:20px; } .features--heading-small .Rte h2, .features--heading-small .u-h2, .ArticleItem.Featured .Article__Title.Heading.features--heading-large.u-h1, .rb--heading-u-h2{ letter-spacing: 0.1rem; line-height: 1.3; font-size: 18px; } } */ /* * ---------------------------------------------------------------------------- * SEARCH RESULTS * ---------------------------------------------------------------------------- */ .Search__Inner { padding: 28px 2vw; } @media screen and (min-width:641px) { .Search__Results .PageLayout__Section--secondary { flex-basis: 400px; max-width: 400px; } } .Search__Results .Link Link--secondary{ text-transform:uppercase; } /* * ---------------------------------------------------------------------------- * SEARCH BAR * ---------------------------------------------------------------------------- */ .Search__Inner{ padding: calc(1rem + .3vw) 5.5vw calc(1rem + .3vw); } @media screen and (min-width:1140px) { .Search__Inner{ padding:calc(.5rem + 1vw) 2vw calc(.5rem + 1vw); } } .Search__Inner .Search__Input{ font-size: calc(.9rem + .025vw); letter-spacing: calc(.01rem + .025vw); font-weight: 700; white-space: normal; overflow: hidden; text-overflow: ellipsis; line-height:1.1; } .Search__Input.Heading{ margin-top:calc(10px + 0.01vw)!important; } .logo__image--small { max-height: 2.8571428571em; max-width: 450px!important; margin-bottom: 1.5vw; } /* ========================================================================== REMOVE BLUE TAP AREAS ON ANDROID AND BORDERS ON FORM ELEMENT FOCUS ========================================================================== */ .Drawer__Close, .Header__Icon, .ColorSwatchList .HorizontalList__Item, .Collapsible__Button, a{ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; outline: none!important; } a:active, a:focus { outline: 0; border: none; -moz-outline-style: none; } textarea:focus, input:focus{ outline: none; } /* * ---------------------------------------------------------------------------- * DEBUGGING STYLES - TO QUICKLY SEE WHAT'S WHAT IN TERMS OF HEADINGS * ---------------------------------------------------------------------------- */ .features--heading-small .Rte h1, .features--heading-small .u-h1, .SectionHeader__Heading.Heading.rb--heading.u-h2, .CollectionItem .SectionHeader__Heading.Heading.u-h2, .features--heading-small .Rte h2, .features--heading-small .u-h2, .shopify-policy__container h1, .shopify-policy__container h2, .\31 \/4--desk .rb--heading.u-h2, .\31 \/4--desk .SectionHeader__Heading.Heading.rb--heading.u-h2, .ProductItem__Title.Heading.rb--heading, .SectionHeader__Heading.Heading.u-h1, .features--heading-large.u-h1, .features--heading-large.u-h2, .features--heading-large.Heading.u-h1, .rb--heading.u-h1, .features--heading-large.rb--heading.u-h2, .rb--heading.u-h2, .rb--heading.u-h6, .rb--heading.u-h3{ outline:0!important; } @media screen and (min-width: 1140px) { .ArticleNav .Container--narrow{ max-width: 800px; } } /* * ---------------------------------------------------------------------------- * HIDE THEME [REVIEW BAR WHILE IN STORE DEVELOPMENT - TAKE OUT ONCE LIVE * ---------------------------------------------------------------------------- */ #admin-bar-iframe, #preview-bar-iframe { display: none !important; } /* * ---------------------------------------------------------------------------- * TYPOGRAPHY - WOULDN'T USUALLY DO IT LIKE THIS, BUT BECAUSE WE ARE * CHANGING THE THEME SO MUCH, IT'S BETTER IF WE CHANGE ALL THE INSTANCES IN GROUPS. * ---------------------------------------------------------------------------- */ html, body{ font-size: var(--bodyfont-size); } .AnnouncementBar__Content.Heading, .Button, .template-cart .continue-shopping a, .spr-button-primary:not(input), .Collapsible__Button.Heading.u-h6{ font-family: var(--text-font-family); font-weight: var(--text-font-weight); font-style: var(--text-font-style); } /* Main uppercase large headings */ .shopify-policy__container h1, .SectionHeader__Heading.Heading.u-h1, .SectionHeader__Heading.Heading.rb--heading.u-h2, .features--heading-small .Rte h1, .features--heading-small .u-h1, .features--heading-large.u-h1, .features--heading-large.u-h2, .rb--heading.u-h1, #shopify-section-page-studio .SectionHeader__Heading.Heading.rb--heading.u-h2 { font-size: calc(1.4rem + 0.5vw); line-height:1.2; padding:0 calc(1rem + 0.025vw); letter-spacing: calc(0.01rem + 0.025vw); margin-bottom: var(--main-heading-spacing-bottom); text-transform: uppercase; text-align: center; outline:1px solid blue; } /* Main uppercase large headings on homepage */ .template-index .SectionHeader__Heading--emphasize.Heading.rb--heading.u-h1, .template-index .SectionHeader__Heading.Heading.rb-heading.u-h2{ font-size: calc(1.4rem + 0.5vw)!important; line-height:1.2; padding:0 calc(1rem + 0.025vw); letter-spacing: calc(0.01rem + 0.025vw); margin-bottom: var(--main-heading-spacing); text-transform: uppercase; text-align: center; outline:1px solid blue; } /* Main headings on product pages are smaller */ .template-product .SectionHeader__Heading.Heading.rb--heading.u-h2, .template-product .Product__InfoWrapper .rb--heading.u-h1 { font-size: calc(1.4rem + 0.2vw); letter-spacing: calc(0.01rem + 0.025vw); line-height:1.2; margin-bottom: 20px; padding:0 calc(1rem + 0.025vw); text-transform: uppercase; text-align: center; outline:1px solid red; } .template-product .Product__InfoWrapper .rb--heading.u-h1 { margin-bottom:0; } /* Second level headings, like product heading above */ .shopify-policy__container h2, .SectionHeader__Heading.Heading.rb--heading.u-h2, .CollectionItem .SectionHeader__Heading.Heading.u-h2, .features--heading-large.rb--heading.u-h2, .features--heading-small .Rte h2, .features--heading-small .u-h2, .rb--heading-u-h2 { font-family: var(--heading-font-family); font-weight: var(--heading-font-weight); font-style: var(--heading-font-style); font-size: calc(1.2rem + 0.2vw); letter-spacing: calc(0.005rem + 0.025vw); line-height:1.2; text-align: center; text-transform: uppercase; padding:0 4vw 0px; outline:1px solid green; } .template-index .features--heading-small .Rte h3, .features--heading-small .u-h3{ font-size: calc(1rem + .2vw); letter-spacing: calc(0.01rem + 0.025vw); margin:0.5rem auto; line-height:1.2; } @media screen and (min-width: 641px) { /* Second level headings in article style pages are a bit bigger */ .ArticleItem.Featured .Article__Title.Heading.features--heading-large.rb--heading.u-h2, .shopify-section--article .SectionHeader__Heading.Heading.features--heading-large.rb--heading.u-h2 { font-size: calc(1.75rem + .2vw); } /* Headings in blog landing page are a bit smaller */ .template-blog .ArticleItem__Title{ font-size: calc(1rem + 0.3vw); line-height: 1.3; } } /* Body copy bigger in article type pages */ @media screen and (min-width: 641px) { .template-blog .Article__Body, .template-blog .ArticleItem.Featured .ArticleItem__Excerpt, .shopify-section--article .Article__Body, .template-article .Article__Body { font-size: calc(1.2rem + 0.3vw); } } /* Smaller size in design projects blog */ @media screen and (min-width: 641px) { .shopify-seciton--design-projects .Article__Content .Article__Body{ font-size: font-size: var(--bodyfont-size); } } .Article__Meta.Heading.Text--subdued.rb--heading.u-h6, .ArticleToolbar .Heading.rb--heading.u-h7, .ArticleToolbar .Heading.rb--heading.u-h8{ font-family: var(--text-font-family); font-weight: var(--text-font-weight); font-style: var(--text-font-style); font-weight: normal!important; } /* Image and video captions in smaller grey text */ .Article__Video__Wrapper .image-caption, .productgallery-image-caption, .image-caption { margin: calc(1rem + 0.025vw) 0; margin-bottom: 0.8vw; text-align: center; font-size: calc(0.8rem + 0.2vw); line-height: 1.3; } @media screen and (min-width: 641px) { .Article__Video__Wrapper .image-caption, .productgallery-image-caption, .image-caption { text-align: left; } } .Header__MainNav .Heading.rb--heading.u-h6, .Header__SecondaryNav .Heading.rb--heading.Link.Link--primary.u-h5, .Header__SecondaryNav .Heading.rb--heading.u-h6, .Header__SecondaryNav .features--heading-small .Rte h5, .ArticleToolbar .Heading.rb--heading.u-h7, .ArticleToolbar .Heading.rb--heading.u-h8, .Footer__Title.Heading.rb--heading.u-h5, .MegaMenu__PushHeading.Heading.u-h6, .MegaMenu__Title.Heading.u-h5, .Search__Input.Heading, .Search__Results .Heading.Link.Link--secondary.u-h7, .Search__Results .Heading.Text--subdued.u-h7, .Footer__StoreName.Footer__StoreName.Heading.u-h5.Link--secondary { font-size: calc(0.9rem + 0.025vw); letter-spacing: calc(0.01rem + 0.025vw); margin-bottom: calc(0.5rem + 0.025vw); font-weight: 700; } .SidebarMenu__Nav .Collapsible__Button.Heading.u-h6{ font-family: var(--heading-font-family); font-weight: var(--heading-font-weight); font-style: var(--heading-font-style); font-size: calc(0.9rem + 0.025vw); letter-spacing: calc(0.01rem + 0.025vw); } .SidebarMenu__Nav .Collapsible__Button.Heading.u-h7{ font-family: var(--heading-font-family); font-weight: var(--heading-font-weight); font-style: var(--heading-font-style); font-size: calc(0.9rem + 0.025vw); letter-spacing: calc(0.01rem + 0.025vw); opacity:1; } .AnnouncementBar__Content.Heading, .Button, .template-cart .continue-shopping a, .spr-button-primary:not(input), .Collapsible__Button.Heading.u-h6{ font-family: var(--text-font-family); font-weight: var(--text-font-weight); font-style: var(--text-font-style); font-size: calc(0.8rem + 0.025vw); letter-spacing: calc(0.1rem + 0.025vw); } .Linklist__Item{ margin-bottom:calc(0.5rem + 0.025vw); } .\31 \/2--phone .SectionHeader__Heading.Heading.rb--heading.u-h2, .\31 \/2--phone .rb--heading.u-h2, .galleryList--spaced .\31 \/2--phone .CollectionItem .SectionHeader__Heading.Heading.rb--heading.u-h2 { font-size: calc(0.9rem + 0.3vw)!important; padding:calc(.75rem + 0.03vw) calc(1rem + 0.025vw); } .ProductItem__Info .ProductItem__Title.Heading.rb--heading{ text-transform: none; font-size: calc(0.9rem + 0.2vw); letter-spacing:normal; line-height:1.2; padding:0 calc(1rem + 0.025vw); } /* items that need to be reset the same as the bodycopy */ .ProductItem__Info .rb--heading.u-h6{ font-size: calc(1rem + 0.025vw); } .ArticleItem__Title.Heading.rb--heading.u-h2{ } /* * ---------------------------------------------------------------------------- * GLOBAL TYPOGRAPHY - MOBILE * ---------------------------------------------------------------------------- */ .template-cart #itoris_dynamicproductoptions_popup, .template-cart .itoris_dynamicproductoptions_popup { position: absolute; top: 75px; left: 50%; z-index: 3001; overflow: hidden; background-color: #ffffff; border: 0; border-radius: 3px; text-align: left; max-width: 95%; min-width: 600px!important; height:600px; transition:none!important; } .template-cart #itoris_dynamicproductoptions_popup .popup-title{ display: none; } .template-cart #itoris_dynamicproductoptions_popup_button_cancel, .template-cart #itoris_dynamicproductoptions_popup_button_cancel span, .template-cart #itoris_dynamicproductoptions_popup_button_apply, .template-cart #itoris_dynamicproductoptions_popup_button_apply span, .template-cart button.itoris_dynamicproductoptions_popup_button_cancel, .template-cart button.itoris_dynamicproductoptions_popup_button_cancel span, .template-cart button.itoris_dynamicproductoptions_popup_button_apply, .template-cart button.itoris_dynamicproductoptions_popup_button_apply span, .template-cart #itoris_dynamicoptions_add_to_cart, .template-cart #itoris_dynamicoptions_add_to_cart span, .template-cart .itoris_dynamicoptions_add_to_cart, .template-cart .itoris_dynamicoptions_add_to_cart span { height: auto; text-transform: none; font-weight: normal; border-radius: 0; position: relative; padding: 0 14px; line-height: normal; border: 1px solid transparent; border-radius: 0; text-transform: uppercase; font-size: calc(var(--base-text-font-size) - (var(--default-text-font-size) - 12px)); text-align: center; letter-spacing: 0.2em; font-family: var(--heading-font-family); font-weight: var(--heading-font-weight); font-style: var(--heading-font-style); background: var(--button-background)!important; } /* * ---------------------------------------------------------------------------- * ITORIS APP OVERRIDES * ---------------------------------------------------------------------------- */ .template-cart #itoris_dynamicproductoptions select, .template-product #itoris_dynamicproductoptions select{ position: relative; width: 100%; text-align: left; padding: 10px 28px 10px 14px; border: 1px solid var(--border-color); cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-radius: 0; background:transparent; background: url(/cdn/shop/files/arrow-down.svg?v=1614957756) no-repeat right 14px center; background-size:10px 30px; appearance: none; -moz-appearance: none; -webkit-appearance: none; } .template-product #itoris_dynamicproductoptions tr.fields td div.field, #itoris_dynamicproductoptions li.fields div.field, .itoris_slider_group .itoris_dynamicproductoptions div.field.fancy-dropdown { margin: 0 0 10px; float: left; } .fancy-dropdown .dpo_dd_list_value { display: inline-block; width: 50%; background: #f8f8f8!important; } #itoris_dynamicproductoptions .fieldset .form-list div.field .dpo_dd_search{ display:none; } #itoris_dynamicproductoptions .fancy-dropdown .dpo_dd_list_inner > tr:first-child { display: none; } #itoris_dynamicproductoptions .fancy-dropdown .dpo_dd_list_value_selected { font-weight: normal; } #itoris_dynamicproductoptions .fancy-dropdown div.dpo_dd_list .dpo_dd_list_preview img{ display: inline-block; max-width: 100%; max-height: none; border-radius: 0; width: 90%; height: auto; margin-bottom:10px; } #itoris_dynamicproductoptions .fancy-dropfown .dpo_dd_list_outer { background: #f8f8f8; box-shadow:none; margin-top: 1px; padding: 10px; border: 1px solid var(--border-color); cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } #itoris_dynamicproductoptions .fancy-dropdown div.dpo_dd_list .dpo_dd_list_label{ padding:0!important; line-height:1.2; } #itoris_dynamicproductoptions .fancy-dropdown select.open-dd { box-shadow: 0px 0px 0px 0px; } #itoris_dynamicproductoptions .fancy-dropdown .dpo_dd_list_outer { background: #f8f8f8; box-shadow: none; padding:19px; margin-top: -1px; } #itoris_dynamicproductoptions ul.form-list { padding: 0px; margin: 0px!important; } #itoris_dynamicproductoptions .form-list.option-fields-cols-1 .field, .itoris_dynamicproductoptions .form-list.option-fields-cols-1 .field { width: 100%!important; } #itoris_dynamicproductoptions tr.fields td div.field, #itoris_dynamicproductoptions li.fields div.field, .itoris_slider_group .itoris_dynamicproductoptions div.field { margin: 0!important; } #itoris_dynamicproductoptions label { margin-top:20px!important; } #itoris_dynamicproductoptions tr.fields td div.field.empty { margin-bottom:0!important; } #itoris_dynamicproductoptions .fancy-dropdown div.dpo_dd_list .dpo_dd_list_preview { width: 50%; height: auto; text-align: left; } #itoris_dynamicproductoptions .fancy-dropdown .dpo_dd_list { max-height: 40vw; } @media screen and (min-width: 641px) { #itoris_dynamicproductoptions .fancy-dropdown .dpo_dd_list { max-height: 30vw; } } @media screen and (min-width: 1140px) { #itoris_dynamicproductoptions .fancy-dropdown .dpo_dd_list { max-height: 17vw; } } @media screen and (min-width: 1600px) { #itoris_dynamicproductoptions .fancy-dropdown .dpo_dd_list { max-height: 10vw; } } #itoris_dynamicproductoptions .dpo_tooltip_icon::after { content: 'i'; display: inline-block; font-size: 14px; line-height: 16px; width: 16px; height: 16px; font-family: "Times New Roman", Times, serif; font-style: italic; font-weight: bold; text-align: center; border-radius: 8px; background: #404040; color: #fff; text-indent: -1px; } #itoris_dynamicproductoptions label.required::after { content: '*'; color: #404040!important; margin-left: 5px; } #itoris_dynamicproductoptions .validation-advice { margin: 5px 0 0; color: #be7d73; font-size: calc(0.7rem + 0.025vw); clear: both; text-transform: uppercase; } /* * ---------------------------------------------------------------------------- * COOKIE BANNER * ---------------------------------------------------------------------------- */ .cc-window{ -webkit-box-shadow: -1px 4px 20px 0px rgba(0,0,0,0.1); -moz-box-shadow: -1px 4px 20px 0px rgba(0,0,0,0.1); box-shadow: -1px 4px 20px 0px rgba(0,0,0,0.1); width:100%!important; z-index: 2147483648!important; padding: 1.5em 1.8em 1.7em!important; } .cc-window .cc-message { color: var(--text-color); font-family: var(--text-font-family); font-size: calc(1rem + 0.025vw); margin-bottom: 0px!important; } @media screen and (min-width: 315px){ .cc-window .cc-message { margin-bottom: 20px!important; } } @media screen and (min-width: 415px){ .cc-window .cc-message { padding-right:20px; margin-bottom: 0!important; } } .cc-window .cc-link{ padding: 0!important; } .cc-btn.cc-dismiss{ color: var(--text-color-light)!important; border: 1px solid rgba(var(--text-color-light-rgb),.2); font-family: var(--text-font-family); font-weight: var(--text-font-weight); font-style: var(--text-font-style); font-size: calc(.8rem + .025vw); letter-spacing: calc(.1rem + .025vw); text-transform: uppercase; transition: opacity .3s ease-in-out; transition: all .25s cubic-bezier(.785, .135, .15, .86); } .cc-btn.cc-dismiss:hover{ background-color: var(--button-background); color:white!important; border: 1px solid var(--button-background); } /* Move reCAPTCHA v3 badge to the left - not needed now as we are hiding it .grecaptcha-badge { width: 70px !important; overflow: hidden !important; transition: all 0.3s ease !important; left: 4px !important; } .grecaptcha-badge:hover { width: 256px !important; } */ /* * ---------------------------------------------------------------------------- * GOOGLE RECAPTCHA - HIDE BADGE AND ADD MANDATORY DISCLAIMER INSTEAD * ---------------------------------------------------------------------------- */ @media screen and (min-width: 641px){ .Footer { padding-bottom: 32px; } } .grecaptcha-badge { visibility: hidden; } .Footer__Copyright .recaptcha-text{ display:block; margin: 10px 50px 0; } @media screen and (min-width: 641px){ .Footer__Copyright .recaptcha-text{ display:block; margin: 0; } } .Footer__Copyright .recaptcha-text a{ text-decoration: underline; } /* * ---------------------------------------------------------------------------- * NEW COUNTRY SELECTOR IN FOOTER - ADDED BY GLOBALIZATION APP * ---------------------------------------------------------------------------- */ @media screen and (max-width: 1139px) { .locale-selectors__content{ padding-bottom: 15px; } } .locale-selectors__container:before{ background:white; content: " "; height: 10px; display: block; } @media screen and (min-width: 1140px) { .locale-selectors__container{ margin-top: -150px; position: absolute; background: transparent!important; } } @media (max-width: 1139px){ .locale-selectors__content { justify-content: center !important; } } @media (min-width: 1140px){ .locale-selectors__content { padding-left: 2vw!important; } } /* * ---------------------------------------------------------------------------- * MOVING THE HUBSPOT MESSAGE WIDGET SLIGHTLY AND MAKING IT LESS BLUE * ---------------------------------------------------------------------------- */ #hubspot-messages-iframe-container.widget-align-right { margin-right: 15px; margin-bottom: 15px; filter: grayscale(0.53); z-index: 1000000000; } /* * ---------------------------------------------------------------------------- * CART TERMS CHECKBOX * ---------------------------------------------------------------------------- */ .Cart__Total{ margin-bottom: 0; } .Cart__Terms{ float: none; text-align: right; clear: both; margin: 20px 0 40px; } .Cart__Terms p{ margin: 0; display: flex; align-items: center; justify-content: right; } .Cart__Terms .checkbox{ float:none; vertical-align: middle; filter: grayscale(1); margin-right: 10px; } .Cart__Terms__Output{ display: block; line-height: 1.2; margin: 5px 0 20px; color: #dd1d1d; opacity: 0.8; font-size: 0.8rem; font-style: italic; } /* * ---------------------------------------------------------------------------- * JUDGEME REVIEWS APP - OVERRIDES * ---------------------------------------------------------------------------- */ .jdgm-rev-widg.jdgm-rev-widg { padding: 5.8vw 16px 0; } .jdgm-glider-track { margin: auto!important; } /* Hide the stars section and the form */ .jdgm-row-stars, .jdgm-row-readmore, .jdgm-widget-actions-wrapper { display: none !important; } .jdgm-star { font-size: 0.9rem; } .jdgm-rev-widg__title { font-size: calc(1.4rem + 0.2vw); letter-spacing: calc(0.01rem + 0.025vw); line-height: 1.2; margin-bottom: 20px!important; padding: 0 calc(1rem + 0.025vw); text-transform: uppercase; text-align: center; font-family: var(--heading-font-family); } .jdgm-carousel-title-and-link{ padding-bottom: 20px!important; } .jdgm-carousel-title { font-family: var(--heading-font-family); font-weight: var(--heading-font-weight); font-size: calc(1.2rem + 0.2vw); letter-spacing: calc(0.005rem + 0.025vw); text-transform: uppercase; } .jdgm-rev-widg__title:after{ background: var(--text-color); display: block; position: relative; width: 5vw; height: 1px; content: " "; margin: 1rem auto 0; } .jdgm-full-rev__title, .jdgm-carousel-item__review-title, .jdgm-rev__title{ font-family: var(--heading-font-family); text-transform: uppercase; position: relative; } .jdgm-rev-carousel .jdgm-rev, .jdgm-carousel--gallery-theme .jdgm-carousel-item__inner-wrapper{ box-shadow: none!important; } .jdgm-carousel__more-reviews-button, .jdgm-full-rev__product-button{ text-transform: uppercase; font-family: var(--text-font-family); font-weight: var(--text-font-weight)!important; font-style: var(--text-font-style); font-size: calc(0.8rem + 0.025vw)!important;; letter-spacing: calc(0.1rem + 0.025vw); color: var(--button-text-color)!important; border: 1px solid var(--button-background); background: transparent!important; position: relative; transition: color .45s cubic-bezier(.785,.135,.15,.86), border .45s cubic-bezier(.785,.135,.15,.86); } .jdgm-carousel__more-reviews-button:hover, .jdgm-full-rev-modal .jdgm-full-rev__product-button:hover{ color: var(--button-background)!important; background: transparent!important; } .jdgm-carousel__more-reviews-button:before, .jdgm-full-rev-modal .jdgm-full-rev__product-button:before{ position: absolute; content: ""; display: block; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 101%; transform: scale(1,1); transform-origin: left center; z-index: 0; border-color: var(--button-background); transition: transform .45s cubic-bezier(.785,.135,.15,.86); z-index: -1; background: var(--button-background); } .jdgm-carousel__more-reviews-button:hover:before, .jdgm-full-rev__product-button:hover:before{ transform: scale(0,1); transform-origin: right center; } .jdgm-full-rev__icon{ display: none; } .jm-mfp-container .jm-mfp-close, .jm-mfp-container .jm-mfp-arrow { color: white; font-size: 30px; opacity: 1!important; right: -2px; } .jdgm-prev-badge { margin: 15px auto 0 !important; } .jdgm-star { font-size: 0.9rem; } .jdgm-prev-badge__text { color: #959595; font-size: 0.9rem; margin-left: 0.2rem; } .jdgm-carousel__left-arrow, .jdgm-carousel__right-arrow{ border-color: #959595!important; border-width: 2px!important; width: 15px!important; height: 15px!important; } .jdgm-star { font-size: 0.8rem; } .jdgm-carousel--gallery-theme { margin-top: -40px !important; } .jdgm-carousel--gallery-theme .jdgm-carousel-item__image-wrapper { aspect-ratio: 1/1; height: auto!important; width: 100%; } .jdgm-carousel--gallery-theme .jdgm-carousel__item-wrapper { padding: 0 1vw; } .jdgm-carousel--gallery-theme .jdgm-carousel-item { padding: 15px 1vw; } /* ========================================================================== PAGE SIDE BY SIDE TEMPLATE - WHERE IMAGE CAORUSEL AND TEXT SIT SIDE BY SIDE - USED FOR INDIVIDUAL GUIDES ========================================================================== */ .Page.Page-side-by-side{ max-width: 1400px; margin: auto; } .Page.Page-side-by-side .Article__Content{ margin: 0; padding: 0; text-align: left; } .Page.Page-side-by-side .Text{ padding: 0; text-align: left; } .Page.Page-side-by-side .Article__Content .Rte p{ margin-bottom: 1rem; } .Page.Page-side-by-side .Article__Content .Rte h2{ text-align: left; margin: 0; padding: 0; line-height: 1.2; letter-spacing: calc(0.01rem + 0.025vw); margin-bottom: 0; text-transform: uppercase; font-size: 18px; } .Page.Page-side-by-side .Article__Content .Rte h3, .Page.Page-side-by-side .Article__Content .Rte h4{ margin:0; text-transform: uppercase; letter-spacing: calc(0.01rem + 0.025vw); } .Page.Page-side-by-side .Section--spacingNormal{ margin: 0 0 40px; } .Page.Page-side-by-side .ShopTheLook.Carousel { max-width: none; padding: 0; } .Page.Page-side-by-side .ShopTheLook__Item { padding: 0 0; transition: opacity .3s ease-in-out; } .Page.Page-side-by-side .ProductList--carousel .Carousel__Cell { padding: 0 0; } .Page.Page-side-by-side .ShopTheLook.Carousel .flickity-prev-next-button{ display: none; } .Page.Page-side-by-side .ShopTheLook.Carousel .flickity-prev-next-button.previous{ left: 10px; top: 50%; margin-top: -45px; } .Page.Page-side-by-side .ShopTheLook.Carousel .flickity-prev-next-button.next{ right: 10px; top: 50%; margin-top: -45px; } @media screen and (max-width: 1023px) { .Page.Page-side-by-side .ShopTheLook__Item { padding: 0 0; width: calc(100%); transition: opacity .3s ease-in-out; } .Page.Page-side-by-side .ShopTheLook__Item .image-caption{ margin-left: 0!important; } .Page.Page-side-by-side .ShopTheLook{ margin-bottom: 0px; overflow: hidden; } .Page.Page-side-by-side .Article__Content{ margin-bottom: 40px; } } @media screen and (min-width: 1024px) { .Page.Page-side-by-side{ display: grid; grid-template-columns: 1fr 1fr; /* Two columns of equal width */ gap: 44px; /* Optional: Adds space between the boxes */ padding-bottom: 40px; } .Page.Page-side-by-side .ShopTheLook.Carousel { max-width: none!important; } .Page.Page-side-by-side .ShopTheLook.Carousel .flickity-prev-next-button{ display: none; } .Page.Page-side-by-side .ShopTheLook.Carousel .flickity-prev-next-button.previous{ left: 25px; } .Page.Page-side-by-side .ShopTheLook.Carousel .flickity-prev-next-button.next{ right: 25px; } } .Page.Page-side-by-side .BespokeCarousel .ShopTheLook__Inner { padding-bottom: 0; margin-bottom: 15px; } /* ========================================================================== PRODUCT SAMPLE REQUEST - VERY DIFFERENT TO OTHER PRODUCT - NEEDS TO BE WIDER WITH NO PRODUCT GALLERY ========================================================================== */ .Product.Product--samplerequest{ width: auto; max-width: 100%; margin: 0; } .Product.Product--samplerequest .Product__InfoWrapper{ position: static; } .Product--samplerequest .Product__Wrapper, .Product--samplerequest .Product__Info{ width: auto!important; max-width: 1280px!important; margin: auto; } .Product--samplerequest .Product__Info{ margin: 0; } .Product--samplerequest .Product__Info .Container { padding-left: 5.5vw; padding-right: 5.5vw; } @media screen and (min-width: 641px) { .Product--samplerequest .Product__Info .Container { padding-left: 30px; padding-right: 30px; } } @media screen and (min-width: 1024px) { .Product--samplerequest .Product__Info .Container { padding-left: 2vw; padding-right: 2vw; } } .Product--samplerequest .Product__InfoWrapper{ margin: 0!important; } .Product--samplerequest .ProductMeta, .Product--samplerequest .ProductForm__Variants{ max-width: 800px; margin: auto; text-align: center; } .Product--samplerequest .ProductForm__AddToCart{ max-width: 400px; margin: 40px auto; text-align: center; } .Product--samplerequest .Product__InfoWrapper .ProductMeta__Title{ font-size: calc(1.4rem + 0.5vw)!important; line-height: 1.2; padding: 0 calc(1rem + 0.025vw); letter-spacing: calc(0.01rem + 0.025vw); margin-bottom: var(--main-heading-spacing-bottom); text-transform: uppercase; text-align: center; margin: var(--main-heading-spacing-top) auto 15px!important; } .Product--samplerequest .ProductMeta .ProductMeta__PriceList.Heading{ margin-top: 0; } .Product--samplerequest #itoris_dynamicproductoptions .form-list .dpo_swatch:not(.ihidden){ width: 85px!important; height: auto!important; margin: 8px !important; } .Product--samplerequest .itoris-dynamicoptions-thumbnail-image{ width: 85px!important; height: 85px!important; } .Product--samplerequest .itoris-dynamicoptions-list-images > div.dpo_swatch > img{ border-radius: 0; aspect-ratio: 1/1; padding: 0; border: 0px solid transparent; } .Product--samplerequest .itoris-dynamicoptions-list-images > div.dpo_swatch > input:checked:after{ background: rgba(0,0,0,0.5); position: absolute; left: 0; right: 0; top: 0; bottom: 0; content: " "; } .Product--samplerequest .itoris-dynamicoptions-list-images > div.dpo_swatch .dpo_title{ opacity: 0.5; text-transform: uppercase; font-family: var(--text-font-family); font-weight: var(--text-font-weight); font-style: var(--text-font-style); font-size: 0.75rem; } .Product--samplerequest .itoris-dynamicoptions-list-images > div.dpo_swatch > input:checked ~ .dpo_title{ opacity: 1; font-weight: 600; } .Product--samplerequest .itoris-dynamicoptions-list-images > div.dpo_swatch > input:checked ~ img{ border: 2px solid var(--button-background)!important; } /* Style the variant heading (Shipping) like the other titles */ .Product--samplerequest .ProductForm__Label{ /* background: rgba(0,0,0,0.1); */ text-transform: uppercase; font-family: var(--heading-font-family); /* margin-top: 2vw!important; */ display: block; padding: 0px; text-align: center; font-size: calc(1.2rem + 0.2vw); letter-spacing: calc(0.01rem + 0.025vw); line-height: 1.2; padding: 0 calc(1rem + 0.025vw); text-transform: uppercase; text-align: center; margin-top: 60px!important; } .Product--samplerequest .ProductForm__Label:after{ background: var(--text-color); display: block; position: relative; width: 20vw; height: 1px; content: " "; margin: 1rem auto 1.5rem; } /* Effectively the form sections */ .Product--samplerequest #itoris_dynamicproductoptions .form-list.option-fields-cols-1 .field{ /* background: rgba(0,0,0,0.1); */ text-transform: uppercase; font-family: var(--heading-font-family); /* margin-top: 2vw!important; */ display: block; padding: 0px; text-align: center; } /* Effectively the section titles */ .Product--samplerequest #itoris_dynamicproductoptions .field:not(.dpo_swatch) > label { display: block; text-align: center; font-size: calc(1.2rem + 0.2vw); letter-spacing: calc(0.01rem + 0.025vw); line-height: 1.2; padding: 0 calc(1rem + 0.025vw); text-transform: uppercase; text-align: center; margin-top: 60px!important; } .Product--samplerequest #itoris_dynamicproductoptions .field:not(.dpo_swatch) > label:after{ background: var(--text-color); display: block; position: relative; width: 20vw; height: 1px; content: " "; margin: 1rem auto 1.5rem; } /* Undo the above for field labels */ .Product--samplerequest #itoris_dynamicproductoptions .form-list.option-fields-cols-1 .field .label{ margin-top: 0!important; } .Product--samplerequest #itoris_dynamicproductoptions .form-list.option-fields-cols-1 .field .field{ border: 0; margin-top: 0!important; padding: 0; background: transparent; } .Product--samplerequest #itoris_dynamicproductoptions .form-list.option-fields-cols-1 .label:after{ display: none; } .Product--samplerequest #itoris_dynamicproductoptions .form-list.option-fields-cols-1 .dpo_swatch_text label{ font-family: var(--text-font-family); font-weight: var(--text-font-weight); font-style: var(--text-font-style); font-size: 0.75rem; padding: 10px; border-radius: 0; opacity: 0.7; } .Product--samplerequest #itoris_dynamicproductoptions .options-list .dpo_swatch_text > input:checked ~ label{ border: 2px solid black; opacity: 1; font-weight: 600; } .Product--samplerequest #itoris_dynamicproductoptions .form-list.option-fields-cols-1 .field.empty{ background: transparent; padding: 0; } .Product--samplerequest #itoris_dynamicproductoptions .dpo_tooltip_icon{ font-family: var(--text-font-family); font-weight: var(--text-font-weight); letter-spacing: normal; font-size: var(--base-text-font-size); text-transform: none; top: -3px; } /* ========================================================================== PAGE 3D DESIGN - IMAGE, TEXT, IMAGE, TEXT ========================================================================== */ .Article__Wrapper.page-design3d .Article__Body{ margin-top: calc(1rem + 5vw); margin-bottom: calc(1rem + 6vw); } .Article__Wrapper.page-design3d .Article__secondaryimage__Wrapper{ margin-bottom: calc(1rem + 6vw); }