/* Theme Name: STM Goods Theme URI: http://stmgoods.com/ Description: A child theme, based on Storefront Author: Colm Delaney Author URI: http://www.cdelaney.com/ Template: storefront Version: 2.11 Text Domain: storefront-child */ /** * CPD: LICENSE DETAILS ARE EDITED: ONLY REGULAR, ITALIC, BOLD, BOLD ITALIC IN USE * * @license * MyFonts Webfont Build ID 3552300, 2018-04-05T14:17:50-0400 * * The fonts listed in this notice are subject to the End User License * Agreement(s) entered into by the website owner. All other parties are * explicitly restricted from using the Licensed Webfonts(s). * * You may obtain a valid license at the URLs below. * * License: https://www.myfonts.com/viewlicense?type=web&buildid=3552300 * Licensed pageviews: 100,000 * Webfonts copyright: Copyright © 2009 by Yorlmar Campos. All rights reserved. * * © 2018 MyFonts Inc */ /** * Self-host Google fonts required by Storefront parent theme */ /* source-sans-pro-300 - latin */ @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 300; src: url('fonts/source-sans-pro-v21-latin-300.eot'); /* IE9 Compat Modes */ src: local(''), url('fonts/source-sans-pro-v21-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/source-sans-pro-v21-latin-300.woff2') format('woff2'), /* Super Modern Browsers */ url('fonts/source-sans-pro-v21-latin-300.woff') format('woff'), /* Modern Browsers */ url('fonts/source-sans-pro-v21-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/source-sans-pro-v21-latin-300.svg#SourceSansPro') format('svg'); /* Legacy iOS */ } /* source-sans-pro-300italic - latin */ @font-face { font-family: 'Source Sans Pro'; font-style: italic; font-weight: 300; src: url('fonts/source-sans-pro-v21-latin-300italic.eot'); /* IE9 Compat Modes */ src: local(''), url('fonts/source-sans-pro-v21-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/source-sans-pro-v21-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */ url('fonts/source-sans-pro-v21-latin-300italic.woff') format('woff'), /* Modern Browsers */ url('fonts/source-sans-pro-v21-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/source-sans-pro-v21-latin-300italic.svg#SourceSansPro') format('svg'); /* Legacy iOS */ } /* source-sans-pro-regular - latin */ @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 400; src: url('fonts/source-sans-pro-v21-latin-regular.eot'); /* IE9 Compat Modes */ src: local(''), url('fonts/source-sans-pro-v21-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/source-sans-pro-v21-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('fonts/source-sans-pro-v21-latin-regular.woff') format('woff'), /* Modern Browsers */ url('fonts/source-sans-pro-v21-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/source-sans-pro-v21-latin-regular.svg#SourceSansPro') format('svg'); /* Legacy iOS */ } /* source-sans-pro-italic - latin */ @font-face { font-family: 'Source Sans Pro'; font-style: italic; font-weight: 400; src: url('fonts/source-sans-pro-v21-latin-italic.eot'); /* IE9 Compat Modes */ src: local(''), url('fonts/source-sans-pro-v21-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/source-sans-pro-v21-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */ url('fonts/source-sans-pro-v21-latin-italic.woff') format('woff'), /* Modern Browsers */ url('fonts/source-sans-pro-v21-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/source-sans-pro-v21-latin-italic.svg#SourceSansPro') format('svg'); /* Legacy iOS */ } /* source-sans-pro-700 - latin */ @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 700; src: url('fonts/source-sans-pro-v21-latin-700.eot'); /* IE9 Compat Modes */ src: local(''), url('fonts/source-sans-pro-v21-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/source-sans-pro-v21-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('fonts/source-sans-pro-v21-latin-700.woff') format('woff'), /* Modern Browsers */ url('fonts/source-sans-pro-v21-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/source-sans-pro-v21-latin-700.svg#SourceSansPro') format('svg'); /* Legacy iOS */ } /* source-sans-pro-900 - latin */ @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 900; src: url('fonts/source-sans-pro-v21-latin-900.eot'); /* IE9 Compat Modes */ src: local(''), url('fonts/source-sans-pro-v21-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/source-sans-pro-v21-latin-900.woff2') format('woff2'), /* Super Modern Browsers */ url('fonts/source-sans-pro-v21-latin-900.woff') format('woff'), /* Modern Browsers */ url('fonts/source-sans-pro-v21-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/source-sans-pro-v21-latin-900.svg#SourceSansPro') format('svg'); /* Legacy iOS */ } /* open-sans-300 - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300; src: url('fonts/open-sans-v29-latin-300.eot'); /* IE9 Compat Modes */ src: local(''), url('fonts/open-sans-v29-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/open-sans-v29-latin-300.woff2') format('woff2'), /* Super Modern Browsers */ url('fonts/open-sans-v29-latin-300.woff') format('woff'), /* Modern Browsers */ url('fonts/open-sans-v29-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/open-sans-v29-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */ } /* open-sans-regular - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: url('fonts/open-sans-v29-latin-regular.eot'); /* IE9 Compat Modes */ src: local(''), url('fonts/open-sans-v29-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/open-sans-v29-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('fonts/open-sans-v29-latin-regular.woff') format('woff'), /* Modern Browsers */ url('fonts/open-sans-v29-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/open-sans-v29-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */ } /* open-sans-700 - latin */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; src: url('fonts/open-sans-v29-latin-700.eot'); /* IE9 Compat Modes */ src: local(''), url('fonts/open-sans-v29-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/open-sans-v29-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('fonts/open-sans-v29-latin-700.woff') format('woff'), /* Modern Browsers */ url('fonts/open-sans-v29-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/open-sans-v29-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */ } /* open-sans-italic - latin */ @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 400; src: url('fonts/open-sans-v29-latin-italic.eot'); /* IE9 Compat Modes */ src: local(''), url('fonts/open-sans-v29-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/open-sans-v29-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */ url('fonts/open-sans-v29-latin-italic.woff') format('woff'), /* Modern Browsers */ url('fonts/open-sans-v29-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/open-sans-v29-latin-italic.svg#OpenSans') format('svg'); /* Legacy iOS */ } /* open-sans-300italic - latin */ @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 300; src: url('fonts/open-sans-v29-latin-300italic.eot'); /* IE9 Compat Modes */ src: local(''), url('fonts/open-sans-v29-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/open-sans-v29-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */ url('fonts/open-sans-v29-latin-300italic.woff') format('woff'), /* Modern Browsers */ url('fonts/open-sans-v29-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/open-sans-v29-latin-300italic.svg#OpenSans') format('svg'); /* Legacy iOS */ } /* open-sans-700italic - latin */ @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 700; src: url('fonts/open-sans-v29-latin-700italic.eot'); /* IE9 Compat Modes */ src: local(''), url('fonts/open-sans-v29-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/open-sans-v29-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */ url('fonts/open-sans-v29-latin-700italic.woff') format('woff'), /* Modern Browsers */ url('fonts/open-sans-v29-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/open-sans-v29-latin-700italic.svg#OpenSans') format('svg'); /* Legacy iOS */ } /* @import must be at top of file, otherwise CSS will not work */ @font-face { font-family: 'gobold_light'; src: url('fonts/gobold_light-webfont.eot'); src: url('fonts/gobold_light-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/gobold_light-webfont.woff2') format('woff2'), url('fonts/gobold_light-webfont.woff') format('woff'), url('fonts/gobold_light-webfont.ttf') format('truetype'), url('fonts/gobold_light-webfont.svg#gobold_light') format('svg') } .site-us #secondary { display: none; } /* -------- Override Storefront resets -------- */ body { line-height: 1.65; font-family: "Open Sans", sans-serif; } body, footer.site-footer { background-color: var(--footer-bg-color); } .site { background-color: #fff; } img { display: initial; border-radius: 0; } figure { margin: 0 0 1rem; } .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6, .yotpo .yotpo-display-wrapper .promoted-products-box .yotpo-main-title { margin-bottom: .5rem; font-weight: 500; line-height: 1.2; font-family: 'Camelia', sans-serif; font-weight: 500; /* font-weight: 700; */ overflow-wrap: normal; } h1, .h1, h2, .h2 { text-rendering: optimizeLegibility; } .h1, .h2, .h3, .h4, .h5, .h6 { color: #333; } h1, .h1, .wp-signup-container h2, .wp-activate-container h2 { color: var(--title-color); } h1, .h1 { font-size: 28px; } h1.page-title { margin-top: 1em; } .my-account.page-my-account h1 { margin-left: 12px; margin-bottom: 10px; } /* body.archive .site-main > header > h1 */ body.page-home .entry-header h1, body.page-home-new .entry-header h1, body.page-apple-case-finder h1, body.template-bxl-corp .entry-header h1, body.template-bxl-hlp .entry-header h1, body.template-bxl-home .entry-header h1, body.template-bxl-lp .entry-header h1, body.template-bxl-smarter .entry-header h1, body.template-bxl-product-list .entry-header h1, body[class*="-landing-page"] .entry-header h1, body[class*="product-list-"] .entry-header h1 { position: absolute; left: -10000px; } /** * TODO: remove h1 & h2? */ .bannerSolutionsProducts h1, .bannerSolutionsProducts h2, .bannerSolutionsProducts h3, .bannerSolutionsProducts .h3, .bannerSolutionsProducts .deck { color: var(--menu-txt-color); } .bannerSolutionsProducts h1, .bannerSolutionsProducts h2, .bannerSolutionsProducts h3, .bannerSolutionsProducts .h3, .bannerSolutionsProducts .deck, .titleGoboldRegular, h2.titleBgGoboldRegularNaranja { letter-spacing: -1px; } h2 > .subTitleGoboldRegular { letter-spacing: 0; } .h3 + h2 { margin-top: 0; } .caption > h3 { margin-top: 0.5em; } p + h2 { margin-top: 1.5em; } .page-commercial .entry-title, .page-education-corporate .entry-title { text-align: center; } .page-power-protection [class*="banner" i] .titleCamelia, .page-power-protection-hlp-landing-page [class*="banner" i] .titleCamelia { line-height: 1; } .titleBannerSolutionsProducts > .subTitleBannerSolutionsProducts, .titleBannerMyth > .subTitleBannerMyth { display: block; margin-top: 0.8rem; margin-left: 0; } .template-bxl-product-list .titleGoboldRegular > .titleGoboldRegular { margin-bottom: 8px; } .home .titleBgCamelia, .home .divInfoSolutionsProducts .titleGoboldRegular { color: var(--title-color); } .home .titleBgCamelia { line-height: 1; } .home .subTitleCamelia, .home .divInfoSolutionsProducts .subTitleGoboldRegular { color: var(--subTitle-color); } .home .divInfoSolutionsProducts .subTitleGoboldRegular { margin-bottom: 5vw !important; } h2, .h2, .yotpo-main-title { font-size: 24px; } #headerCorporate h2, #headerCorporate .subTitleBgOpenSans { font-size: 2rem; } .yotpo .yotpo-display-wrapper .promoted-products-box .yotpo-main-title { font-size: 1.65rem; /* font-size: 1.618em; */ } h3, .h3, h4, .h4, h5, .h5, h6, .h6 { /* line-height: 1.4; */ text-rendering: optimizeSpeed; } .deck.subTitleBgOpenSans { line-height: 1.2; } h3, .h3 { font-size: 18px; font-weight: 400; font-style: normal; } a + h3 { margin-top: 1rem; } .feature-text h3, .wrapper .jumbotron-text-left .deck { /* font-size: 12px; */ /* font-size: 1.5em; */ } /** * This element wraps texts that are overlaid on photos to ensure text is legible * Background colour can be made translucent with a style attribute e.g. background-color: hsla(0, 0%, 0%, 0.65) */ .wrapper .jumbotron-text-left .deck > span[class*="background-"] { display: inline-block; padding: 0 0.5em 0 0.2em; } .feature-text h3 { color: #555779 !important; font-weight: 700; text-transform: lowercase; margin-top: 20px; } .feature-text li { margin-bottom: 2px; } * + h2.inherit, * + h3.inherit, * + h4.inherit { margin-top: inherit; } .site-footer h2, .site-footer h3 { font-size: 1rem; font-family: "Open Sans", sans-serif; font-weight: bold; } h4, .h4 { font-size: 14px; text-transform: capitalize; } h5, .h5 { font-size: 13px; } h2.reversed, h3.reversed, .h-reversed > h2, .h-reversed > h3, h6, .h6, h7 { display: table !important; margin-bottom: 0.25rem; padding: 3px 4px 4px 4px; /* padding: 12px 20px 20px 20px; */ color: #fff; background: rgba(255,103,24, 1); font-size: 12px; } dl, ol, ul, form, table { margin-bottom: 1rem; } dl, ol, ul { margin: 0; } ol, ul { list-style: none; } .site-footer ul { margin-bottom: 1rem; } blockquote { width: 80%; text-align: center; margin: 20px; padding: 20px; font-family: 'Camelia', sans-serif; /* font-family: 'RNSCamelia-Bold', sans-serif; */ font-weight: 700; font-size: 2rem; line-height: 1.4; /* font-size: 30px; */ color: #ff671b; border-top: 1px solid #cccccc; border-bottom: 1px solid #cccccc; border-left: none; } .author { margin: 0; display: inline-block; color: #888; font-size: 1.25rem; /* font-size: 0.9rem; */ font-weight: normal; } span, span:not(.spanOrange) { /* span, span:not(.spanOrange):not([class*="brand-"]):not([class*="color-"]) { */ color: inherit; } span.decorative, span.new { color: var(--title-color); } .Subtitle4vw span:not(.decorative), a, a:hover { color: inherit; } .content-area a, .site-content a { text-decoration: underline; } .content-area a.woocommerce-product-gallery__trigger, .content-area a:hover, .content-area a:active, .site-content a:hover, .site-content a:active, .site-content h2 > a { text-decoration: none; } .hentry .navbar a, .site-footer a, li.product a, .product_title a, .woocommerce-loop-product__title a { text-decoration: none; } .site-content h2 > a:hover, .hentry .navbar a:hover, .site-footer a:hover, .site-footer a:active { text-decoration: underline; } a:focus, input:focus, textarea:focus, button:focus { outline: 2px solid var(--border-color-sm); /* outline: 1px solid var(--border-color-sm); */ } .woocommerce-message a, .woocommerce-info a, .woocommerce-error a, .woocommerce-noreviews a, p.no-comments a { padding: 0 .35em 0 .15em; } .woocommerce-message a:focus, .woocommerce-info a:focus, .woocommerce-error a:focus, .woocommerce-noreviews a:focus, p.no-comments a:focus { outline: 2px solid var(--border-color-sm); /* outline: 1px solid var(--border-color-sm); */ background-color: hsla(0, 0%, 100%, 0.2); } .hentry .entry-content .learnMoreBanner, .hentry .entry-content .learnMoreW { text-decoration: underline; } .hentry .entry-content .btnOrg, .hentry .entry-content .learnMoreBanner:hover, .hentry .entry-content .learnMoreW:hover, .site-footer .socialMedia a:hover, .txtPrivacyPolicy a:hover, .woocommerce-loop-product__link:hover { text-decoration: none; } button.alt, .button.alt, input[type="button"].alt, input[type="reset"].alt, input[type="submit"].alt, .submit > input[type="submit"], a.button, .added_to_cart.alt, .widget-area .widget a.button.alt, .added_to_cart, .widget a.button.checkout { border: var(--menu-bg-color); border-radius: .25em; /* padding: 0.4rem 1.5rem !important; */ color: var(--menu-txt-color) !important; background-color: var(--menu-bg-color); font-family: "Open Sans", sans-serif !important; letter-spacing: 0px !important; word-break: initial; } .site-content .mu_register.wp-signup-container { margin-top: 2em; } .site-content .mu_register input[type="submit"], .site-content .mu_register input[type="text"], .site-content .mu_register #blog_title, .site-content .mu_register #user_email, .site-content .mu_register #blogname, .site-content .mu_register #user_name { font-size: 1rem; width: 42rem; max-width: 100%; } a.btnOrg { display: inline-block; font-size: 14px; line-height: 1.5; white-space: nowrap; } button:focus, .btnOrg:focus, .submit > input[type="submit"]:focus { outline: 5px auto -webkit-focus-ring-color; } .submit > input[type="submit"]:hover, .submit > input[type="submit"]:focus { background-color: black; } .navbar-toggler:focus, .navbar-toggler:hover { background-color: inherit; } .site-footer a:focus { outline-color: rgba(255,255,255,0.4); outline-width: 2px; /* outline-width: 1px; */ background-color: hsla(150deg, 2%, 50%, 0.2); /* background-color: hsla(150deg, 2%, 18%, 0.5); */ /* background-color: rgba(255,255,255,0.1); */ } .site-footer .socialMedia a:focus { background-color: inherit; } .site-footer .socialMedia a:hover *, .site-footer .socialMedia a:focus * { color: var(--suscribir-bg-color); } table:not(.has-background) tbody td { background-color: transparent; } .divSubmit input:focus { outline-color: #101010; } .form-row { display: block; } .not-template-bxl:not(.page-deal-registration) .entry-content { /* .not-template-bxl .entry-content { */ padding-bottom: 1.5rem; } /** * MISC FIXES FOR CUSTOM BOXEL ELEMENTS */ /** * Prevent elements disappearing before or after scroll animation * Typical remedy is adding z-index: 0 to the .Container_Overflow of the page in question * May also be necessary to add z-index: 0 to the closest div.row parent (usually identified by its id) */ .template-bxl-lp .Container_Overflow, .template-bxl-smarter .Container_Overflow, .scrollmagic-pin-spacer .ptopSection, .page-dux-shell #rowImgTopCortada, .page-education .Container_Overflow, .page-education #securityEdu, .page-education .imgTrustEducation, .page-myth-18 #sec07, .page-smarter #Charging, .page-smarter #Experience, .page-smarter #video_smarter, .page-dux-shell-landing-page #rowImgTopCortada, .page-education-landing-page .Container_Overflow, .page-education-landing-page #securityEdu, .page-education-landing-page .imgTrustEducation, .page-myth-18-landing-page #sec07, .page-smarter-landing-page #Charging, .page-smarter-landing-page #Experience, .page-smarter-landing-page #video_smarter { z-index: 0; } .page-education .Container_Overflow, .page-smarter .Container_Overflow, .page-smarter-landing-page .Container_Overflow { overflow-y: hidden; } .page-smarter #video_smarter, .page-smarter-landing-page #video_smarter { position: relative; } .page-smarter #Experience .col-sm-12, .page-smarter-landing-page #Experience .col-sm-12 { /* outline: 2px dotted green; */ } .page-smarter #Experience .divGeneralAbsoluteAR, .page-smarter-landing-page #Experience .divGeneralAbsoluteAR { min-height: 50vw; } /** * WordPress Storefront parent theme specifies tags with a max-width of 100% * Boxel's tags have no max-width. * Adding max-width value of initial to incorrectly sized images resolves this */ .Container_Overflow img { max-width: initial; } .ImageSubMenu { width: 15vw; } .ListElementTitle { /* outline: 1px dotted green; */ line-height: 1.2; } #CareForSchoolTools2{ background: url('images/STM_EDUCATION/STM_EDUCATION_02.jpg'); background-size: cover; background: linear-gradient(#150718, #23112B, #2F163D); } .page-education #CareForSchoolTools .rowCareForSchoolTools, .page-education #CareForSchoolTools2 .rowCareForSchoolTools { overflow-y: hidden; } .page-education #protection > div > div:first-of-type { z-index: 1; } .page-smarter .Container_Overflow .scrollmagic-pin-spacer, .page-smarter-landing-page .Container_Overflow .scrollmagic-pin-spacer { /* border: 2px dotted blue; */ } .page-smarter .Container_Overflow .scrollmagic-pin-spacer:nth-of-type(2), .page-smarter-landing-page .Container_Overflow .scrollmagic-pin-spacer:nth-of-type(2) { background-color: var(--banner-bg-color-smarter); } .col.paddingColCardsMyth { padding-left: 5px; padding-right: 5px; } /** * Use clamp to prevent vw units from specifying overly small font sizes */ .suscribirse .rowSuscribirse h2 { font-size: max(18px, 1.59vw); /* font-size: clamp(18px, 1.59vw, 1.59vw); */ } .info3_GoboldLowPlus, .h2.info3_GoboldLowPlus, .h3.info3_GoboldLowPlus { font-family: GoboldLowPLus; } .Container_Overflow .info_OpenSans { font-size: max(14px, 1.42vw); /* font-size: clamp(14px, 1.42vw, 1.42vw); */ } p.deck.subTitleGoboldRegular, p.deck.subTitleCamelia { /* margin-bottom: 0.5rem !important; */ } .template-bxl-home .sectionDuxDuo .subTitleGoboldRegular { color: var(--menu-txt-color) !important; } .template-bxl-hlp .titleCamelia .subTitleCamelia { text-transform: none; margin-top: 8px; } .page-power-protection .ptSection .info_OpenSans, .page-power-protection-hlp-landing-page .ptSection .info_OpenSans { margin-bottom: 1%; } .Container_Overflow .T16-Size { font-size: max(12px, .99vw) !important; /* font-size: clamp(16px, 0.99vw, 0.99vw) !important; */ line-height: 1.4; } .Subtitle4vw { height: clamp(4rem, 4.5vw, 4.5vw); /* height: clamp(4rem, 8vw, 8vw); */ /* height: clamp(4rem, 4.5vw, 4.5vw); */ } .learnmore { height: 1.75rem; } .learnMoreBanner + .btnOrg { margin-top: 0.5rem; } .template-bxl .titleCamelia2, .template-bxl-product-list .learnMoreBanner, .template-bxl-product-list .learnMoreTextList, .page-hubs .card-title { text-transform: uppercase; } .template-bxl-product-list .card-title { margin-left: 0.05em; margin-right: 0.05em; line-height: 1.05; } /** * Fix for Firefox adding vertical scroll bar at ~753 px wide */ .Container_Overflow.bannerSolutionsProductsGridContainer { overflow-y: hidden; } .bannerSolutionsProductsGridContainer .learnMoreBanner, .template-bxl-hlp .learnMoreBanner, .template-bxl-hlp .learnMoreBannerCharge, .home .learnMoreBanner, .home .learnMoreBannerCharge { /* outline: 1px dotted pink; */ display: block; text-transform: uppercase; margin-top: 1% !important; padding: 4px 1em 4px 0; } .centerElements .learnMoreBanner { display: block; } .page-tablet-protection .ptSection.bgDark .learnMoreBanner, .page-power-protection .ptSection.bgDegradadoInvertido .learnMoreBannerCharge { /* outline: 1px solid green; */ margin-left: auto; margin-right: auto; padding-left: 1.75em; } .page-tablet-protection .ptSection.section02 .learnMoreBannerCharge { /* outline: 1px solid pink; */ } .bannerSolutionsProductsGridContainer .text-right .learnMoreBanner { /* outline: 1px dotted green; */ float: right; margin-top: 0.25% !important; padding-right: 0; padding-left: 1em; } .bannerSolutionsProductsGridContainer .text-right .btnOrgRightBanner { float: right; clear: both; } .colSolutionsProductsMythBagCollection .learnMoreBanner, .colSolutionsProductsPowerkick .learnMoreBanner { margin-top: 1.5%; } .colSolutionsProductsSchoolSolutions .learnMoreBanner, .colSolutionsProductsBusinessSolutions .learnMoreBanner { margin-top: 2%; } .page-bags .learnMoreBanner, .page-bag-hlp-landing-page .learnMoreBanner { margin-bottom: 1.5%; } .home .learnMoreBannerCharge { margin-top: 1em; } .bannerSolutionsProducts .btnOrg { margin-top: 3% !important; } .sectionDuxDuo.bannerSolutionsProducts .btnOrg { margin-top: 6% !important; } .power-protection .learnMoreBannerCharge + .btnOrg, .power-protection-hlp-landing-page .learnMoreBannerCharge + .btnOrg { margin-top: 2% !important; } .power-protection .divBanner60 .btnOrg, .power-protection-hlp-landing-page .divBanner60 .btnOrg, /* .template-bxl-hlp .fitContentInfoRight > .info3_GoboldLowPlus + h2 */ .template-bxl-hlp .info3_GoboldLowPlus + h2 { margin-top: 0 !important; } .home .learnMoreBannerCharge + .btnOrg { margin-left: 3.5% !important; } .page-bags .ptSection:not(.bgBagHLP) .btnOrg, .page-bag-hlp-landing-page .ptSection:not(.bgBagHLP) .btnOrg { margin-top: 0; } .subTitleForma_OpenSans { font-size: 18px; font-size: clamp(18px, 1.5vw, 1.5vw); } .suscribirse .divSubmit input[type="text"], .suscribirse .divSubmit input[type="submit"] { font-size: 13px !important; font-size: clamp(13px, 0.85vw, 0.85vw) !important; } .suscribirse .divSubmit input[type="submit"] { width: clamp(54px, 3.5vw, 3.5vw) !important; height: clamp(35px, 2vw, 2vw) !important; } .carousel-indicators { margin-bottom: 1rem; } .page-corporate .card-body, .page-corporate-landing-page .card-body, .page-education .card-body, .page-education-landing-page .card-body { padding-left: 0.75rem; padding-right: 0.75rem; } #bannerProductListiAtlasCollection { background-image: url("images/STM_ATLAS/STMS_Tablet-Protection_Int_Atlas_09.jpg"); background-size: cover; background-position-y: 85%; } #bannerProductListiStudioCollection { background-image: url("images/STMS_DUX_STUDIO/STMS_Tablet-Protection_DuxStudio.jpg"); background-size: cover; background-position-y: 83%; } .subMenuVW .titleSubMenuHLP[href]:hover, .subMenuVW .titleSubMenuHLP[href]:active { text-decoration: underline !important; } .btnColoresWhite { border: 2px solid rgba(0, 0, 0, 0.22) !important; } .btnColoresWhite:active, .btnColoresWhite:focus { border: 2px solid var(--title-color) !important; } .page-chargetree-swing .btnColores:hover { background-color: transparent !important; } /** * HEADER */ /* -------- Override Storefront -------- */ .site-header { padding-top: 0; padding-bottom: 0; border-bottom-width: 0; z-index: 1001; } .header-navigation .site-search { display: block; width: 100%; max-width: 25rem; margin-top: 0.5rem; margin-left: 0.5rem; margin-bottom: 1rem; /* outline: 1px solid yellow; */ } .header-navigation .site-search .dgwt-wcas-search-wrapp form input[type="search"] { border-width: 0; background-color: #fff; padding-left: 0.25rem; } .site-header > .col-full, .page-template-default:not(.section-company):not(.page-apple):not(.page-apple-account):not(.page-education-corporate):not(.page-first-responders):not(.page-military):not(.woocommerce-account):not(.woocommerce-cart):not(.woocommerce-checkout) .site-content > .col-full, .right-sidebar .content-area, .site-footer > .col-full { max-width: unset; margin: 0; padding: 0; width: 100%; } .section-company .site-content > .col-full, .page-apple .site-content > .col-full, .page-apple-account .site-content > .col-full, .page-education-corporate .site-content > .col-full, .page-first-responders .site-content > .col-full, .page-military .site-content > .col-full, .page-template-default.woocommerce-account .site-content > .col-full, .page-template-default.woocommerce-cart .site-content > .col-full, .page-template-default.woocommerce-checkout .site-content > .col-full, .page-template-template-fullwidth .site-content > .col-full, .post-blog .site-content > .col-full, .wp-signup-container, .wp-activate-container, #signup-welcome { margin-top: 1rem; } .hentry, .site-main, .widget-area { margin-bottom: 0; } footer.site-footer, footer.site-footer *, footer.site-footer a:not(.button):not(.components-button) { color: var(--footer-txt-color); } /* -------- Reinstate existing style -------- */ .home.blog .site-header, .home.page:not(.page-template-template-homepage) .site-header, .home.post-type-archive-product .site-header { margin-bottom: 0; } .banner { padding: 6px 0 4px 0; font-family: 'Camelia', sans-serif; font-weight: 700; font-size: 12px; line-height: 1.2; } .site-header-banner { padding: 12px 0px; color: #fff; background-color: #165f8c; font-size: 15px; line-height: 1.2; letter-spacing: 0.8px; } .banner * { color: inherit; } .banner a { /* color: inherit; */ text-decoration: underline; } .banner a:hover { text-decoration: none; } .site-header-banner .widget-title { display: none; } .site-header-banner .widget { margin: 0; } .site-header-banner .col-full { text-align: center; } /* -------- Override Storefront -------- */ .primary-navigation { display: block; } .header-navigation .navbar-nav { margin: auto !important; } .navbar > .navbar-brand { /* outline: 2px solid hsl(120, 100%, 40%); */ padding-left: 1rem; padding-right: 1rem; } .header-navigation ul.menu > li > a, .header-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li > a, .main-navigation ul.nav-menu > li > a { display: inline-block; padding: 0.75em 2em 0.75em 1em; /* padding: 0.5em 1em; */ font-size: 0.9em; font-family: GoboldLowPLus; letter-spacing: 1.8px; white-space: nowrap; } #menu .main-navigation li.current-menu-item a, #menu .main-navigation li.current-page-item a { text-decoration: underline; color: var(--menu-txt-color-active); } .site-search * { box-shadow: none !important; } .input-not-focused .dgwt-wcas-search-input { border-width: 0; background-color: inherit; } .dgwt-wcas-search-wrapp .dgwt-wcas-search-form { height: auto; background-color: unset; overflow: hidden; } .dgwt-wcas-search-wrapp .dgwt-wcas-search-form .dgwt-wcas-search-submit, .dgwt-wcas-search-wrapp .dgwt-wcas-search-form .dgwt-wcas-search-submit:hover, .dgwt-wcas-search-wrapp .dgwt-wcas-search-form .dgwt-wcas-search-submit:active { border-width: 0; margin-left: 0; /* background-color: rgba(0,0,0,0.2); */ background-color: red; background-color: var(--title-color); background-color: #b23b00; background-image: url('/wp-content/themes/stmgoods/images/STM_STM_Search.svg'); background-repeat: no-repeat; background-size: 48%; /* background-size: 50%; */ background-position: 10px 6px; font-size: 0; min-width: unset; width: 42px; } .dgwt-wcas-search-wrapp .dgwt-wcas-search-form .dgwt-wcas-search-submit:before, .dgwt-wcas-search-wrapp .dgwt-wcas-search-form .dgwt-wcas-search-input { border-width: 0; } .dgwt-wcas-search-wrapp .dgwt-wcas-search-form input[type="search"].dgwt-wcas-search-input { height: 36px; } .dgwt-wcas-search-wrapp .dgwt-wcas-search-form .dgwt-wcas-search-submit svg { position: absolute; left: -10000px; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion.dgwt-wcas-suggestion-product { padding-top: 14px; padding-right: 14px; padding-bottom: 14px; padding-left: 14px; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion .dgwt-wcas-sd { font-size: 13px; line-height: 1.5; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-more { padding-top: 16px; padding-bottom: 16px; } .dgwt-wcas-suggestions-wrapp .dgwt-wcas-suggestion-more .dgwt-wcas-st-more { color: #333; font-size: 14px; } .site-header-cart * { color: var(--menu-txt-color); } .titleBannerSolutionsProducts + .subTitleBannerSolutionsProducts { color: var(--subTitle-color); } /* .bannerSolutionsProducts, .bannerSolutionsProducts .subTitleBannerSolutionsProducts { color: var(--subTitle-color); } */ #FormFieldsTable { margin-bottom: 0.75rem; } .divSubmit { display: block !important; } .divSubmit input[type="submit"] { position: absolute; top: 9px; right: 12px; } .divSubmit input[type="text"] { width: 98.5%; } .rowSuscribirse h2, .device-search-wrapper h2 { color: var(--title-color); font-family: GoboldRegular; font-size: 1.59vw; line-height: 1.5; text-transform: uppercase; letter-spacing: -1px; } .txtPrivacyPolicy { margin-top: 0; } #divShoppinCart, #divShoppingCartMobile, #divShoppingCartDesktop { margin-left: 4px; margin-right: 1rem; } .woocommerce.woocommerce-active .storefront-breadcrumb { margin-bottom: 1em !important; } /** * WOOCOMMERCE PAGES */ .woocommerce .star-rating { display: none !important; } .woocommerce-active .site-content > .col-full > .woocommerce > .woocommerce-message:first-child, .woocommerce-active .site-content > .col-full > .woocommerce > .woocommerce-info:first-child, .woocommerce-active .site-content > .col-full > .woocommerce > .woocommerce-error:first-child { margin-top: 0.5em; } .woocommerce-error, .woocommerce-info:not(.woocommerce-no-products-found), .woocommerce-message, .woocommerce-noreviews, p.no-comments { background-color: #ff671b !important; } .woocommerce-error, .woocommerce-info, .woocommerce-message, .woocommerce-noreviews, p.no-comments { line-height: 1.3; } /** * "X has been added to your cart" message * Slightly kludgey, but difficult to improve on because wrapper * contains text and a child element (2 child elements would be easier / better for styling) * Current solution: use flexbox at narrow widths, with row-reverse to ensure is on the right */ .woocommerce-message[role="alert"] { padding-right: 0; } .woocommerce-message[role="alert"] > a.button { flex-grow: 1; white-space: nowrap; margin-top: -1em; margin-bottom: -1em; padding: 1em; border-left-width: 0; } .woocommerce-message[role="alert"].added-to-cart { padding-left: clamp(2em, 3vw, 3.25em); /* padding-left: clamp(2em, 2.5vw, 3em); */ } .woocommerce-message[role="alert"].added-to-cart:before { left: clamp(0.5em, 1vw, 1.5em); /* left: clamp(0.5em, 0.75vw, 1em); */ } @media (min-width: 320px) { .woocommerce-message[role="alert"].added-to-cart { display: flex; flex-direction: row-reverse; } } @media (min-width: 768px) { .woocommerce-message[role="alert"].added-to-cart { display: block; padding-right: 150px; padding-bottom: 1em; } .woocommerce-message[role="alert"] > a.button { /* position: static; */ margin: -1em -150px; padding: 1em 1.75em; } } .woocommerce-message > a.button:hover, .woocommerce-message > a.button:focus { background-color: hsla(20, 100%, 100%, 0.3); } .woocommerce-page h1 { margin-bottom: 2px; } .woocommerce-page h1.product_title { margin-bottom: 8px; } .woocommerce-page h1 .collection, .woocommerce h2 .collection { display: block; margin-bottom: 2px; font-size: 40px; line-height: 1; font-weight: 400; text-transform: uppercase; } .woocommerce h2 .collection { font-size: 20px; } .products.columns-3 h2 .collection, .products.columns-4 h2 .collection { height: auto; } .woocommerce-page .sku-product-wrapper { display: none; color: #ffffff; font-family: "TradeGothic", sans-serif; font-size: 1px; margin-top: 5px; } .woocommerce-page .commercial_sku, .woocommerce-page .commercial_sku a { color: #452160 !important; } .woocommerce-page .commercial_sku { display: block; } ul.products > li { display: flex; flex-direction: column; justify-content: flex-end; } .products.columns-3 .button, .products.columns-4 .button { display: table; margin: 0 auto; border: var(--menu-bg-color); background-color: var(--menu-bg-color); color: var(--menu-txt-color) !important; font-family: "Open Sans", sans-serif !important; letter-spacing: 0px !important; padding: 0.4rem 1.5rem !important; } .products.columns-3 > .product, .products.columns-4 > .product { margin-top: 4px !important; margin-right: 4px !important; margin-bottom: 0.75rem; margin-left: 4px !important; border: 1px solid hsl(0deg 0% 0% / 13%); border-radius: .25rem; padding: 3rem 0.75rem 2.25rem 0.75rem; background-color: var(--card-bg-color); overflow: hidden; } .products.columns-3 .yotpo, .products.columns-3 li.product .price, .products.columns-3 li.product .onsale, .products.columns-4 .yotpo, .products.columns-4 li.product .price, .products.columns-4 li.product .onsale { display: none; } .template-bxl-product-list .woocommerce-loop-product__title { /* outline: 1px dotted red; */ margin-top: 6vw; } .product_title > .collection, .woocommerce-loop-product__title > .collection, .product_title > .product-name-ori, .woocommerce-loop-product__title > .product-name-ori { display: block; } .product_title > .collection, .woocommerce-loop-product__title > .collection { margin-bottom: .75rem; font-family: Camelia; color: var(--subTitle-color); font-size: 36px !important; font-size: clamp(36px, 3vw, 3vw) !important; } .related .product_title > .collection, .related .woocommerce-loop-product__title > .collection, .up-sells .product_title > .collection, .up-sells .woocommerce-loop-product__title > .collection { font-size: 2.4vw !important; } h1.product_title > .collection { margin-bottom: .25rem; color: var(--title-color); } .woocommerce-loop-product__title > .collection { height: 8vw; margin-bottom: .75rem; } .related .woocommerce-loop-product__title > .collection, .up-sells .woocommerce-loop-product__title > .collection { height: auto; margin-bottom: .25rem; } .product_title > .product-name-ori, .woocommerce-loop-product__title > .product-name-ori { font-family: "Open Sans", sans-serif; color: var(--body-txt-color); font-size: clamp(14px, 1.42vw, 20px); } .woocommerce-loop-product__title > .product-name-ori { display: table; margin: 0 auto; height: 4.5vw; color: var(--body-txt-drk-color); font-size: clamp(15px, 0.99vw, 0.99vw) !important; } .template-bxl-product-list .woocommerce-loop-product__title > .product-name-ori { margin-top: 3vw; } .related .woocommerce-loop-product__title > .product-name-ori, .up-sells .woocommerce-loop-product__title > .product-name-ori { height: 2.5vw; } .woocommerce-loop-product__title > .product-name-ori::before { display: inline-block; position: relative; top: 2px; left: -2px; content: '\203A'; /* Single guillemet, right pointing */ color: var(--title-color); font-size: 26px; } /* Fix misalignment on home & product category pages */ .home li.product img, .storefront-align-wide li.product img { margin: auto; } .template-bxl-product-list ul.products li.product img { width: 100%; margin-top: 5vw; transform: scale(0.9); transition: transform 0.5s ease; } .template-bxl-product-list ul.products li.product img:hover, .template-bxl-product-list ul.products li.product img:active { transform: scale(1); } .woocommerce .price, .woocommerce .price * { color: var(--body-txt-drk-color); } .woocommerce-loop-product__link .price, .woocommerce-page.single-product div.product p.price { margin-top: 12px; font-family: "TradeGothic", sans-serif; font-size: 26px; font-weight: 700; } .woocommerce-loop-product__link .price { font-size: 16px; } .banner-smarter-than-most { padding: 12px 0 8px 0; font-size: 20px; text-transform: uppercase; letter-spacing: -0.2px; } .specifications { padding: 40px 0px; } .headline { margin: 40px 0px; } .headline h2 { text-transform:lowercase; margin-bottom:0px; color:#ff671b; text-align:center; } .callout-shop-buttons { font-family: "gobold_light", sans-serif; font-size: 20px; text-transform: uppercase; } .callout-shop-buttons > div { display: flex; justify-content: center; padding: 0.5em 0; } .callout-shop-buttons:not([class*="bg-"]) > div:nth-of-type(1), .callout-shop-buttons:not([class*="bg-"]) > div:last-child { background-color: #fff; } .woocommerce-Tabs-panel--description > .callout-shop-buttons > div { background-color: transparent; } .callout-shop-buttons .button { padding: 2px 1.5em; width: 12em; line-height: 1.3; text-decoration: none; } .woocommerce-Tabs-panel--description .callout-shop-buttons .button { background-color: transparent; color: var(--title-color) !important; outline: 1px solid var(--title-color); padding-top: 4px; padding-bottom: 5px; } .callout-shop-buttons .button.info { padding: 0.75em 1.5em; font-weight: normal; } .callout-shop-buttons .button:hover { color: #ff671b; /* background-color: hsla(20, 100%, 55%, 0.1); */ } .callout-shop-now-offers { color: #000; background-color: #fff; font-family: ralewayregular, sans-serif; line-height: 1.2; } .callout-shop-now-offers > div { padding: 2em; /* padding: 5em; */ background-repeat: no-repeat; background-size: cover; } .callout-shop-now-offers > .col-1 { background-image: url('https://stmgoods.wpengine.com/wp-content/uploads/Homepage-3column-NewArrivals-Left.jpg'); /* background-image: url('https://stmgoods.wpengine.com/wp-content/uploads/bicycle-banner.png'); */ } .callout-shop-now-offers > .col-2 { background-image: url('https://stmgoods.wpengine.com/wp-content/uploads/Homepage-3column-MythiTunes-Center.jpg'); } .callout-shop-now-offers > .col-3 { background-image: url('https://stmgoods.wpengine.com/wp-content/uploads/Homepage-3column-HolidaySavings-Right.jpg'); } .callout-shop-now-offers h2 { font-family: ralewaysemibold, sans-serif; } .callout-shop-now-offers .button { outline: 1px solid #ff671b; margin-bottom: 2px; color: #ff671b; background-color: transparent; padding: 4px 12px; font-family: TradeGothic, sans-serif; font-size: 14px; text-transform: uppercase; } .callout-shop-now-offers .button:hover { background-color: hsla(20, 100%, 55%, 0.1); } .callout-shop-now-offers > div.light-on-dark, .callout-shop-now-offers > div.light-on-dark h2, .callout-shop-now-offers > div.light-on-dark .button { color: #fff; /* background-color: pink !important; */ } .callout-shop-now-offers > div.light-on-dark { background-color: #595f5f; } .callout-shop-now-offers > div.light-on-dark .button { outline: 1px solid #fff; } .callout-shop-now-offers > div.orange { background-color: #ff671b; } .callout-our-products { padding: 1em 2em 0 2em; } .callout-our-products h2 { margin-bottom: 1em; color: #333; font-family: TradeGothic, sans-serif; font-size: 26px; font-weight: 800; text-transform: uppercase; } .callout-our-products ul.products li.product { margin-bottom: 0.5em; } .cart_item .product-subtotal, .cart_item .product-total, .cart-subtotal > td, .order-total .includes_tax { line-height: 1.1; } .cart_item .product-subtotal .tax_label, .cart_item .product-total .tax_label, .cart-subtotal .tax_label, .order-total .includes_tax { white-space: nowrap; } table.cart td.product-remove a.remove { z-index: 10000; } .swatch-wrapper a { display: block; border-radius: 50%; } .swatch-wrapper { padding: 2px; background: #fff; border: 1px solid #ccc; float: left; margin: 0 5px 5px 0; border-radius: 50%; } div.swatch-wrapper.selected { border: 2px solid #ff671b !important; padding: 1px; border-radius: 50%; } div.swatch-wrapper.disabled, div.swatch-wrapper.disabled a, .radio-select .disabled { cursor: not-allowed; zoom: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.2; } .variations .radio-select li { /* outline: 1px dotted hsl(0, 80%, 40%); */ display: flex; flex-direction: row; align-items: flex-start; line-height: 1.4; margin-bottom: 0.5em; } .variations .radio-select li .radio-option { /* outline: 1px dotted hsl(180, 80%, 40%); */ margin-top: 0.3em; } .yotpo .text-m { white-space: nowrap; } .yotpo .yotpo-icon-double-bubble, .yotpo a.ask-question { position: relative; top: 2px; } /** * Pimwick Plugins Black Friday callouts */ .product .pwbf-promo-callout, .product .pwbf-promo-text { display: block; } .product .pwbf-promo-callout, .product .pwbf-promo-callout * { font-size: 15px; line-height: 1.2; color: #fff; background-color: var(--title-color); } .product .pwbf-promo-callout { padding: 5px 7px 8px 7px; } .product .pwbf-promo-text { padding-top: 4px; } .product .pwbf-promo-callout .promo-callout-expires, .product .pwbf-promo-callout .pwbf-expires-text { font-size: 13px; font-weight: normal; padding-top: 4px; } .product .pwbf-promo-callout .promo-callout-cta, .product .pwbf-promo-callout .promo-callout-cta * { font-size: 18px; line-height: 1.1; } .product .pwbf-promo-callout .promo-callout-cta .note, .product .pwbf-promo-callout .promo-callout-cta .note * { font-size: 15px; } /** * Must be display: none for product list pages with & without colour pickers e.g. * https://stmdevelopment.wpengine.com/product-list-backpack-16/ */ .GridParent > [class^="Colors-Grid"], .GridParent > .FakeButtons { /* outline: 1px solid red; */ /* display: none; height: 0px; padding: 0; overflow: hidden; */ } /** * GENERIC LAYOUT STYLES */ /* .breadcrumbs { margin: -30px 0 12px 0; font-size: 16px; font-family: Calibri,"lucida grande",tahoma,sans-serif; line-height: 1.2; } */ .breadcrumbs .breadcrumb_last { /* visibility: hidden; */ } .inline-breadcrumb { /* outline: 1px solid hsl(0, 80%, 94%); */ } .inline-breadcrumb > a { /* outline: 1px solid hsl(120, 80%, 94%); */ } .inline-breadcrumb, .inline-breadcrumb > a { position: relative; } .inline-breadcrumb > a { margin-left: 0; margin-right: 0.8em; white-space: nowrap; } .inline-breadcrumb:before, .inline-breadcrumb > a:before { content: ''; } .inline-breadcrumb:after { position: absolute; /* outline: 1px dotted hsl(180, 80%, 80%); */ right: 0.1em; content: '\00BB'; /* Double guillement, right pointing */ } .inline-breadcrumb:hover:after { right: 0; } .colwrap:before, .colwrap:after, .wrapper:before, .wrapper:after { content: ' '; display: table; clear: both; } /** * .col is a generic column that defaults to 48% but that can be set to any % via the style attribute * it then gets forcibly overridden to 100% via a conservative media query. Use sparingly * '.col-1-2' means one column out a set of two equal columns * '.col-2-3' means one double width column in a set of three equal columns * '.col-N-N' elements should be stacked on mobile and floated above a certain viewport width, via media queries * see also '.col-full', a Storefront style */ .col-1-2, .col-1-3, .col-2-3, .calloutleft, .calloutright { /* width: 100%; */ /* float: none; */ /* margin-right: 0; */ } .col-1, .col-2, .col-3 { max-width: none; } /* .col-md-6 { width: 48%; float: left; overflow: hidden; } */ .BannerParallax .col-md-6 { overflow: visible; } .calloutright { /* margin-left: 0; */ } /** * GLOBAL MODIFIERS */ .color-default, div .color-default, .background-white .jumbotron-text-left { color: #6d6d6d; /* color: #333; */ } .white, .color-white { color: #fff; } .bg-white { background-color: #fff; } div .brand-orange { color: var(--title-color); /* color: #ff671b; */ } .bg-brand-orange { background-color: var(--title-color); /* background-color: #ff671b; */ } .brand-grey { color: var(--body-txt-color); /* color: #595f5f; */ } .bg-brand-grey { background-color: var(--body-txt-color); /* background-color: #595f5f; */ } .brand-dark-grey { color: var(--footer-bg-color); /* color: #333; */ } .bg-brand-dark-grey { background-color: var(--footer-bg-color); /* background-color: #333; */ } .block { display: block; } .div { margin-top: 0 !important; margin-bottom: 0 !important; } .inline { display: inline; } .inline-block { display: inline-block; } .flex { display: flex; } .center { /* outline: 1px dotted red; */ text-align: center; } .row.center { justify-content: center; } .full-width.center *, .jumbotron-text-center .video_lightbox_anchor_image { /* outline: 1px dotted green; */ margin-left: auto; margin-right: auto; } .center-vertically, /* .center-children-vertically > * :not(span) { */ .center-children-vertically > * { display: flex; flex-direction: column; justify-content: center; /* outline: 2px dotted green; */ } .feature { padding: 0 0 30px 0; } img.banner-center { display: block; margin-left: auto; margin-right: auto } .bold { font-weight: bold; } img.responsive, .responsive img { max-width: 100% !important; width: 100% !important; height: auto !important; } .italic { font-style: italic; } .normal { font-weight: normal; } .nowrap { white-space: nowrap; } .caps, .uppercase { text-transform: uppercase; } sub, .sub, sup, .sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup, .sup { top: -0.5em; } sub, .sub { bottom: -0.25em; } .vcard, .nobullets { list-style: none; } .visually-hidden { position: absolute; overflow: hidden; clip: rect(0,0,0,0); height: 1px; width: 1px; margin: -1px; padding: 0; border: 0; } ul.bullets { padding-left: 1.25em; list-style: disc; } ol.bullets { padding-left: 1.75em; list-style: initial; /* list-style: auto; */ } ol.bullets > li { padding-left: 0.5em; } .hidden, .stock { display: none; } .vcard, .vcard li, .nobullets li { margin-left: 0; padding-left: 0; } .vcard .tel .type:after { content: ':'; } /** * "More" & pagination links */ .custom-pagination.after { margin-top: 0.75em; } .custom-pagination li { display: inline; } .custom-pagination li.active a { font-weight: bold; text-decoration: none !important; } .custom-pagination li.ellipses { margin-right: 0.25em; } a.more, .more > a, .pagination-link > a { position: relative; } a.more, .more > a { margin-left: 0.75em; } .pagination-link.prev > a { margin-left: 0.5em; } a.more:before, .more > a:before, .pagination-link > a:before { position: absolute; display: inline-block; text-decoration: none !important; } a.more:before, .more > a:before { left: -0.75em; content: '\00BB'; /* Double guillemet, right pointing */ } a.more:hover:before, .more > a:hover:before { left: -0.65em; } .pagination-link.prev > a:before { left: -0.5em; } .pagination-link.prev > a:hover:before { left: -0.6em; } .pagination-link.first > a:before { left: -0.7em; } .pagination-link.first > a:hover:before { left: -0.8em; } a.more.left:before, .more.left > a:before, .pagination-link.first > a:before { content: '\00AB'; /* Double guillemet, left pointing */ } .pagination-link.prev > a:before { content: '\2039'; /* Single guillemet, left pointing */ } a.more.left:hover:before, .more.left > a:hover:before { left: -0.8em; } a.more.after, .more.after > a, .pagination-link.next > a, .pagination-link.last > a { margin-left: 0; margin-right: 0.55em; white-space: nowrap; } a.more.after:before, .more.after > a:before { content: ''; } a.more.after:after, .more.after > a:after, .pagination-link.next > a:after, .pagination-link.last > a:after { position: absolute; } a.more.after:after, .more.after > a:after { content: '\00BB'; /* Double guillemet, right pointing */ right: -0.75em; } a.more.after:hover:after, .more.after > a:hover:after { right: -0.85em; /* outline: 1px dotted red; */ } .pagination-link.next > a:after { content: '\203A'; /* Single guillemet, right pointing */ right: -0.55em; } .pagination-link.next > a:hover:after { right: -0.65em; /* outline: 1px dotted red; */ } .pagination-link.last > a:after { content: '\00BB'; /* Double guillemet, right pointing */ right: -0.65em; } .pagination-link.last > a:hover:after { right: -0.75em; /* outline: 1px dotted red; */ } a.more.standard.after:after, .more.standard.after > a:after { top: -1px; } a.skip-down[href^="#"], .skip-down a[href^="#"] { /* outline: 1px dotted green; */ padding-right: 1em; position: relative; } a.skip-down[href^="#"]:after, .skip-down a[href^="#"]:after { /* outline: 1px dotted red; */ position: absolute; content: '\2193'; /* down arrow */ top: -10%; right: 0; height: 100%; } a.skip-down[href^="#"]:hover:after, .skip-down a[href^="#"]:hover:after { top: -2%; /* outline: 1px solid blue !important; */ } dt { position: relative; } dt:target { background-color: hsl(0, 0%, 96%); } /* dt:target:after { position: absolute; right: 0; content: 'top'; font-weight: normal; font-style: inherit; font-size: 0.75rem; } */ a.backtotop { /* outline: 1px dotted green; */ margin-top: 2px; margin-left: 1em; padding-top: 0.25em; padding-left: 1em; position: relative; float: right; right: 1em; font-weight: normal; font-style: inherit; font-family: inherit; font-size: 0.9rem; text-decoration: none !important; } a.backtotop:hover { text-decoration: underline !important; } a.backtotop:before { position: absolute; content: '\2191'; /* up arrow */ top: 8%; left: 0; height: 100%; } a.backtotop:hover:before { top: 0; } .thin, ol.li-thin > li, ul.li-thin > li { margin-bottom: 0.75em; } .thinner, ol.li-thinner > li, ul.li-thinner > li { margin-bottom: 0.5em; } .thinnest, ol.li-thinnest > li, ul.li-thinnest > li { margin-bottom: 0.3em; } .margin-top-80 { margin-top: 80px; } .margin-top-40 { margin-top: 40px; } .margin-top-20 { margin-top: 20px; } .margin-top-10 { margin-top: 10px; } .margin-top-0 { margin-top: 0; } .margin-bottom-80 { margin-bottom: 80px; } .margin-bottom-40 { margin-bottom: 40px; } .margin-bottom-20 { margin-bottom: 20px; } .margin-bottom-10 { margin-bottom: 10px; } .margin-bottom-0 { margin-bottom: 0; } .padding-top-80 { padding-top: 80px; } .padding-top-40 { padding-top: 40px; } .padding-top-20 { padding-top: 20px; } .padding-top-10 { padding-top: 10px; } .padding-bottom-80, .bottom-padding-80 { padding-bottom: 80px; } .padding-bottom-40, .bottom-padding-40 { padding-bottom: 40px; } .padding-bottom-20, .bottom-padding-20 { padding-bottom: 20px; } .padding-bottom-10, .bottom-padding-10 { padding-bottom: 10px; } .background-white { background-color: #ffffff; } .background-black { background-color: #000000; } .background-orange { background-color: #ff6718; } .background-blue { background-color: #165f8c; } /** * FONT SIZE ADJUSTMENTS * Ensure all elements are within reasonable bounds */ .Container_Overflow:not(.bannerSolutionsProductsGridContainer) .bodyBannerSolutionsProducts { font-size: max(12px, 3vw) !important; line-height: 1.1; } .Container_Overflow .subTitleCamelia, .Container_Overflow .subTitleCarruselSmarter { font-size: max(14px, 3vw) !important; letter-spacing: -0.1px; } .suscribirse .txtPrivacyPolicy { font-size: max(12px, 1.1vw); } .Container_Overflow .info_OpenSans_Bold { font-size: max(12px, 1.7em); } .Container_Overflow .watchVideo { font-size: max(12px, 1.5em); } .Container_Overflow .subTitleForma_Camelia { font-size: max(16px, 1.4vw); } .learnMoreBanner, .learnMoreBannerCharge { font-size: max(12px, 1vw) !important; /* font-size: max(12px, 3vw) !important; */ /* font-size: clamp(16px, 3vw, 20px) !important; */ } div[id^="carousel"] .carousel-item .divHeightCarrusel { /* border: 2px solid pink; */ min-height: max-content; height: 460px; } /** * MEDIA QUERIES */ @media (min-width: 320px) { .jumbotron-image-left { display: block; background-repeat: no-repeat; background-size: cover; background-position: center; padding-top: 50%; padding-bottom: 50%; } .jumbotron-text-left { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: left; } .jumbotron-text-left button { display: inline-block; width: 12em; outline: 1px solid #ff671b; padding: 2px 1.5em; color: #ff671b; background-color: transparent; text-align: center; cursor: pointer; } .jumbotron-text-left button:hover { background-color: #cc0000; } h2.reversed, h3.reversed, .h-reversed > h2, .h-reversed > h3, h6, h7 { font-size: 1.5em !important; line-height: 1.0 !important; margin: 0px 0px 0px 0px !important; text-align: left; padding: 6px 8px 8px 8px; } h3.reversed, .h-reversed > h3, h7 { font-family: 'Camelia' !important; font-size: 1em !important; line-height: 1.0 !important; margin: 0px 0px 0px 0px !important; text-transform: lowercase; text-align:left; } .wrapper .jumbotron-text-left .deck { font-size: 1.1em; } div[id^="carousel"] .carousel-item .divHeightCarrusel { /* border: 2px solid green; */ height: calc(84vw + 220px); /* aspect-ratio: 1 / 1.2; */ } } @media only screen and (max-width: 47.9375rem) { .Container_Overflow .titleCamelia { letter-spacing: 0; } .Container_Overflow #infoSecurity3 { padding-left: 0.75rem; padding-right: 0.75rem; } .Container_Overflow .subTitleForma_Camelia { font-size: max(12px, 3.5vw); } .suscribirse .txtPrivacyPolicy { font-size: max(12px, 2vw); } .Container_Overflow .T16-Size, .Container_Overflow .titleBannerReference { font-size: max(12px, 2.5vw) !important; } .Container_Overflow .infoCarruselSmarter, .Container_Overflow .info_Camelia_Bold, .Container_Overflow .info_OpenSans_Bold { font-size: max(12px, 2.7vw) !important; } .Container_Overflow .bodyBannerSolutionsProducts, .Container_Overflow .info_OpenSans { font-size: max(12px, 3vw) !important; } .Container_Overflow h3.card-title { font-size: max(1.1em, 3vw) !important; } .Container_Overflow #headerCorporate h2, .Container_Overflow #headerCorporate, .Container_Overflow .subTitleBgOpenSans { font-size: min(26px, 2rem) !important; } #bannerProductListiMagSafe .titleGoboldRegular { font-size: min(48px, 9.2vw) !important; } #bannerProductListiMagSafe, .row.imgBannerListings[id^="bannerProductListiBack"], .row.imgBannerListings[id^="bannerProductListiPad"], .row.imgBannerListings[id^="bannerProductListiSurface"] { min-height: 27vw; } #bannerProductListiMagSafe h2 { display: flex; flex-direction: column; justify-content: center; } /* bannerProductListiSurfaceGo bannerProductListiSurfaceLaptop bannerProductListiSurfacePro bannerProductListiPad bannerProductListiPadAir bannerProductListiPadPro */ #bannerProductListiMagSafe .subTitleGoboldRegular, .row.imgBannerListings[id^="bannerProductListiBack"] .subTitleGoboldRegular, .row.imgBannerListings[id^="bannerProductListiPad"] .subTitleGoboldRegular, .row.imgBannerListings[id^="bannerProductListiSurface"] .subTitleGoboldRegular { font-size: min(28px, 5vw) !important; margin-bottom: 0 !important; } .row.imgBannerListings[id^="bannerProductListiBack"] .subTitleGoboldRegular { /* outline: 2px solid green; */ } /* div[id^="carousel"] .carousel-item { border: 2px solid green; min-height: 530px; } */ } @media only screen and (max-width: 767px) { .home #content > .col-full { margin-left: 0; margin-right: 0; } .rowSuscribirse h2 { font-size: 2.8vw; } .page-corporate .imgConfidence, .page-corporate-landing-page .imgConfidence { /* outline: 2px dotted green; */ margin-top: 15%; } .page-corporate .section03_text_01 .info_OpenSans_Bold, .page-corporate-landing-page .section03_text_01 .info_OpenSans_Bold { /* outline: 1px dotted green; */ padding-bottom: 10%; } .page-corporate #infoBusinessSolution, .page-corporate-landing-page #infoBusinessSolution { margin-top: 3%; } .page-smarter .titleBannerReference, .page-smarter .titleBannerReference + .info_Camelia_Bold, .page-smarter-landing-page .titleBannerReference, .page-smarter-landing-page .titleBannerReference + .info_Camelia_Bold { line-height: 1.1; } .page-smarter .titleBannerReference, .page-smarter-landing-page .titleBannerReference { font-size: max(12px, 3.5vw) !important; /* font-size: 3.5vw !important; */ } .page-smarter .titleBannerReference + .info_Camelia_Bold, .page-smarter-landing-page .titleBannerReference + .info_Camelia_Bold { font-size: max(12px, 1.25vw) !important; /* font-size: max(12px, 3.8vw) !important; */ /* font-size: 3.8vw !important; */ } .Container_Overflow .watchVideo { font-size: max(12px, 3vw) !important; } #CareForSchoolTools2 { height: 130vw; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) and (-webkit-min-device-pixel-ratio: 2) { .suscribirse .divSubmit { display: block !important; } } /** * Prevent H2 from being offset to the left at intermediate viewport widths */ @media (min-width: 768px) and (max-width: 1200px) { .single-product .woocommerce-Tabs-panel--description .headline h2 { /* outline: 1px dotted green; */ margin-left: 49.5vw; } } @media only screen and (min-width: 768px) { .navbar > .navbar-brand { /* outline: 2px solid hsl(120, 100%, 40%); */ padding-left: 0.5rem; padding-right: 0.5rem; } div[id^="carousel"].carousel .divHeightCarrusel { /* border: 2px solid blue !important; */ height: calc(53vw + 100px); } #CareForSchoolTools2 { height: 45vw; } .wp-signup-container, .wp-activate-container { /* outline: 1px solid green; */ max-width: 60em; margin: 1.5rem auto 2rem auto !important; padding: 0 2.5em; box-sizing: content-box; } .woocommerce-active .site-header .site-header-cart, .woocommerce-active .site-header .site-search { float: left; } .woocommerce-active .site-header .site-header-cart { padding-top: 17px; } .woocommerce-active .site-header-cart .cart-contents { padding: 0; min-width: 168px; } .site-header-cart .cart-contents::after { padding-left: 2px; } .woocommerce-active .site-header-cart .widget_shopping_cart { width: 150%; } .woocommerce-active .site-header .site-search { width: 100%; } /** * Ensure list items on each row are of equal height */ .products.columns-3, .products.columns-4 { display: flex; align-items: stretch; flex-wrap: wrap; margin-bottom: 1rem; } .woocommerce .site-main ul.products.columns-3 li.product, .woocommerce .site-main ul.products.columns-4 li.product { margin-bottom: 4px; } .woocommerce .site-main ul.products.columns-4 li.product { width: 24%; } .woocommerce .site-main ul.products.columns-3 li.product { width: 32%; } .product_title > .collection, .woocommerce-loop-product__title > .collection { font-size: 24px !important; font-size: clamp(24px, 3vw, 3vw) !important; } .products.columns-3 .button, .products.columns-4 .button, a.btnOrg { font-size: clamp(14px, 0.85vw, 20px); border-radius: 0.25em; } .products.columns-3 .button, .products.columns-4 .button, .site-content a.btnOrg { margin-top: 3%; } .callout-shop-buttons { display: flex; } .callout-shop-buttons > div { /* display: flex; */ padding: 1em 1px; min-width: 12em !important; flex: 0; } .callout-shop-buttons > div:nth-of-type(1), .callout-shop-buttons > div:last-child { background-color: #333; flex: 1; width: inherit; } .callout-shop-buttons > div:nth-of-type(1) { justify-content: flex-end; } .callout-shop-buttons > div:last-child { justify-content: flex-start; } .callout-shop-now-offers > div { height: 16em; } /** * Enable full width div inside content area for e.g. full width hero images */ #main > .product, #main .woocommerce-tabs, #main .woocommerce-Tabs-panel, #main .woocommerce-Tabs-panel div { /* outline: 2px dotted green; */ overflow: visible !important; } .single-product .woocommerce-tabs ul.tabs, .single-product.storefront-full-width-content .woocommerce-tabs ul.tabs { display: none; } .single-product .woocommerce-tabs .panel, .single-product.storefront-full-width-content .woocommerce-tabs .panel { width: 100%; } .single-product .woocommerce-Tabs-panel--description > .full-width, .single-product .woocommerce-Tabs-panel--description .headline { /* outline: 2px solid red !important; */ margin-left: -49.5vw; } .single-product .woocommerce-Tabs-panel--description .headline { padding-left: 2vw; padding-right: 2vw; } .single-product.right-sidebar .content-area { /* outline: 1px dotted blue; */ width: 100%; } .single-product.right-sidebar div.product .wpgs--with-images { /* outline: 1px dotted red; */ width: 70%; max-width: 555px; /* width: 40%; */ /* max-width: 365px; */ margin-left: 5%; margin-right: 3%; } .single-product.right-sidebar div.product .entry-summary { /* outline: 1px dotted green; */ float: left; width: 50%; } .single-product.right-sidebar .widget-area { /* outline: 1px solid red; */ display: none; } /** * 12/23/22 * Fix display of product gallery & entry summary */ .storefront-full-width-content.single-product div.product .woocommerce-product-gallery, .single-product.right-sidebar div.product .woocommerce-product-gallery.wpgs--with-images { width: 70%; max-width: 555px; margin-left: 5%; margin-right: 3%; } .storefront-full-width-content.single-product.right-sidebar div.product .entry-summary { float: left; } .products.columns-3 .woocommerce-loop-product__title > .collection { font-size: clamp(24px, 2.4vw, 40px) !important; } .jumbotron-image-left { padding-top: 10%; padding-bottom: 40%; } .jumbotron-text-left { color: white; text-align: center; } .jumbotron-text-left button:hover { background-color: #cc0000; color: white; } h2.reversed, h3.reversed, .h-reversed > h2, .h-reversed > h3, h6 { font-size: 3em !important; line-height: 1.0 !important; margin: 0px 0px 0px 0px !important; text-align: center; padding: 8px 10px 10px 10px; } h3.reversed, .h-reversed > h3, h7 { font-size: 2em !important; line-height: 1.0 !important; margin: 0px 0px 0px 0px !important; text-transform: lowercase; text-align: center; } .wrapper .jumbotron-text-left .deck { font-size: 1.75em; text-align: left; } .feature-text h3 { margin-top: 0; } .divSubmit { display: grid !important; grid-template-columns: none; } [class*="banner" i] .titleGoboldRegular, .scrollmagic-pin-spacer .titleGoboldRegular, [class*="banner" i] .titleCamelia, .scrollmagic-pin-spacer .titleCamelia, [class*="banner" i] .subTitleGoboldRegular, .scrollmagic-pin-spacer .subTitleGoboldRegular, [class*="banner" i] .subTitleCamelia:not(.subTitlePowerHLP), .scrollmagic-pin-spacer .subTitleCamelia, .carousel .subTitleCamelia, .page-corporate .subTitleCamelia, .page-education .subTitleCamelia, .corporate-landing-page .subTitleCamelia, .education-landing-page .subTitleCamelia { margin-top: 0; margin-bottom: 0.5rem !important; margin-left: 0 !important; font-weight: 500; line-height: 1.3; } [class*="banner" i] .titleCamelia, .scrollmagic-pin-spacer .titleCamelia { line-height: 1; } [class*="banner" i] .subTitlePowerHLP, [class*="banner" i] .ml-Titles .block, .ptSection .ml-Titles .block { margin-left: 0 !important; } .home [class*="banner" i] .subTitleCamelia, /* [class*="banner" i] .mt-Titles */ [class*="banner"] .ml-Titles { margin-left: 3.5% !important; } .template-bxl-hlp .info_OpenSans, .template-bxl-hlp .mb-parrafo { margin-left: 1%; } [class*="banner" i] .subTitleGoboldRegular:not(.mbListingIpad), .scrollmagic-pin-spacer .subTitleGoboldRegular { margin-bottom: 2vw !important; } .titleBannerSolutionsProducts > .subTitleBannerSolutionsProducts { margin-bottom: 10vw; } .heightRowSolutionsProductsSchoolPowerkick .titleBannerSolutionsProducts > .subTitleBannerSolutionsProducts { margin-bottom: 5vw; } .bannerSolutionsProductsGridContainer .learnMoreBanner, .template-bxl-hlp .learnMoreBanner, .template-bxl-hlp .learnMoreBannerCharge, .home .learnMoreBannerCharge { display: table; } .home .learnMoreBanner, .home .btnOrg, .home .titleGoboldRegular, .home .subTitleGoboldRegular { margin-left: 2.5% !important; } .home .titleBgCamelia, .home .subTitleCamelia { margin-left: 3.5% !important; } .home .titleBgCamelia { /* font-size: 4vw !important; */ } .home [class*="banner" i] .subTitleGoboldRegular, .home [class*="banner" i] .subTitleCamelia, .page-bags .subTitleCamelia, .page-bags .subTitleCamelia, .page-bag-hlp-landing-page .subTitleCamelia { margin-bottom: 5vw !important; line-height: 1; } .home .bodyBannerSolutionsProducts { font-size: max(12px, 1.2vw); /* font-size: 1.2vw; */ } .template-bxl .Container_Overflow:not(.bannerSolutionsProductsGridContainer) .bodyBannerSolutionsProducts { font-size: max(12px, 1.2vw) !important; } /** * Generic containers */ .equal-height-children { display: flex; } .equal-height-children > * { flex-grow: 1; /* outline: 1px solid red; */ } .equal-width-children > .col-1-3 { max-width: 33.33333%; } .full-width { outline: none !important; width: 99vw; position: relative; left: 50%; right: 50%; margin-left: -49.5vw; margin-right: -49.5vw; } .col, .col-1-2, .col-1-3, .col-2-3, .col-md-6, .calloutleft, .calloutright { width: 48%; float: left; /* overflow: hidden; */ } .col, .col-1-2, .col-1-3, .col-2-3, .calloutleft, .calloutright { width: 48%; float: left; overflow: hidden; } .col, .col-1-3, .col-2-3 { padding-right: 25px; } .col-1-3, .col-2-3, .calloutleft, .calloutright { width: 33.333333%; } .col-2-3 { width: 66.666666%; } .col-1-2:first-of-type { margin-right: 4%; } .col:last-child { padding-right: 0; } .calloutleft { margin-right: 25px; } .calloutright { float: right; margin-left: 25px; } } /** * 48 rem is 768 pixels */ @media only screen and (min-width: 48rem) { .Container_Overflow .info_Camelia_Bold, .Container_Overflow .info_OpenSans_Bold { font-size: max(12px, 1.25vw) !important; } .Container_Overflow .subTitleCamelia { font-size: 2.085vw !important; } .Container_Overflow h3.card-title { font-size: max(1.1em, 2.085vw) !important; } } @media (min-width: 960px) { .single-product .woocommerce-Tabs-panel--description > .full-width, .single-product .woocommerce-Tabs-panel--description .headline { /* outline: 2px solid green !important; */ margin-left: -49.5vw; } .jumbotron-image-left { background-position: left; } .jumbotron-text-left { left: 30%; } h2.reversed, h3.reversed, .h-reversed > h2, .h-reversed > h3, h6 { font-size: 3em !important; line-height: 1.0 !important; margin: 0px 0px 0px 0px !important; text-align:left; } h3.reversed, .h-reversed > h3, h7 { font-size: 2em !important; line-height: 1.0 !important; margin: 0px 0px 0px 0px !important; text-transform: lowercase; text-align:left; } } /** * Misc hover state usability fixes for Boxel nav elements at tablet/phone viewports */ @media screen and (max-width: 992px) { .template-bxl-hlp .subMenuNoSticky .navbar-toggler:hover { background-color: var(--subTitle2-color); } .template-bxl-hlp .subMenuNoSticky .nav-item { /* outline: 1px dotted blue; */ margin-bottom: 1rem; } .template-bxl-hlp .subMenuNoSticky .linkNavItemPowerHLP { /* outline: 1px dotted red; */ margin-bottom: 0; } .template-bxl-hlp .subMenuNoSticky .linkNavItemPowerHLP p { /* outline: 1px dotted red; */ margin-bottom: 0.5em; } .template-bxl-hlp .linkNavItemPowerHLP:hover { cursor: pointer; background-color: var(--submenu-bg-color); background-color: hsl(0, 0%, 97%); } .template-bxl-hlp .ulNavItems .ListElement { padding-bottom: 0; } .template-bxl-hlp .elementListNavItemPowerHLP { margin: 0; display: block; padding-top: 4px; padding-bottom: 4px; } .template-bxl-hlp .elementListNavItemPowerHLP:focus, .template-bxl-hlp .elementListNavItemPowerHLP:hover, .template-bxl-hlp .elementListNavItemPowerHLP:active { background-color: var(--submenu-bg-color); background-color: hsl(0, 0%, 96%); } .template-bxl-hlp .subMenuNoSticky > .navbar-collapse > .navbar-nav > .nav-item .navbar-collapse.show { /* outline: 1px dotted purple; */ margin-bottom: 0.5em; } .template-bxl-hlp .subMenuNoSticky > .navbar-collapse > .navbar-nav > .nav-item:nth-last-child(1) .navbar-collapse.show { margin-bottom: 1em; } .template-bxl-hlp .subMenuNoSticky > .navbar-collapse > .navbar-nav > .nav-item:nth-last-child(1) .navbar-collapse.show { /* outline: 1px dotted green; */ } /* .template-bxl-hlp .ulNavItems .ListElement { outline: 1px dotted pink; } .template-bxl-hlp .elementListNavItemPowerHLP { outline: 1px dotted purple; } */ } /* -------- Override Bootstrap -------- */ @media (min-width: 992px) { .primary-navigation { display: flex; align-items: center; justify-content: center; width: 100%; } .navbar > .navbar-brand { /* outline: 2px solid hsl(240, 100%, 40%); */ padding-left: 0; padding-right: 0; } .navbar-expand-lg .navbar-collapse { justify-content: space-between; } .page-bags #collapsingNavbarLg { padding-bottom: 0.5rem; } .header-navigation ul.menu > li > a, .header-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li > a, .main-navigation ul.nav-menu > li > a { padding: 1em; font-size: 0.79em; } .woocommerce-active .site-header .site-search { width: 37%; /* width: auto; */ margin-left: 72px; max-height: 32px; } .woocommerce-active .site-header .site-search .dgwt-wcas-search-wrapp input[type=search] { width: 150%; padding: 10px 10px 10px 44px; } .woocommerce-active .site-search .dgwt-wcas-search-wrapp form::before { position: absolute; top: 5px; /* top: 8px; */ left: 6px; width: 31px; /* width: 21px; */ height: 28px; /* height: 21px; */ content: ''; background-image: url('/wp-content/themes/stmgoods/images/STM_STM_Search.svg'); background-repeat: no-repeat; background-size: 69%; background-position-x: 6px; background-position-y: 3px; /* outline: 1px solid green; */ } .site-header .site-search.input-is-focused { height: 32px; } .woocommerce-active .site-header .site-search.input-not-focused .dgwt-wcas-search-wrapp input[type=search] { cursor: pointer; } .woocommerce-active .site-header .site-search.input-is-focused .dgwt-wcas-search-wrapp input[type=search] { padding-left: 9px; } .woocommerce-active .site-header .site-search, .woocommerce-active .site-header .site-search.input-is-focused { width: 50%; margin: 0.5em; margin-right: 0; max-height: inherit; float: right; overflow: hidden; } .woocommerce-active .site-header .site-search.input-is-focused input[type=search] { width: 100%; } .woocommerce-active .site-header .site-search.input-not-focused { margin-left: 24px; max-width: 48px; } .woocommerce-active .site-header .site-search.input-not-focused input[type=search] { padding-left: 48px; } .header-navigation .site-search .dgwt-wcas-search-wrapp form input[type="search"] { background-color: transparent; padding-left: 0.25rem; } .header-navigation .site-search.input-is-focused .dgwt-wcas-search-wrapp form input[type="search"] { background-color: #fff; } #divShoppinCart, #divShoppingCartMobile, #divShoppingCartDesktop { margin-left: 0; } .page-tablet-protection .itemImageSTM1, .page-tablet-protection .itemImageSTM2, .page-tablet-protection .itemImageSTM_Collection, .page-tablet-protection-hlp-landing-page .itemImageSTM1, .page-tablet-protection-hlp-landing-page .itemImageSTM2, .page-tablet-protection-hlp-landing-page .itemImageSTM_Collection { /* outline: 1px solid green; */ } .page-tablet-protection .itemImageSTM1, .env-staging.page-tablet-protection-hlp-landing-page .itemImageSTM1 { padding-left: 21vw; } .page-tablet-protection .itemImageSTM2, .env-staging.page-tablet-protection-hlp-landing-page .itemImageSTM2 { padding-left: 44vw; } .page-tablet-protection .itemImageSTM_Collection, .env-staging.page-tablet-protection-hlp-landing-page .itemImageSTM_Collection { left: 65vw; } .page-tablet-protection .navSubItemsIPad, .page-tablet-protection .navSubItemsSurface, .env-staging.page-tablet-protection-hlp-landing-page .navSubItemsIPad, .env-staging.page-tablet-protection-hlp-landing-page .navSubItemsSurface { top: -140px; } .page-power-protection .navbar-nav.has-4-elements .ListElementTitle { line-height: 0.8; } .page-power-protection .navbar-nav.has-4-elements .ListElement { line-height: 1.2; } .page-power-protection .navbar-nav.has-4-elements .itemImageSTM1PowerHLP { /* outline: 1px dotted red; */ padding-left: 1vw; /* padding-left: 14vw; */ } .page-power-protection .navbar-nav.has-4-elements .itemImageSTM3_MagSafe { /* outline: 1px dotted green; */ padding-left: 25vw; /* padding-left: 38vw; */ } .page-power-protection .navbar-nav.has-4-elements .navSubItems3MagSafe { width: 160px; } .page-power-protection .navbar-nav.has-4-elements .itemImageSTM21_AirStrip { /* outline: 1px dotted blue; */ padding-left: 49vw; } .page-power-protection .navbar-nav.has-4-elements .itemImageSTM2PowerHLP { /* outline: 1px dotted pink; */ padding-left: 72vw; /* padding-left: 64vw; */ } } @media only screen and (min-width: 1200px) { .single-product .woocommerce-Tabs-panel--description > .full-width, .single-product .woocommerce-Tabs-panel--description .headline { /* outline: 2px solid yellow !important; */ margin-left: -49.5vw; margin-right: -49.5vw; width: 100vw; } .single-product .woocommerce-Tabs-panel--description .headline { padding-left: 3vw; padding-right: 3vw; } .single-product.right-sidebar div.product .wpgs--with-images { margin-left: 6%; } .single-product.right-sidebar div.product .entry-summary { width: 30%; /* width: 56%; */ } /** * 12/23/22 * Fix display of product gallery & entry summary */ .storefront-full-width-content.single-product.right-sidebar div.product .entry-summary { width: 30%; } .jumbotron-image-left { background-size: initial; background-position: center; } .jumbotron-text-left { text-align: left; transform: translate(-50%, -50%); color: white; } .feature { padding: 30px 0px; } .feature-text { margin: 10px 0px 0px 30px; } h2.reversed, h3.reversed, .h-reversed > h2, .h-reversed > h3, h6 { font-size: 6em !important; line-height: 1.0 !important; margin: 0px 0px 0px 0px !important; text-align: left; padding: 12px 20px 20px 20px; } h3.reversed, .h-reversed > h3, h7 { font-size: 3em !important; line-height: 1.0 !important; margin: 0px 0px 0px 0px !important; text-transform: lowercase; text-align:left; } .headline { margin: 40px 0px; outline: none !important; width: 99vw; position: relative; left: 50%; right: 50%; margin-left: -49.5vw; margin-right: -49.5vw; } #features h2, .woocommerce-tabs .panel .wrapper.headline > h2 { font-size: 3em; color: #ff671b; } .wrapper .jumbotron-text-left .deck { font-size: 2.5em; } .page-power-protection .navbar-nav.has-4-elements .itemImageSTM1PowerHLP { padding-left: 4vw; } .page-power-protection .navbar-nav.has-4-elements .itemImageSTM3_MagSafe { padding-left: 26vw; } .page-power-protection .navbar-nav.has-4-elements .navSubItems3MagSafe { width: 170px; } .page-power-protection .navbar-nav.has-4-elements .itemImageSTM21_AirStrip { padding-left: 48vw; } .page-power-protection .navbar-nav.has-4-elements .itemImageSTM2PowerHLP { padding-left: 70vw; } } @media (min-width: 1500px) { .single-product .woocommerce-Tabs-panel--description > .full-width, .single-product .woocommerce-Tabs-panel--description .headline { width: 101vw; margin-left: -50.0vw; margin-right: -50.0vw; } .product_title > .collection, .woocommerce-loop-product__title > .collection { font-size: clamp(36px, 2.6vw, 44px) !important; /* font-size: 54px !important; */ } .woocommerce-loop-product__title > .product-name-ori { font-size: clamp(16px, 0.8vw, 22px) !important; } .page-power-protection .navbar-nav.has-4-elements .itemImageSTM1PowerHLP { padding-left: 12vw; } .page-power-protection .navbar-nav.has-4-elements .itemImageSTM3_MagSafe { padding-left: 32vw; } .page-power-protection .navbar-nav.has-4-elements .itemImageSTM21_AirStrip { padding-left: 51vw; } .page-power-protection .navbar-nav.has-4-elements .itemImageSTM2PowerHLP { padding-left: 71vw; } } .halign-left, .halign-center, .halign-right, .valign-top, .valign-center, .valign-bottom { display: flex !important; } .halign-left { justify-content: flex-start !important; } .halign-center { justify-content: center !important; } .halign-right { justify-content: flex-end !important; } .valign-top { align-items: flex-start !important; } .valign-center { align-items: center !important; } .valign-bottom { align-items: flex-end !important; } .feature-image { border: 1px solid #343a40; } .list-flush { margin:0px 0px 0px 20px; } .jumbotron-text-left .button { outline: 1px solid #ff671b; padding: 6px 1.5em; width: 12em; background-color: transparent; color: #ff671b; text-align: center; } .jumbotron-text-left .button:hover { color: #ff671b; background-color: hsla(20, 100%, 55%, 0.1); } .jumbotron-text-center { text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; } .video { padding: 0px 0px; } .video-youtube { padding: 60px 0px; } .spec { font-weight: 700; font-family:'Camelia', sans-serif; } #specifications h2 { text-transform: lowercase; } .specifications h4 { font-size: 18px; text-transform: lowercase !important ; } .jumbotron-text-left, .jumbotron-text-center, .jumbotron-text-right { position: static; top: initial; left: initial; transform: none; width: 100%; margin:10%; } .jumbotron-image-left { padding-top: 0; padding-bottom: 0; height: 800px; max-height: 50vw; } /** * MISC FIXES */ /** * Missing icons */ .dashicons-visibility:before { font-family: dashicons; } .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before, .woocommerce-noreviews::before, p.no-comments::before { font-weight: 900; } /** * Script tag visible in a single AU product page * likely because of a script conflict */ .site-au.product-dux-plus-ipad-air-4th-gen .site-main script { outline: 1px dotted red; position: absolute; left: -10000px; height: 0; width: 0; } /** * TEST * Mobile nav bar fixes */ .template-bxl-hlp.page-bags-test .page > .entry-header, .template-bxl-hlp.page-bags-test-2 .page > .entry-header, .template-bxl-hlp.page-bags-test-3 .page > .entry-header { display: none; } @media only screen and (max-width: 991px) { /* .template-bxl-hlp .subMenuNoSticky.test li { outline: 1px dotted red; } .template-bxl-hlp .subMenuNoSticky.test figure { outline: 1px dotted green; } .template-bxl-hlp .subMenuNoSticky.test img { outline: 1px dotted blue; } .template-bxl-hlp .subMenuNoSticky.test figure > p { outline: 2px dotted blue; } .template-bxl-hlp .subMenuNoSticky.test figure > p::after { outline: 1px solid green; } .template-bxl-hlp.page-bags-test-2 .subMenuNoSticky.test figure > p, .template-bxl-hlp.page-bags-test-3 .subMenuNoSticky.test figure > p { outline: 1px dotted red; padding-left: 1.5rem; padding-right: 1.5rem; width: 240px; max-width: 90%; } .template-bxl-hlp.page-bags-test-2 .subMenuNoSticky.test figure > p::after, .template-bxl-hlp.page-bags-test-3 .subMenuNoSticky.test figure > p::after { outline: 1px dotted green; } */ .template-bxl-hlp .subMenuNoSticky.test { padding-top: 1rem; } .template-bxl-hlp .subMenuNoSticky.test img { width: 15%; height: auto; } .template-bxl-hlp .subMenuNoSticky.test figure { display: flex; justify-content: center; align-items: center; margin-bottom: 0; } .template-bxl-hlp .subMenuNoSticky.test figure > p { position: relative; overflow: hidden; width: 240px; max-width: 90%; margin-bottom: 0; padding: 0.5rem 1.5rem; } .template-bxl-hlp.page-bags-test .subMenuNoSticky.test figure > p { /* outline: 1px dotted red; */ width: 150px; } .template-bxl-hlp .subMenuNoSticky.test figure > p::after { position: absolute; top: -0.2rem; /* top: -0.25rem; */ right: 0; bottom: 0; width: 1.5rem; font-size: 1.5rem; line-height: 1; content: '\2304'; /* down arrow subnav indicator */ } .template-bxl-hlp .subMenuNoSticky.test figure[aria-expanded="true"] > p { background-color: #f5f5f5; } .template-bxl-hlp .subMenuNoSticky.test figure[aria-expanded="true"] > p::after { top: 0.65rem; content: '\2303'; /* up arrow subnav indicator */ } .template-bxl-hlp .subMenuNoSticky.test img:hover, .template-bxl-hlp .subMenuNoSticky.test figure > p:hover { cursor: pointer; } .template-bxl-hlp .subMenuNoSticky.test figure > p:hover { color: var(--body-txt-color); background-color: #ededed; /* background-color: #f5f5f5; */ } } @media (min-width: 992px) { .template-bxl-hlp .ImageSubMenu { width: inherit; /* height: 8rem; */ } .template-bxl-hlp .subMenuNoSticky.test { padding-top: 0; } .template-bxl-hlp .subMenuNoSticky.test #collapsingNavbarLg { padding-bottom: 0.5rem; } .template-bxl-hlp.page-tablet-protection .subMenuVW { /* height: 175px; */ } } /** * TEST 2 * Mobile nav bar fixes * Compact version - no thumbnails */ @media only screen and (max-width: 991px) { .template-bxl-hlp .subMenuNoSticky.test.nav-compact { padding-top: 0.75rem; padding-bottom: 0.75rem; } .template-bxl-hlp .subMenuNoSticky.test.nav-compact img { display: none; } .template-bxl-hlp.page-bags-test-3 .ulNavItems > .ListElementTitle, .template-bxl-hlp.page-bags-test-3 .ulNavItems > .ListElementTitle a { font-size: inherit; } .template-bxl-hlp.page-bags-test-3 .ulNavItems > .ListElementTitle { /* outline: 1px dotted red; */ /* font-weight: bold; */ padding-bottom: 5px; } .template-bxl-hlp.page-bags-test-3 .ulNavItems > .ListElementTitle a { /* outline: 1px dotted green; */ position: relative; padding-left: 1.5rem; padding-right: 1rem; color: var(--body-txt-color) !important; /* color: var(--dark-color) !important; */ /* too dark */ /* color: var(--subTitle-color) !important; */ /* too light */ font-size: 0.9em; } .template-bxl-hlp.page-bags-test-3 .ulNavItems > .ListElementTitle a::after { position: absolute; top: -4px; right: 0; width: 1rem; font-size: 1.5rem; line-height: 1; content: '\203A'; /* Single guillemet, right pointing */ } .template-bxl-hlp.page-bags-test-3 .ulNavItems > .ListElementTitle a:hover:after, .template-bxl-hlp.page-bags-test-3 .ulNavItems > .ListElementTitle a:active:after { right: -2px; /* outline: 1px dotted pink; */ } } /** * TEMPORARY */ .fixed .column-role { width: initial; } .gsap-marker-scroller-start[style], .gsap-marker-scroller-end[style], .gsap-marker-start[style], .gsap-marker-end[style] { outline: 1px solid blue !important; display: none !important; } /* .site-au #collapsingNavbarLg[style] { opacity: 1 !important; } */ /** * SIGNUP MODAL TESTS * * Login/Signup Popup ( Inline Form + Woocommerce ) * By XootiX */ .xoo-el-modal .xoo-el-inmodal { max-height: 450px; } .xoo-el-modal .xoo-el-sidebar { background-image: url('/wp-content/uploads/stmgoods-logo-block.png'); /* background-color: hsl(0deg 0% 93%); */ background-color: var(--subTitle2-color); background-color: var(--subTitle-color); background-color: var(--border-color-sm); background-size: 250px; } .xoo-el-modal .xoo-el-form-container ul.xoo-el-tabs li.xoo-el-login-tgr, .xoo-el-modal .xoo-el-section[data-section="login"] { display: none; } .xoo-el-modal .xoo-el-section[data-section="register"] { display: block; } .xoo-el-modal .xoo-el-form-container button.btn.button.xoo-el-action-btn { border-radius: 0.25em; border: var(--menu-bg-color); background-color: var(--menu-bg-color); color: var(--menu-txt-color) !important; font-family: "Open Sans", sans-serif !important; letter-spacing: 0px !important; padding: 0.4rem 1.5rem !important; } /** * YOTPO REVIEW HIGHLIGHTS ON PDP */ .woocommerce .yotpo-shoppers-say { margin-bottom: 20px; } .woocommerce .yotpo-shoppers-say .shoppers-say-title { margin-top: 35px; } /* .env-staging.woocommerce .variations_form.cart + .yotpo-shoppers-say { outline: 1px solid hsl(0, 30%, 80%); background-color: hsl(0, 50%, 97%); } .env-staging .woocommerce-product-gallery > .yotpo-shoppers-say { outline: 1px solid hsl(180, 30%, 80%); background-color: hsl(180, 50%, 97%); } */ .woocommerce .yotpo-shoppers-say .yotpo-regular-box { padding-top: 0; } .woocommerce .yotpo-shoppers-say .single-best-sentence .no-review-background { margin-top: 4px; padding-top: 5px; } /** * TEST (MINI CART) */ .subMenuNoSticky { z-index: 998; } .woocommerce-active .site-search:hover .dgwt-wcas-search-wrapp form::before { background-color: hsla(15, 100%, 78%, 0.5); } .woocommerce-active .site-header .site-header-cart { position: relative; padding-top: 0; width: auto; } .woocommerce-active .site-header-cart > li { position: relative; } /** * Z-index is 1 greater than z-index of .subMenuSticky (1000) */ .woocommerce-active .site-header-cart .widget_shopping_cart { background-color: var(--title-color); width: auto; top: 2px; /* left: -210px; */ position: absolute; z-index: 1001; /* z-index: 1; */ } .woocommerce-active .site-header-cart:hover .widget_shopping_cart, .woocommerce-active .site-header-cart.focus .widget_shopping_cart { display: block; left: -210px; /* max-width: 260px; */ } .woocommerce-active .site-header-cart .widget_shopping_cart .product_list_widget { height: auto; } .woocommerce-active .site-header-cart .widget_shopping_cart .buttons, .woocommerce-active .site-header-cart .widget_shopping_cart .total { background-color: transparent; } .woocommerce-active .site-header-cart .cart-contents { min-width: unset; /* width: 34px !important; */ margin: 3px 6px -2px -2px !important; height: 34px; padding: 4px 5px 4px 4px; } .site-header-cart .cart-contents::after { content: ''; float: right; background-image: url('/wp-content/themes/stmgoods/images/STM_STM_Cart.svg'); background-repeat: no-repeat; width: 25px; height: 25px; } .site-header .cart-contents:hover { background-color: var(--menu-txt-color-active); background-color: hsla(255,100%,100%,0.3); } .woocommerce-active .site-header-cart .widget_shopping_cart, .woocommerce-active .site-header .product_list_widget li .quantity { color: #fff; } .woocommerce-active .site-header-cart .widget_shopping_cart .product_list_widget li a.remove::before { color: var(--menu-txt-color-active); } .site-header-cart .widget_shopping_cart .woocommerce-mini-cart__empty-message { margin: 0 !important; line-height: 1.2; } .site-header-cart .widget_shopping_cart .woocommerce-mini-cart__empty-message:not(.stm_woocommerce-mini-cart__empty-message) { width: 235px; margin-right: 1.5em !important; padding: 1em; } .site-header-cart .widget_shopping_cart .woocommerce-mini-cart__empty-message a { display: block; padding: 1em; } .site-header-cart .widget_shopping_cart .woocommerce-mini-cart__empty-message a:active, .site-header-cart .widget_shopping_cart .woocommerce-mini-cart__empty-message a:focus, .site-header-cart .widget_shopping_cart .woocommerce-mini-cart__empty-message a:hover { color: #fff !important; background-color: var(--menu-txt-color-active); text-decoration: none !important; } .site-header-cart .widget_shopping_cart .woocommerce-mini-cart__empty-message a:active span, .site-header-cart .widget_shopping_cart .woocommerce-mini-cart__empty-message a:focus span, .site-header-cart .widget_shopping_cart .woocommerce-mini-cart__empty-message a:hover span { text-decoration: underline; } /** * Visually hide cart count bubble when it's empty * count-N class is injected by jQuery */ .site-header .cart-contents .woocommerce-Price-amount, .site-header .cart-contents .count { position: absolute; overflow: hidden; clip: rect(0, 0, 0, 0); width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; } /** * Show the count bubble only after it's been processed by jQuery * and if the number of items is > 0 */ .site-header .cart-contents .count.processed:not(.count-0) { clip: unset; margin: inherit; top: -0.9em; right: -1.3em; border-radius: 100%; min-width: 17px; height: 17px; color: #000; background-color: #fff; opacity: 1; font-family: "Open Sans", sans-serif; font-size: 13px; font-weight: bold; letter-spacing: 0; line-height: 1.4; text-indent: 5px; } .site-header .cart-contents .count.processed.count-gt-10 { background-color: hsl(20deg 100% 94%); border-radius: 0.5em; width: 1.9em; } .woocommerce-active .site-header-cart .widget_shopping_cart a.button:not(.checkout) { background-color: hsl(0deg 0% 45%); border-color: hsl(0deg 0% 45%); color: hsl(0deg 0% 45%); } .woocommerce-active .site-header-cart .widget_shopping_cart a.button:not(.checkout):active, .woocommerce-active .site-header-cart .widget_shopping_cart a.button:not(.checkout):focus, .woocommerce-active .site-header-cart .widget_shopping_cart a.button:not(.checkout):hover { background-color: hsl(0deg 0% 55%); border-color: hsl(0deg 0% 55%); color: hsl(0deg 0% 55%); } @media (min-width: 992px) { .site-header-cart .widget_shopping_cart .woocommerce-mini-cart__empty-message { width: 240px; /* width: 220px; */ } } @media (min-width: 1200px) { .navbar { padding-right: 10%; } } /** * MISC STYLES FOR WC MINI-CART * * At viewport widths up to 992px, only .header-cart-1 (the first one, green outline) is visible * * At viewport widths above 992px, only .header-cart-2 (the second one, green outline) is visible */ /* .wp-user-cdelaney .site-header .col-full { outline: 2px solid hsla(120, 100%, 40%, 0.9); } .wp-user-cdelaney .site-header .site-header-cart { outline: 2px solid hsla(60, 100%, 50%, 0.9); width: auto; } .wp-user-cdelaney.woocommerce-active .site-header-cart .cart-contents { outline: 1px solid hsla(180, 100%, 40%, 0.5);; } */ .woocommerce-active .site-header .cart-contents { display: block; } /* .header-cart-1 { outline: 2px solid green; } .header-cart-2 { outline: 2px solid blue; } */ .woocommerce-active .site-header-cart .widget_shopping_cart .product_list_widget li a.remove::before { /* border: 1px dotted white; */ color: var(--menu-txt-color-active); } .woocommerce-active .site-header-cart .widget_shopping_cart .product_list_widget li a.remove:active, .woocommerce-active .site-header-cart .widget_shopping_cart .product_list_widget li a.remove:focus, .woocommerce-active .site-header-cart .widget_shopping_cart .product_list_widget li a.remove:hover { color: #fff; background-color: var(--menu-txt-color-active); background-color: hsla(255,100%,100%,0.2); } .woocommerce-active .site-header-cart .widget_shopping_cart .product_list_widget li a.remove:active::before, .woocommerce-active .site-header-cart .widget_shopping_cart .product_list_widget li a.remove:focus::before, .woocommerce-active .site-header-cart .widget_shopping_cart .product_list_widget li a.remove:hover::before { color: var(--menu-txt-color); /* background-color: purple !important; */ } @media screen and (max-width: 760px) { .header-cart-2 { /* outline: dotted hsla(240, 100%, 50%, 0.1); */ } .header-cart-2 .cart-contents { /* outline: 2px dotted green; */ position: relative; margin-left: 8px; width: 44px; /* width: 34px; */ height: 44px; /* height: 34px; */ padding: 0 !important; } .header-cart-2 .cart-contents:after { /* outline: 1px solid yellow; */ display: block; content: ''; background-image: url('/wp-content/themes/stmgoods/images/STM_STM_Cart.svg'); background-repeat: no-repeat; background-size: 70%; width: 44px; /* width: 32px; */ height: 44px; /* height: 32px; */ margin: 6px 4px; } .woocommerce-active .site-header-cart:hover .widget_shopping_cart, .woocommerce-active .site-header-cart.focus .widget_shopping_cart { left: 0; display: block; left: -240px; } .header-cart-2 .cart-contents .count.processed:not(.count-0) { top: -0.4em; } .woocommerce-active .site-header-cart .woocommerce-mini-cart { /* outline: 1px dotted hsla(120, 100%, 25%, 0.2); */ max-width: 440px; padding-left: 4px; } .woocommerce-active .site-header-cart .widget_shopping_cart p.total, .woocommerce-active .site-header-cart .widget_shopping_cart p.buttons, .woocommerce-active .site-header-cart .widget_shopping_cart li { padding-left: 55px; max-width: 420px; } .woocommerce-active .site-header-cart .widget_shopping_cart .product_list_widget li a.remove { width: 44px; height: 44px; left: 4px; } .woocommerce-active .site-header-cart .widget_shopping_cart .product_list_widget li a.remove::before { font-size: 1.1em; line-height: 2.4; } } .header-cart-1 { /* display: none !important; */ } .header-cart-2 { /* display: none !important; */ } /* @media screen and (min-width: 992px) { .header-cart-1 { display: none !important; } .header-cart-2 { display: block !important; } } */ /** * BOLT CHECKOUT */ #site-header-cart #bolt-minicart, #site-header-cart-mobile #bolt-minicart, #site-header-cart-desktop #bolt-minicart { padding-left: 1.41575em; padding-right: 1.41575em; } #site-header-cart .bolt-checkout-button[style], #site-header-cart-mobile .bolt-checkout-button[style], #site-header-cart-desktop .bolt-checkout-button[style] { /* outline: 2px solid red; */ width: unset !important; /* width: 85% !important; */ /* width: 90% !important; */ margin: 0 auto !important; position: static !important; display: block !important; /* border-left: 8px solid transparent; */ /* border-right: 8px solid transparent; */ } #site-header-cart .bolt-checkout-button [data-tid="bolt-checkout-button"], #site-header-cart-mobile .bolt-checkout-button [data-tid="bolt-checkout-button"], #site-header-cart-desktop .bolt-checkout-button [data-tid="bolt-checkout-button"] { /* outline: 1px solid red; */ height: 40px !important; /* height: 36px !important; */ background-color: hsl(0, 0%, 25%) !important; /* background-color: hsl(0, 0%, 33%) !important; */ } #site-header-cart .bolt-checkout-button [data-tid="bolt-checkout-button"]:active, #site-header-cart .bolt-checkout-button [data-tid="bolt-checkout-button"]:focus, #site-header-cart .bolt-checkout-button [data-tid="bolt-checkout-button"]:hover, #site-header-cart-mobile .bolt-checkout-button [data-tid="bolt-checkout-button"]:active, #site-header-cart-mobile .bolt-checkout-button [data-tid="bolt-checkout-button"]:focus, #site-header-cart-mobile .bolt-checkout-button [data-tid="bolt-checkout-button"]:hover, #site-header-cart-desktop .bolt-checkout-button [data-tid="bolt-checkout-button"]:active, #site-header-cart-desktop .bolt-checkout-button [data-tid="bolt-checkout-button"]:focus, #site-header-cart-desktop .bolt-checkout-button [data-tid="bolt-checkout-button"]:hover { background-color: hsl(0, 0%, 10%) !important; /* background-color: hsl(0, 0%, 23%) !important; */ } #site-header-cart .bolt-checkout-button [data-tid="bolt-checkout-button-text"], #site-header-cart-mobile .bolt-checkout-button [data-tid="bolt-checkout-button-text"], #site-header-cart-desktop .bolt-checkout-button [data-tid="bolt-checkout-button-text"] { /* outline: 1px solid green; */ font-size: 14px !important; } .single-product .bolt-page-checkout-button [data-tid="bolt-checkout-button"] ~ div:not([class]), .woocommerce-cart .bolt-checkout-button [data-tid="bolt-checkout-button"] ~ div:not([class]), #bolt-minicart ~ p:not([class]) { height: 40px !important; margin-top: 12px !important; background-image: url("/wp-content/themes/stmgoods/images/stm-bolt-checkout-cards.png") !important; background-repeat: no-repeat !important; background-size: 75% !important; background-position-x: 50% !important; } #bolt-minicart ~ p:not([class]) { height: 24px !important; } /** * Klaviyo signup form */ .suscribirse .rowSuscribirse h2 { margin-bottom: 0.5em; } .klaviyo-form form > [class*="kl-private-reset-css-"][style] { /* outline: 1px dotted orange !important; */ } .klaviyo-form form > .needsclick[style] { /* outline: 1px dotted blue; */ min-height: 100px !important; } .klaviyo-form [data-testid="form-component"].needsclick[style] { /* outline: 1px dotted silver; */ padding: 6px 10px 6px 0px !important; /* padding: 16px 10px 16px 0px !important; */ } .klaviyo-form [data-testid="form-component"] button[style] { /* outline: 1px dotted red; */ color: #fff !important; background-color: var(--menu-bg-color) !important; } .klaviyo-form [data-testid="form-component"] button:active[style], .klaviyo-form [data-testid="form-component"] button:focus[style], .klaviyo-form [data-testid="form-component"] button:hover[style] { /* outline: 1px dotted red; */ background-color: var(--btn-bg-sm-hv) !important; } /** * Try to style confirmation message in pale green * Doesn't currently work as basic CSS identifiers are too broad * The safest event handler is "focusout", so testing for presence of confirmation text, * then adding "klaviyo-form-success" as a class does the trick */ .klaviyo-form-success form > [class*="kl-private-reset-css-"][style] { border: 1px solid hsl(120, 40%, 55%); background-color: hsl(120, 70%, 95%); margin-top: 1em !important; margin-bottom: 1em !important; } .klaviyo-form-success form > [class*="kl-private-reset-css-"] *, .klaviyo-form-success form > [class*="kl-private-reset-css-"] *[style] { color: hsl(120deg 50% 20%) !important; } /* @media screen and (min-width: 760px) and (max-width: 991px) { .header-cart-2 { display: none !important; } } */ .product_title > .product-name-ori .variation, .woocommerce-loop-product__title > .product-name-ori .variation { display: block; margin-bottom: 4px; font-size: clamp(16px, 1.2vw, 20px); } /** * Add "Designed for Microsoft Surface" to Surface product category page elements */ .products > li.product_cat-microsoft-surface-cases, .products > li.product_cat-surface-screen-protector, .products > li.product_cat-education-surface { /* outline: 1px solid green; */ } .products > li.product_cat-microsoft-surface-cases::after, .products > li.product_cat-surface-screen-protector::after, .products > li.product_cat-education-surface::after, .single-product[class*="product-surface-"] .woocommerce-product-gallery:after, .single-product[class*="product-microsoft-surface"] .woocommerce-product-gallery:after, .single-product[class*="product-dux-for-surface"] .woocommerce-product-gallery:after, .single-product[class*="product-dux-shell-surface"] .woocommerce-product-gallery:after, .single-product[class*="product-glass-screen-protector-surface"] .woocommerce-product-gallery:after { /* outline: 1px dotted red; */ position: absolute; content: ''; background-image: url('/wp-content/uploads/microsoft-surface-logo-300x148.png'); background-repeat: no-repeat; background-size: 100%; background-position-x: 100%; width: 91px; height: 50px; top: 6px; right: 6px; } .single-product[class*="product-surface-"] .woocommerce-product-gallery:after, .single-product[class*="product-microsoft-surface"] .woocommerce-product-gallery:after, .single-product[class*="product-dux-for-surface"] .woocommerce-product-gallery:after, .single-product[class*="product-dux-shell-surface"] .woocommerce-product-gallery:after, .single-product[class*="product-glass-screen-protector-surface"] .woocommerce-product-gallery:after { width: 106px; height: 54px; top: 10px; right: 10px; } /** * Add to Cart buttons */ .products .button-wrapper, .products .button-wrap { display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; } .products .button-wrapper { /* outline: 1px dotted blue; */ gap: 0 6px; } .products .button-wrap { /* outline: 1px dotted green; */ flex-grow: 0; max-width: 50% !important; } .products .button-wrap .button, .products .button-wrap .added_to_cart { /* outline: 1px dotted red; */ margin-top: 0; margin-bottom: 4px !important; padding: .4rem 1.5rem !important; white-space: nowrap; } .products .button-wrap .added_to_cart { margin-left: 4px; margin-right: 4px; } .products.columns-3 .button-wrapper .button, .products.columns-3 .button-wrapper .added_to_cart, .products.columns-4 .button-wrapper .button, .products.columns-4 .button-wrapper .added_to_cart { font-size: clamp(14px, .85vw, 16px); } /** * TEST */ @media (min-width: 768px) and (max-width: 1200px) { .single-product .woocommerce-Tabs-panel--description .headline h2 { /* outline: 1px dotted green; */ margin-left: 49.5vw; } } /** * HOME PAGE PERFORMANCE TEST */ @media only screen and (min-width: 768px) { .BG-HOME-1 { background-image: url('images/HOME_20220706/STMS_Home_DuxPlus_BG.jpg') !important; } .BG-HOME-2 { background-image: url('images/HOME_20220706/STMS_Home_ChargeTree_BG.jpg') !important; } .BG-HOME-3 { /* background-image: url('images/HOME_20220706/STMS_Home_DuxShell_BG.jpg') !important; */ } .BG-HOME-4 { background-image: url('images/HOME_20220706/Home_Banner_MagSafe_00.jpg') !important; } } /** * Limited optimization potential because of image content & the need for it to be stretched vertically at narrow viewports * Default to a simple tiled bg image */ .BG-HOME-5 { background-image: url('images/HOME_20220706/STMS_Home_DuxBackpack-bg-tile.jpg') !important; background-repeat: repeat !important; background-size: initial !important; } @media only screen and (max-width: 768px) { /** * Tiled bg image at narrow viewports, with linear gradient to improve legibility of text */ .BG-HOME-5 > .row { background-image: linear-gradient(rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 50%); } .bgDark { background-image: linear-gradient(rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.1) 50%) !important; background-color: hsl(0, 0%, 25%); } } /** * Then revert to the specified bg image at wider viewports */ @media only screen and (min-width: 768px) { .BG-HOME-5 { background-image: url('images/HOME_20220706/STMS_Home_DuxBackpack-1200w.jpg') !important; background-repeat: no-repeat !important; background-size: cover !important; } } @media only screen and (min-width: 1200px) { .BG-HOME-5 { background-image: url('images/HOME_20220706/STMS_Home_DuxBackpack.jpg') !important; } } .bgBagHLP02 { background: url("images/STM_BAGS_HLP_20220712/Backpack/STM_BLP_DuxBackpack_00_900w.jpg") !important; background-size: cover !important; } @media only screen and (min-width: 450px) { .bgBagHLP02 { background: url("images/STM_BAGS_HLP_20220712/Backpack/STM_BLP_DuxBackpack_00.jpg") !important; background-size: cover !important; } } /** * DEVICE SEARCH */ .device-search-wrapper > p { margin-bottom: 0.75em; } .device-search-wrapper .woocommerce-info { margin-bottom: 1em; } .tax-product_tag .device-search-wrapper input[type="text"] { padding: 0.25em; } .tax-product_tag .device-search-wrapper input[type="submit"] { padding: 0.25em 0.5em; } @media only screen and (min-width: 768px) { .tax-product_tag:not(.no-results) .device-search-wrapper-wrapper { display: flex; flex-direction: column; /* align-items: flex-end; */ } } .dgwt-wcas-suggestions-wrapp .advanced-search-wrap { /* outline: 1px dotted blue; */ display: flex; gap: 1%; } .dgwt-wcas-suggestions-wrapp .advanced-search-wrap .dgwt-wcas-suggestion-more, .dgwt-wcas-suggestions-wrapp .advanced-search-wrap .advanced-search { width: 49.5%; } .dgwt-wcas-suggestions-wrapp .advanced-search-wrap .advanced-search { padding: 1em 0.75em 1em 1.5em; justify-content: center; font-size: 14px; text-transform: uppercase; } .dgwt-wcas-suggestions-wrapp .advanced-search-wrap .advanced-search:hover { background-color: hsl(0, 0%, 90%); /* background-color: hsl(0, 0%, 93%); */ } /** * ADVANCED SEARCH WIDGET */ .advanced-search-footer { background-color: hsl(252, 10%, 88%); background-image: linear-gradient(rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 25%); } .advanced-search .device-search-wrapper, .advanced-search-footer .device-search-wrapper { margin: 0 auto; padding: 1em 0 3em 1em; text-align: center; } .advanced-search-footer .device-search-wrapper { padding: 5em 0 4em 1em; } .advanced-search h2 { font-size: clamp(2.5rem, 1.59vw, 1.59vw) !important; } .not-template-bxl .advanced-search:not(.context-search-page) h2 { font-size: clamp(1.5rem, 1.5vw, 1.5vw) !important; } .advanced-search .device-search-wrapper .search-deck, .device-search-wrapper.context-search-page .search-deck { font-size: clamp(1.2rem, 1.5vw, 1.5vw) !important; line-height: 1.3; } .not-template-bxl .advanced-search .device-search-wrapper > p { font-size: clamp(1rem, 1.1vw, 1.1vw) !important; } .advanced-search .woocommerce-info { text-align: left; } .advanced-search .inner-wrap .device-search-wrapper > .woocommerce-info { font-size: clamp(1rem, 1vw, 1vw) !important; } .advanced-search input[type="text"], .advanced-search input[type="submit"] { margin: 5px; border-radius: 5px; font-family: "Open Sans",sans-serif; } .advanced-search input[type="text"] { border: 1px solid var(--suscribir-bg-color); padding: 10px; color: var(--privacyPolicy-txt-color); background-color: var(--submenu-bg-color); } .advanced-search input[type="submit"] { border: var(--btn-bg-sm-hv) !important; padding: 0.65rem 1.5rem !important; color: var(--menu-txt-color) !important; background-color: var(--btn-bg-sm-hv) !important; } .advanced-search input[type="text"]:focus { outline: 2px solid #101010; } .context-search-page.advanced-search { margin-top: 1em; margin-bottom: 3em; } @media only screen and (min-width: 768px) { .advanced-search .device-search-wrapper { width: 60vw; } } .not-template-bxl .deck, .not-template-bxl .deck2 { margin-bottom: 0.75rem; font-size: 1.2rem; line-height: 1.45; } .not-template-bxl .deck2 { font-size: 1.05rem; } /** * ASINs cron job reporting */ .asins-cronjob-report p.breadcrumb { margin: 0; padding: 0; border-radius: 0; background-color: inherit; } .asins-cronjob-report h2, .asins-cronjob-report h3 { margin-top: 0.75em; } .asins-cronjob-report h2 + h3 { margin-top: 0; border-top-width: 0; padding-top: 0.25em; } .asins-cronjob-report h2:first-of-type { margin-top: 0.25em; margin-bottom: 0.25em; } .asins-cronjob-report h3 { margin-bottom: 0.2em; } .asins-cronjob-report h2 .preface { color: #666; /* color: var(--subtitle-color); */ color: var(--btnCharcoalColor); /* color: var(--btn-Submit-subscribe); */ } /* .asins-cronjob-report p + ol { margin-top: -1em; } */ .asins-cronjob-report p { margin-bottom: 0.5em; } /** * Style the first (most recent) cron job more prominently, as it's likely to be the one of most interest */ ul.asins.cronjobs li.first-cron-job a { /* paged-2 page-paged-2 */ /* body:not([class*="paged-"]) ul.asins.cronjobs li:first-of-type a { */ font-weight: bold; } ul.asins li, ol.asins li { margin-bottom: 0.3em; line-height: 1.55; } ol.asins .vendor { display: block; margin-left: 0.5em; } ol.asins .vendor.unexpected_vendor_condition { display: inline-block; margin-left: 0.25em; font-style: italic; } .asins-cronjob-report .navigation li { display: inline; } .asins-cronjob-report .navigation li.active a { font-weight: bold; text-decoration: none !important; } .asins-cronjob-report a[href^="http"]:not([href*="wpengine.com"]):not([href*="stmgoods.com"]) { position: relative; display: inline-block; padding-left: 0.9em; } .asins-cronjob-report a[href^="http"]:not([href*="wpengine.com"]):not([href*="stmgoods.com"]):before { border-width: 1px; border-color: inherit; border-style: solid; position: absolute; left: 1px; top: 34%; top: clamp(1px, 34%, 0.6em); width: 0.8em; content: '\1F855'; font-size: 0.8em; line-height: .7; opacity: 0.4; } .asins-cronjob-report a[href^="http"]:not([href*="wpengine.com"]):not([href*="stmgoods.com"]):hover:before { opacity: 0.7; } .asins-cronjob-report a[href^="http"]:not([href*="wpengine.com"]):not([href*="stmgoods.com"]):before { /* .asins-cronjob-report a[href^="http"]:not([href*="wpengine.com"]):not([href*="stmgoods.com"]):before:before { */ position: absolute; content: ''; left: 0; top: 0.2em; bottom: 0.2em; outline: 1px solid red; } /** * Test */ /* .env-staging .slick-slide:not(.slick-current) { display: none !important; } */ .env-staging .slick-slide:not(.slick-active):not(.slick-current) { /* display: none !important; */ } /** * Emulate existing styles for Additional Variation Images Gallery for WooCommerce plugin */ @media (min-width: 1200px) { .woo-variation-product-gallery { /* outline: 1px solid hsl(220, 80%, 92%); */ margin-left: 6%; width: 70%; max-width: 555px; margin-right: 3%; } } .woo-variation-gallery-wrapper .wvg-gallery-thumbnail-image { /* .woo-variation-gallery-wrapper .wvg-gallery-thumbnail-image img { */ opacity: 0.2; } /** * INDIVIDUAL PAGES */ .page-black-friday-2022 .entry-header { position: absolute; left: -10000px; } .page-black-friday-2022 .entry-content { text-align: center; } /** * TEMPORARY / TEST STYLES */ h3.inline { color: inherit; font-family: inherit; font-size: inherit; font-weight: bold; } h3.inline + p { display: inline; } h3.inline + p::after { content: ''; display: block; margin-bottom: 1em; } /** * Compensate for missing JS-injected .stm-mt-4 class on Boxel HLP pages */ body:not(.page-power-protection) :not(.stm-mt-4) > #collapsingNavbarLg { /* :not(.stm-mt-4) > #collapsingNavbarLg { */ /* outline: 2px solid green; */ margin-top: 1rem; } .env-production.page-power-protection #collapsingNavbarLg[style] { /* .env-staging.page-power-protection #collapsingNavbarLg[style] { */ opacity: 1 !important; } /** * Update subnav in Bags page, 3/9/2023 * Updated on 4/6/2023 to narrow scope of .columns-2, */ .ulNavItems.columns-2 { column-count: 2; -webkit-columns: 2; -moz-columns: 2; width: 85%; margin: auto; } .ulNavItems.columns-2 .ListElement { white-space: nowrap; } .ulNavItems.columns-2 .ListElement:nth-child(5) { break-before: column; /* outline: 1px dotted red; */ } .nav-item.itemImageSTM_Collection > .linkNavItemPowerHLP { margin-left: -26px; } @media only screen and (min-width: 992px) { .nav-item.itemImageSTM2_Sleeves { left: 50vw; /* left: 51vw; */ } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) and (-webkit-min-device-pixel-ratio: 2) { /* @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) and (-webkit-min-device-pixel-ratio: 2) { */ .nav-item.itemImageSTM2_Sleeves { left: 55vw; /* left: 56vw; */ } } @media only screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) and (-webkit-min-device-pixel-ratio: 2) { /* @media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) and (-webkit-min-device-pixel-ratio: 2) { */ .nav-item.itemImageSTM2_Sleeves { left: 55vw; /* left: 56vw; */ } } @media only screen and (min-width: 62rem) { .nav-item.itemImageSTM2_Sleeves { left: 49vw; /* left: 50vw; */ } } @media only screen and (min-width: 48rem) and (max-width:64rem) and (orientation:landscape) and (-webkit-min-device-pixel-ratio:1) and (-webkit-min-device-pixel-ratio:2) { /* @media only screen and (min-device-width: 48rem) and (max-device-width:64rem) and (orientation:landscape) and (-webkit-min-device-pixel-ratio:1) and (-webkit-min-device-pixel-ratio:2) { */ .nav-item.itemImageSTM2_Sleeves { left: 55vw; /* left: 56vw; */ } } @media only screen and (min-width: 64rem) and (max-width:85.375rem) and (orientation:portrait) and (-webkit-min-device-pixel-ratio:1) and (-webkit-min-device-pixel-ratio:2) { /* @media only screen and (min-device-width: 64rem) and (max-device-width:85.375rem) and (orientation:portrait) and (-webkit-min-device-pixel-ratio:1) and (-webkit-min-device-pixel-ratio:2) { */ .nav-item.itemImageSTM2_Sleeves { left: 55vw; /* left: 56vw; */ } } /** * FACETWP TEST */ .site-au.page-facetwp-test .facetwp-template { outline: 1px dotted red; margin-bottom: 1em; }