Untitled
/*-------------------------------------------------------------- # Typography --------------------------------------------------------------*/ h1,h2,h3,h4,h5,h6 { font-family: $font-heading; margin: 0; clear: both; font-weight: 700; color: $headingcolor; } .page-content h3, .page-content h2 { margin-bottom: 10px; } h1 { font-size: 42px; line-height: 1.3; } h2 { font-size: 36px; line-height: 1.3; } h3 { font-size: 28px; line-height: 1.3; } h4 { font-size: 20px; line-height: 1.4; } h5 { font-size: 18px; line-height: 1.3; } h6 { font-size: 1px; line-height: 1.2; } .xpo-main-title { font-size: 48px; font-weight: 900; } .xpo-main-title32 { font-size: 32px; font-weight: 900; } .xpo-main-title36 { font-size: 36px; font-weight: 900; } .xpo-main-title42 { font-size: 42px; font-weight: 900; } .xpo-main-title44 { font-size: 44px; font-weight: 900; } .xpo-main-title64 { font-size: 64px; font-weight: 900; } .xpo-main-title54 { font-size: 54px; font-weight: 900; } .xpo-title22 { font-size: 22px; } .xpo-title24 { font-size: 24px; } .xpo-title20 { font-size: 20px; } .xpo-title18 { font-size: 18px; } .xpo-title16 { font-size: 16px; } .xpo-title14 { font-size: 14px; } .xpo-title12 { font-size: 12px; } strong { font-weight: 900; } .xpo-mb10 { margin-bottom: 10px; } .xpo-mb15 { margin-bottom: 15px; } .xpo-mb20 { margin-bottom: 20px; } .xpo-mb25 { margin-bottom: 25px; } .xpo-mb30 { margin-bottom: 30px; } .xpo-mb40 { margin-bottom: 40px; } .xpo-mb50 { margin-bottom: 50px; } .xpo-mb60 { margin-bottom: 60px; } .xpo-mb80 { margin-bottom: 80px; } .xpo-mb100 { margin-bottom: 100px; } .xpo-mt20 { margin-top: 20px; } .xpo-mt40 { margin-top: 40px; } .xpo-mt60 { margin-top: 60px; } .xpo-mtp100 { margin-top: 100px; } .xpo-space-pt150 { padding-top: 150px; } .xpo-space-pt130 { padding-top: 130px; } .xpo-pb-100 { padding-bottom: 100px; } .xpo-pb-60 { padding-bottom: 60px; } .xpo-single-content .wp-block-embed iframe { width: 100%; } .xpo-icon-close { position: relative; &:after, &:before { content: ""; position: absolute; left: 0; right: 0; height: 14px; width: 2px; transform: rotate(-45deg); background: red; margin-top: -7px; } &:after { transform: rotate(45deg); } &:before { transform: rotate(-45deg); } } .xpo-icon-yes { position: relative; &:before { content: ""; position: absolute; background-color: transparent; left: 0; margin-top: -7px; width: 8px; border-bottom: 2px solid $primarycolor; height: 12px; border-right: 2px solid $primarycolor; transform: rotate(45deg); -webkit-transform: rotate(45deg); } } .xpo-icon-yes2 { height: 30px; position: relative; width: 30px; background: #dfece7; display: inline-block; border-radius: 100px; &:before { content: ""; position: absolute; background-color: transparent; left: 11px; margin-top: 6px; width: 8px; border-bottom: 2px solid $greencolor; height: 14px; border-right: 2px solid $greencolor; transform: rotate(45deg); -webkit-transform: rotate(45deg); } } .xpo-icon-close2 { height: 30px; position: relative; width: 30px; background: #f1e3e3; display: inline-block; border-radius: 100px; &:after, &:before { content: ""; position: absolute; left: 14px; right: 0; height: 14px; width: 2px; transform: rotate(-45deg); background: $redcolor; margin-top: 8px; } &:after { transform: rotate(45deg); } &:before { transform: rotate(-45deg); } } .xpo-arrow-right { border: solid #fff; border-width: 0 2px 2px 0; display: inline-block; padding: 3px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } .image-left-100 { margin-right: -100px; } .xpo-width1000 { max-width: 1000px; margin-left: auto; margin-right: auto; } .xpo-width960 { max-width: 960px; margin-left: auto; margin-right: auto; } .xpo-width930 { max-width: 930px; margin-left: auto; margin-right: auto; } .xpo-width850 { max-width: 850px; margin-left: auto; margin-right: auto; } .xpo-width700 { max-width: 700px; margin-left: auto; margin-right: auto; } .xpo-width750 { max-width: 750px; margin-left: auto; margin-right: auto; } .xpo-width780 { max-width: 780px; margin-left: auto; margin-right: auto; } .xpo-width800 { max-width: 800px; margin-left: auto; margin-right: auto; } .xpo-title-header { max-width: 750px; margin: 0 auto 50px; .xpo-btn { display: inline-block; margin-top: 35px; } } .xpo-btn-video { a.xpo-video-popup { display: inline-block; justify-content: center; } } .xpo-video-popup-icon { position: relative; padding-right: 25px; &::before { content: ""; border-radius: 100%; position: absolute; top: -1px; left: 0; padding: 10px; border: 2px solid $primarycolor; } &:after { content: ""; position: absolute; border-top: 5px solid transparent; border-left: 8px solid $postxcolor; border-bottom: 5px solid transparent; top: 6px; left: 9px; } } body { margin: 0; padding: 0; background: #F5F7F9; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; background-position: top center; background-repeat: no-repeat; background-size: cover; position: relative; font-family: $font-body; font-size: $font-size-base; line-height: $line-height-base; color: $bodycolor2; font-weight: 400; } .single.single-post { background: #fff; } a { text-decoration: none; transition: 400ms; color: $primarycolor; } p { margin-bottom: 10px; } dfn, cite, em, i { font-style: italic; } blockquote { margin: 0 1.5em; } address { margin: 0 0 1.5em; } .wp-block-quote { &.is-style-large { margin: 40px 0; padding: 40px; background: #fff; border-radius: 5px; border: 1px solid rgba(229, 229, 229, .7); box-shadow: 10px 30px 70px 0 rgba(0, 0, 0, .1); > p { margin-bottom: 0; } } } .wp-block-pullquote { margin: 30px 0; padding: 2em 0; blockquote { > p { margin-bottom: 0; } } } .xpo-waring { background-color: #fff3cd; color: #664d03; border-left: 4px solid #ffe69c; padding: 10px 15px; line-height: 1.5; font-size: 16px; border-radius: 4px; } .xpo-success { background-color: #d1e7dd; color: #156e46; border-left: 4px solid #a3cfbb; padding: 10px 15px; line-height: 1.5; font-size: 16px; border-radius: 4px; } pre { background: #fff; border: 1px solid rgba(229, 229, 229, .7); box-shadow: 10px 30px 70px 0 rgba(0, 0, 0, .1); font-size: 18px; line-height: 1.6; max-width: 100%; overflow: auto; padding: 1.6em; font-family: $font-body; border-radius: 5px; &.wp-block-code { padding: 30px; border-radius: 0; background: #ffffff; background: -moz-linear-gradient(top, #ffffff 50%, #fafafa 50%); background: -webkit-linear-gradient(top, #ffffff 50%,#fafafa 50%); border-radius: 4px; // background: -o-linear-gradient(top, #ffffff 50%,#fafafa 50%); // background: linear-gradient(top, #ffffff 50%,#fafafa 50%); background-size: 32px 37px; font-size: 18px; line-height: 34px; border: 1px solid rgba(229, 229, 229, .7); box-shadow: 10px 30px 70px 0 rgba(0, 0, 0, .1); margin-top: 25px; transition: 400ms; font-family: $font-body; white-space: pre-wrap; &:hover { box-shadow: 0 5px 10px 0 rgba(141,141,141,.3); } } } code, kbd, tt, var { font-size: 16px; white-space: pre-wrap; } abbr, acronym { border-bottom: 1px dotted #666; cursor: help; } mark, ins { background: #fff9c0; text-decoration: none; } big { font-size: 125%; } /* button */ .btn { padding: 10px 25px; } .xpo-orange { color: $orangecolor; } .xpo-green { color: $greencolor; } .xpo-red { color: $redcolor; } .xpo-pink { color: $pinkcolor; } .xpo-cyn { color: $cyncolor; } .xpo-yellow { color: $yellowcolor; } .xpo-yellow2 { color: $yellowcolo2; } .xpo-main-color { color: $primarycolor; } .xpo-gcolor { color: $metacolor; } .xpo-bcolor2 { color: $bodycolor2; } .xpo-bcolor { color: $bodycolor; } .xpo-productx-color { color: $productxcolor; } .xpo-white { color: #fff; .xpo-main-title { color: #fff; } } .xpo-card { padding: 30px; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12); background: #fff; border-radius: 4px; .xpo-btn { display: inline-block; margin-top: 30px; } span { display: block; } h3 { font-size: 28px; margin-bottom: 15px; } h4 { font-size: 20px; margin-bottom: 10px; } img { margin-bottom: 12px; } &.xpo-primary-card { background: $primarycolor; color: #fff; box-shadow: 0 20px 20px -15px rgba(20, 155, 255, 0.3); h3 { color: #fff; } } } .xpo-info-box { display: flex; flex-wrap: wrap; &.xpo-center { justify-content: center; align-items: center; } img { width: 80px; } h4 { width: 100%; } } .xpo-info-box2 { img { margin-bottom: 25px; } h4 { margin-bottom: 12px; padding: 0 15px; } div { padding: 0 15px; color: $metacolor; } } .xpo-whitebg { background: #fff; } .xpo-blackbg { background: $headingcolor; } .xpo-productxbg { background: $productxcolor; } .xpo-gradientbg { background-color: #e4c9e4; background-image: linear-gradient( 133deg,#e4c9e4 0,#ffe8c9 100%); } .xpo-pink-gradientbg { background-color: #FFE4E3; background-image: linear-gradient(180deg, #FFE4E3 60%, #F0F2F4 100%); } .xpo-container-gray-gradient { background-image: linear-gradient(180deg, #DADFE5 12%, #F0F2F4 100%); } .xpo-yellow-gradientbg { background-image: linear-gradient(180deg, #E9E5BA 0%, #F0F2F4 99%); } .xpo-green-gradientbg { background-image: linear-gradient(180deg, #A0EADE 0%, #F0F2F4 98%); } .xpo-violet-gradientbg { background-image: linear-gradient(180deg, #DEC0E3 0%, #F0F2F4 100%); } .xpo-stories { background-image: linear-gradient(133deg, #F8DBD7 0%, #FFF2E1 100%); } .xpo-red-green-gradientbg { background-image: linear-gradient(133deg,#ffd7ce 0,#affff3 100%); } .xpo-graybg { background: $graycolor; } .xpo-primarybg { background: $primarycolor; } .xpo-section-padding { padding-top: 100px; padding-bottom: 100px; } .xpo-section-padding80 { padding-top: 80px; padding-bottom: 80px; } .xpo-section-space { margin-bottom: 100px; } .xpo-layout-title-wrap { &.xpo-title-header { max-width: 850px; display: flex; flex-wrap: wrap; align-items: center; .xpo-layout-title { max-width: 600px; .xpo-sub-title { max-width: 100%; margin-right: 60px; max-width: 100%; } + div { margin-left: auto; } } .xpo-btn { margin-top: 0; margin-left: auto; } } } .left-half-circle, .xpo-compare-wrapper, .xpo-productx-overview, .xpo-category-wrapper, .xpo-landing-info, .xpo-feature-wrapper, .xpo-core-feature-wrapper, .xpo-productx-cta-testimonial { position: relative; &:after { top: 0; left: 0; width: 100%; height: 100%; position: absolute; content: ""; background-repeat: no-repeat; } .xpo-container, .xpo-title-header { position: relative; z-index: 1; } } .left-half-circle, .right-wishlist-img, .xpo-layout-wrapper, .xpo-compare-bg, .xpo-productx-cta-testimonial { position: relative; &:before { right: 0; top: 0; position: absolute; content: ""; background-repeat: no-repeat; } .xpo-container, .xpo-title-header { position: relative; z-index: 1; } } .xpo-productx-cta-testimonial { &:after { width: 96px; height: 81px; background-image: url('https://www.wpxpo.com/wp-content/uploads/2021/03/left-quote.png'); left: 70px; top: 40px } } .left-half-circle { &:after { width: 241px; height: 233px; background-image: url('https://www.wpxpo.com/wp-content/uploads/2021/03/half-circle.png'); } } .xpo-landing-info { &:after { background-image: url('https://www.wpxpo.com/wp-content/uploads/2021/03/no-coding-bg.png'); background-size: 1500px auto; background-position: center 50px; } } .xpo-feature-wrapper { &:after { background-image: url('https://www.wpxpo.com/wp-content/uploads/2021/03/exclusive-feature-bg.png'); background-size: 1200px auto; background-position: center; background-repeat: repeat; opacity: 0.7; } } .xpo-core-feature-wrapper { &:after { background-image: url('https://www.wpxpo.com/wp-content/uploads/2021/03/core-feature-bg.png'); background-size: 1500px auto; background-position: center; background-repeat: no-repeat; } } .xpo-compare-wrapper { &:after { width: 240px; height:421px; background-image: url('https://www.wpxpo.com/wp-content/uploads/2021/03/compare-icon-min.png'); } } .xpo-productx-overview { &:after { top: 60px; background-image: url('https://www.wpxpo.com/wp-content/uploads/2021/03/gift-icon-img.png'); width: 318px; height: 343px; background-size: cover; } } .xpo-category-wrapper { &:after { left: 100px; width:833px; height: 394px; background-image: url('https://www.wpxpo.com/wp-content/uploads/2021/03/circle-img2.png'); background-size: cover; } } .xpo-productx-cta-testimonial { &:before { width: 99px; height: 81px; background-image: url('https://www.wpxpo.com/wp-content/uploads/2021/03/right-quotation.png'); top: auto; bottom: 60px; right: 60px; } } .left-half-circle { &:before { right: 60px; top: 60px; width: 150px; height: 150px; background-image: url('https://www.wpxpo.com/wp-content/uploads/2021/03/cirlce.png'); } } .right-wishlist-img { &:before { width: 341px; height: 322px; background-image: url('https://www.wpxpo.com/wp-content/uploads/2021/03/wishlist-icon-bg.png'); background-size: cover; } } .xpo-layout-wrapper { &:before { width: 340px; height: 480px; background-image: url('https://www.wpxpo.com/wp-content/uploads/2021/03/rectangle-icon.png'); background-size: cover; } } .xpo-compare-bg { &:before { width: 342px; height: 305px; background-image: url('https://www.wpxpo.com/wp-content/uploads/2021/03/product-slider-icon.png'); background-size: cover; } .xpo-core-feature { position: relative; z-index: 1; } } /*-------------------------------------------------------------- # Elements --------------------------------------------------------------*/ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ box-sizing: border-box; margin-top: 0; } *, *:before, *:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ box-sizing: inherit; } .xpo-video { width: 100%; } hr { background-color: #ccc; border: 0; height: 1px; margin-bottom: 1.5em; } ul, ol { margin: 0 0 1.5em 3em; } ul { list-style: disc; } ol { list-style: decimal; } li > ul, li > ol { margin-bottom: 0; margin-left: 1.5em; } dt { font-weight: bold; } dd { margin: 0 1.5em 1.5em; } img { height: auto; /* Make sure images are scaled correctly. */ max-width: 100%; /* Adhere to container width. */ } table { margin: 0 0 1.5em; width: 100%; } /* Screen Reader Text ------------------------ */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; word-break: normal; &:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; -webkit-clip-path: none; clip-path: none; color: $primarycolor; display: block; font-size: 0.875rem; font-weight: 700; height: auto; right: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; } } .xpo-iframe-video { padding-bottom: 56.25%; position: relative; iframe { max-width: 100%; margin: 0; line-height: 1; border: none; position: absolute; top: 0; left: 0; height: 100%; width: 100%; } } //video popup within image .xpo-video-popup-image { position: relative; line-height: 0; .xpo-video-popup { position: absolute; width: 100%; height: 100%; left: 0; top: 0; span { position: absolute; top: 50%; left: 50%; margin-top: -40px; margin-left: -40px; &:after { content: ""; position: absolute; border-top: 15px solid transparent; border-left: 25px solid #fff; border-bottom: 15px solid transparent; top: 25px; left: 30px; } &:before { content: ""; border-radius: 100%; position: absolute; top: 0; left: 0; padding: 40px; box-shadow: 0 0 0 15px rgba(65, 81, 255, 0.15); background: $primarycolor; } } } } .xpo-postx-builder-image { .xpo-video-popup { position: initial; width: auto; height: auto; span { margin-top: -90px; margin-left: -90px; width: 180px; height: 180px; border-radius: 100px; padding: 0; // -webkit-animation: pulse 1.2s ease infinite; // animation: pulse 1.2s ease infinite; // background: #857fff; &:before { padding: 50px; box-shadow: 0 3px 10px 2px #b496e5, 0 0 0 18px rgb(255 255 255), 0 0 0 40px rgb(122 114 255 / 33%); background: #5415ff; background-image: linear-gradient(28deg, #5415ff 13%, #857fff 90%); border: none; top: 40px; left: 40px; } &:after { border-top: 15px solid transparent; border-left: 25px solid #fff; border-bottom: 15px solid transparent; top: 75px; left: 80px; } .xpo-popup-btn-bg { -webkit-animation: pulse 1.2s ease infinite; animation: pulse 1.2s ease infinite; background: #857fff; position: absolute; width: 120px; height: 120px; border-radius: 100%; top: 16%; left: 19%; margin-left: -3px; margin-top: 3px; } } } } .xpo-postx-builder-image.xpo-productx-builder-image .xpo-video-popup span:before { box-shadow: 0 3px 10px 2px #f26654, 0 0 0 18px #fff, 0 0 0 40px rgba(255, 118, 49, 0.35); background: #FF3F45; background-image: linear-gradient(28deg,#FF3F45 13%,#FF987F 90%); } .xpo-postx-builder-image.xpo-productx-builder-image .xpo-video-popup span .xpo-popup-btn-bg { background: #FF987F; } .xpo-feature-video { .xpo-video-popup-image { .xpo-video-popup span { margin-left: 0; left: -8%; } } } //list style .xpo-list { list-style: none; padding: 0; margin: 0; li { display: inline-block; padding: 0 12px; margin: 0 12px; position: relative; &:after { content: ""; background-color: transparent; position: absolute; left: -8px; top: 8px; width: 6px; border-bottom: 2px solid $primarycolor; height: 9px; border-right: 2px solid $primarycolor; transform: rotate(45deg); -webkit-transform: rotate(45deg); } &:before { position: absolute; content: ""; width: 20px; height: 20px; border: 1px solid $primarycolor; left: -15px; top: 4px; border-radius: 100px; } // &.xpo-list-close { // &:after { // border: none !important; // content: "\f335"; // font-family: dashicons; // top: 2px; // transform: rotate(0deg); // -webkit-transform: rotate(0deg); // left: -13px; // height: auto; // width: auto; // color: #ff190c; // } // &:before { // border: 1px solid #ff190c !important; // } // } } &.xpo-list-inline { li { display: block; margin-bottom: 10px; &:last-child { margin-bottom: 0; } } } &.xpo-list-gray { li { &:after { border-bottom: 2px solid $metacolor; border-right: 2px solid $metacolor; } &:before { border: 1px solid $metacolor; } } } &.xpo-list-white { li { &:after { border-bottom: 2px solid #fff; border-right: 2px solid #fff; } &:before { border: 1px solid #fff; } } } } .xpo-check-list { list-style: none; padding: 0; margin: 0; li { position: relative; display: inline-block; padding-left: 35px; margin-bottom: 20px; &:after { content: ""; background-color: transparent; position: absolute; left: 7px; top: 8px; width: 6px; border-bottom: 2px solid $primarycolor; height: 9px; border-right: 2px solid $primarycolor; transform: rotate(45deg); -webkit-transform: rotate(45deg); } &:before { position: absolute; content: ""; width: 20px; height: 20px; border: 1px solid $primarycolor; left: 0px; top: 4px; border-radius: 100px; } } &.xpo-check-list-col { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-flow: row wrap; -moz-box-orient: horizontal; -moz-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; li { width: 47%; } } } .xpo-check-fill-green li:before { background: #76D055; border: 1px solid #76D055; } .xpo-check-fill-green li:after { border-bottom: 2px solid #fff; border-right: 2px solid #fff; } .xpo-list-check { list-style: none; padding: 0; margin: 0; li { position: relative; display: inline-block; padding-left: 35px; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #e5e5e5; line-height: 24px; font-size: 16px; &:after { content: ""; background-color: transparent; position: absolute; left: 8px; top: 5px; width: 7px; height: 11px; border-bottom: 2.5px solid $primarycolor; border-right: 2.5px solid $primarycolor; transform: rotate(45deg); -webkit-transform: rotate(45deg); } &:before { position: absolute; content: ""; width: 24px; height: 24px; left: 0px; top: 0px; border-radius: 100px; } &:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; } } &.xpo-list-graybg { li { &:before { background: #F5F5F5; } } } } //new landing page .xpo-postx-start { background-color: #E6F2FF; background-image: linear-gradient(to bottom, #e5f1ff 1%, #fff 99%); padding-top: 150px; background-position: center center; background-repeat: no-repeat; background-size: cover; position: relative; padding-bottom: 350px; &:after { background-image: url("https://www.wpxpo.com/wp-content/uploads/2022/10/postx-hero-bg.png"); background-size: cover; background-position: center 30px; background-repeat: no-repeat; top: 0; left: 0; width: 100%; height: 100%; position: absolute; content: ""; } .xpo-container, .xpo-featured-on { position: relative; z-index: 1; } } .xpo-productx-start { background-color: #FFFBF8; padding-top: 150px; position: relative; padding-bottom:100px; &:after { background-image: url("https://www.wpxpo.com/wp-content/uploads/2023/02/productx-hero-bg.png"); background-size: cover; background-position: center -50px; background-repeat: no-repeat; top: 0; left: 0; width: 100%; height: 100%; position: absolute; content: ""; } .xpo-container { position: relative; z-index: 1; } } .xpo-productx-start-header { .xpo-btn-xlg { font-size: 20px; display: inline-block; } } .xpo-productx-start-header a.xpo-video-popup { color: $headingcolor; } .xpo-productx-start-header .xpo-video-popup-icon::before { border: 2px solid $productxcolor; } .xpo-productx-start-header .xpo-video-popup-icon:after { border-left: 9px solid $productxcolor; } .xpo-satisfy-items.xpo-grid-col3 { grid-column-gap: 20px; grid-row-gap: 20px; } .xpo-satisfy-item { display: grid; text-align: left; padding: 10px 15px; background: #fff; border-radius: 4px; grid-template-columns: auto 1fr; grid-gap: 10px; font-size: 14px; align-items: center; box-shadow: 0 0 30px 4px rgba(0, 0, 0, 0.08); svg { width: 50px; } } .xpo-satisfy-info2 { padding: 20px; border-radius: 10px; } .xpo-satisfy-item2 { grid-template-columns: auto 1fr; display: grid; grid-gap: 10px; svg { width: 50px; } } .xpo-productx-builder-wrapper { position: relative; &:after { background-image: url("https://www.wpxpo.com/wp-content/uploads/2023/02/builder-bg-shape.png"); background-size: 1500px auto; background-position: center 250px; background-repeat: no-repeat; top: 0; left: 0; width: 100%; height: 100%; position: absolute; content: ""; } .xpo-container { position: relative; z-index: 1; } } .xpo-productx-query-wrapper { position: relative; &:after { background-image: url("https://www.wpxpo.com/wp-content/uploads/2023/02/productx-query-sort-bg.png"); background-size: 1600px auto; background-position: center 250px; background-repeat: no-repeat; top: 0; left: 0; width: 100%; height: 100%; position: absolute; content: ""; } .xpo-container { position: relative; z-index: 1; } } .xpo-productx-feature-wrapper { position: relative; &:after { background-image: url("https://www.wpxpo.com/wp-content/uploads/2023/02/productx-grow-feature-bg.png"); background-size: 1600px auto; background-position: center 250px; background-repeat: no-repeat; top: 0; left: 0; width: 100%; height: 100%; position: absolute; content: ""; } .xpo-container { position: relative; z-index: 1; } } .xpo-postx-overview { margin-top: -450px; } .xpo-featured-on { max-width: 1350px; position: relative; } .xpo-featured-on-item { display: grid; grid-template-columns: auto 1fr; align-items: center; grid-gap: 80px; padding: 30px 100px; background: #fff; border-radius: 6px; box-shadow: 0 0 36px rgba(0, 0, 0, 0.05); .xpo-featured-title { color: #D5D5D5; } } .xpo-feature-item-wrapper { background: #D9ECFF; position: relative; &:after { background-image: url("https://www.wpxpo.com/wp-content/uploads/2022/10/postx-promo-bg.png"); background-size: cover; background-position: center 0px; background-repeat: no-repeat; top: 0; left: 0; width: 100%; height: 100%; position: absolute; content: ""; } .xpo-postx-overview, .xpo-container { position: relative; z-index: 1; } } .xpo-feature-items.xpo-grid-col2 { grid-column-gap: 60px; grid-row-gap: 70px; } .xpo-feature-item { img { height: 45px; } .xpo-feature-content { background: #fff; padding: 30px; border-radius: 10px; } } .xpo-productx-promo-items { border: 1px solid #62293F; border-radius: 20px; overflow: hidden; } .xpo-productx-promo-items .xpo-feature-item { border-bottom: 1px solid #62293F; border-right: 1px solid #62293F; &.xpo-border-right-none { border-right: none; } &.xpo-border-bottom-none { border-bottom: none; } .xpo-feature-content { border-radius: 0; transition: 400ms; color: #5D5D5D; height: 100%; display: flex; flex-wrap: wrap; .xpo-feature-header { display: flex; align-items: center; img { width: 40px; margin: 0 15px 0 0; } } a { display: inline-block; color: #FF6845; transition: 400ms; border-bottom: 1px solid; margin-top: auto; font-weight: 700; } &:hover { background: #62293F; h4 { color: #fff; } color: #fff; a { color: #fff; } } } } //xpo-postx-blocks-addons .xpo-postx-blocks-addons { background: radial-gradient(circle, rgba(19,25,142,1) 0%, rgba(48,56,227,1) 62%, rgba(116,122,255,1) 100%); position: relative; &:after { background-image: url("https://www.wpxpo.com/wp-content/uploads/2022/10/postx-block-addon-bg.png"); background-size: 1920px auto; background-position: center 0px; background-repeat: no-repeat; top: 0; left: 0; width: 100%; height: 100%; position: absolute; content: ""; } .xpo-container { position: relative; z-index: 1; } } .xpo-postx-blocks { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 60px; grid-row-gap: 40px; background: #fff; padding: 55px 55px 0; margin-bottom: 50px; border-radius: 20px; align-items: center; &:last-child { margin-bottom: 0; } } .xpo-postx-blocks-content { max-width: 400px; } .xpo-postx-blocks-image { line-height: 0; } //postx slider .xpo-postx-slider-wrapper { background: #D9ECFF; position: relative; &:after { background-image: url("https://www.wpxpo.com/wp-content/uploads/2022/10/postx-slider-bg.png"); background-size: 1920px auto; background-position: center; background-repeat: no-repeat; top: 0; left: 0; width: 100%; height: 100%; position: absolute; content: ""; } .xpo-container { position: relative; z-index: 1; } } .xpo-postx-slider { background: #fff; border-radius: 6px; padding: 12px 35px; margin-bottom: 25px; margin-top: 70px; } .xpo-slider-check { list-style: none; padding: 0; margin: 0; } .xpo-slider-check li { display: inline-block; margin-right: 30px; position: relative; padding-left: 20px; font-weight: 700; font-size: 14px; } .xpo-slider-check li:last-child { margin-right: 0; } .xpo-slider-check li:before { position: absolute; content: ""; width: 12px; height: 12px; left: 0; top: 6px; border-radius: 100px; background: #5bc467; } .xpo-slider-check li:after{ content: ""; background-color: transparent; position: absolute; left: 4px; top: 8px; width: 4px; height: 6px; border-bottom: 1.5px solid #fff; border-right: 1.5px solid #fff; transform: rotate(45deg); -webkit-transform: rotate(45deg); } //xpo-postx-feature-wrapper .xpo-postx-feature-wrapper { background: #EFF5FD; position: relative; &:after { background-image: url("https://www.wpxpo.com/wp-content/uploads/2022/10/postx-feature-bg.png"); background-size: 1570px auto; background-position: center 180px; background-repeat: no-repeat; top: 0; left: 0; width: 100%; height: 100%; position: absolute; content: ""; } .xpo-container { position: relative; z-index: 1; } } .xpo-feature-left { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 60px; grid-row-gap: 40px; border-radius: 20px; align-items: center; } .xpo-productx-blocks-addons .xpo-feature-left { grid-column-gap: 100px; } .xpo-card-feature { border-radius: 20px; padding: 55px; } .xpo-feature-grid { display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 60px; } .xpo-feature-grid .xpo-card-feature { padding: 35px 55px; } .xpo-feature-grid .xpo-postx-blocks-content { max-width: 100%; } .xpo-card-feature .xpo-postx-blocks-image { margin: -30px -55px 30px; padding: 30px 55px; border-radius: 20px 20px 0 0; } .xpo-tap-content .xpo-card-feature .xpo-postx-blocks-image { margin: 0; padding: 0; } .xpo-cta-wrapper { padding: 70px 90px; background-color: #000B8B; background-image: url("https://www.wpxpo.com/wp-content/uploads/2022/10/cta-bg.png"); background-size: 1570px auto; background-position: center; background-repeat: no-repeat; border-radius: 20px; } .xpo-cta-wrapper2 { background-color: #5b40f4; background-image: url("https://www.wpxpo.com/wp-content/uploads/2023/03/productx-cta-middle.png"); } .xpo-cta-left { display: grid; grid-template-columns: 1fr auto; grid-column-gap: 90px; align-items: center; } //xpo-postx-list-wrapper .xpo-postx-list-wrapper { background-color: #EFF5FD; position: relative; &:after { background-image: url("https://www.wpxpo.com/wp-content/uploads/2022/10/postx-feature2.png"); background-size: cover; background-position: center 120px; background-repeat: no-repeat; top: 0; left: 0; width: 100%; height: 100%; position: absolute; content: ""; } .xpo-container { position: relative; z-index: 1; } } .xpo-postx-list { padding: 0; margin: 0; text-align: center; } .xpo-postx-list li { display: inline-block; padding: 18px 40px; border-radius: 10px; box-shadow: 3px 3px 6px 0 rgba(3, 127, 255, 0.20); background: #fff; font-size: 24px; font-weight: 700; margin: 10px; text-align: center; } .xpo-productx-list li { font-size: 16px; padding: 15px 30px; margin: 5px; border-radius: 5px; } //xpo-offer-faq-wrapper .xpo-offer-faq-wrapper { background: #EFF5FD; position: relative; &:after { background-image: url("https://www.wpxpo.com/wp-content/uploads/2022/10/postx-faq-bg.png"); background-size: 1920px auto; background-position: center 100px; background-repeat: no-repeat; top: 0; left: 0; width: 100%; height: 100%; position: absolute; content: ""; } .xpo-container { position: relative; z-index: 1; } } .productx-cta-wrapper:after { display: none; } //xpo-postx-builder .xpo-postx-builder-wrapper { background: #EFF5FD; } .xpo-web-creation { padding: 100px 0; background: #fff; } .xpo-creation-content { display: flex; flex-wrap: nowrap; align-items: center; margin: 70px auto 0; } .xpo-creation-content { ul { padding: 0; margin: 0px; width: 750px; li { list-style: none; text-align: center; font-family: $font-heading; line-height: 24px; margin: 10px 0 10px 0; color: $headingcolor; cursor: pointer; text-align: left; } } } .xpo-creation-content { > ul { li { font-size: 22px; span { padding: 12px 22px; display: inline-block; font-weight: 700; em { font-style: inherit; font-size: 14px; line-height: 18px; margin-top: 10px; display: none; } } &.active { span { em { display: block; } background: #00174B; color: #fff; border-radius: 2px; // margin-left: 22px; position: relative; &::before { content: ""; position: absolute; right: -24px; top: 50%; margin-top: -12px; border-style: solid; border-color: transparent transparent transparent #00174B; border-width: 12px 12px; } } } } } .xpo-creation-more { font-size: 22px; margin-left: 20px; color: rgba(0, 0, 0, 0.4); text-decoration: underline; } } .xpo-web-creation-productx .xpo-creation-content>ul li.active span::before { border-color: transparent transparent transparent #FFCFAC; } .xpo-web-creation-productx .xpo-creation-content>ul li.active span { background: #FFCFAC; color: $headingcolor; } .xpo-creation-image { margin-left: auto; text-align: right; ul { width: auto !important; li { margin: 0; text-align: right; display: none; &.active { display: block; } } } img { max-width: 95%; } .xpo-live-video { width: 90%; } } //xpo-tap-content-nav .xpo-tap-content-nav { ul { padding: 0; margin: 0 0 30px; list-style: none; text-align: center; > li { display: inline-block; margin: 0 15px; > span { padding: 10px 20px; display: inline-block; box-shadow: 0 3px 6px 0 rgba(0, 109, 222, 0.47); border-radius: 100px; font-size: 16px; cursor: pointer; background: #fff; } &.active { > span { background: #00174B; color: #fff; position: relative; box-shadow: 5px 10px 20px 0 rgba(13, 3, 255, 0.24); &:after { content: ""; border-width: 20px 20px; border-style: solid; border-color: transparent transparent #fff transparent; position: absolute; top: 34px; left: 50%; margin-left: -20px; } } } } } } .xpo-tap-content { ul { text-align: left; margin-bottom: 0; li { display: none; &.active { display: block; } } } } .xpo-tap-content-nav.xpo-productx-content-nav ul>li.active>span { background: #f66e50; box-shadow: 5px 10px 20px 0 rgba(246, 110, 80, .40); } .xpo-tap-content-nav.xpo-productx-content-nav ul>li>span { box-shadow: 0 3px 6px 0 rgba(246, 110, 80, .60); } //review .xpo-review-container { padding: 20px; display: grid; grid-template-columns: 300px 1fr; grid-gap: 70px; align-items: center; &.xpo-container { padding: 50px 80px; border-radius: 20px; border: 1px solid #b6c2e5; background: #fff; } } .xpo-review-img { display: block; } .xpo-review-content { width: 100%; > div { padding-top: 50px; } } .xpo-review-content .xpo-review-quate { position: relative; } .xpo-review-content .xpo-review-quate::after { content: '“'; position: absolute; height: 0px; top: -70px; text-align: left; font-family: $font-heading; font-size: 150px; font-weight: bold; color: $primarycolor; } .xpo-review-content .xpo-review-text { margin-bottom: 20px; text-align: left; font-family: $font-heading; font-size: 28px; color: $headingcolor; } .xpo-review-content .xpo-review-name { text-align: left; font-family: $font-heading; font-size: 18px; color: #070c1a; } .xpo-review-content .xpo-reviewer-position { text-align: left; font-family: $font-heading; font-size: 18px; color: $primarycolor; } //postx feature landing .postx-feature-landing-1, .postx-feature-landing-2, .postx-feature-landing-3, .postx-feature-landing-4 { position: relative; &:after { background-repeat: no-repeat; top: 0; left: 0; width: 100%; height: 100%; position: absolute; content: ""; } .xpo-container { position: relative; z-index: 1; } } .postx-feature-landing-1 { &:after { background-size: 1444px auto; background-position: center 100px; background-image: url("https://www.wpxpo.com/wp-content/uploads/2022/10/postx-feature-landing-bg1.png"); } } .postx-feature-landing-2 { &:after { background-size: 1500px auto; background-position: center 100px; background-image: url("https://www.wpxpo.com/wp-content/uploads/2022/10/postx-feature-landing-bg2.png"); } } .postx-feature-landing-3 { &:after { background-size: 1444px auto; background-position: center 150px; background-image: url("https://www.wpxpo.com/wp-content/uploads/2022/10/postx-feature-landing-bg3.png"); } } .postx-feature-landing-4 { &:after { background-size: 1600px auto; background-position: center 150px; background-image: url("https://www.wpxpo.com/wp-content/uploads/2022/10/postx-feature-landing-bg4.png"); } } //Progress Bar .xpo-progressbar-wrapper { background: #000B62; position: relative; &:after { background-image: url("https://www.wpxpo.com/wp-content/uploads/2022/10/postx-performance-bg.png"); background-size: cover; background-position: center 0px; background-repeat: no-repeat; top: 0; left: 0; width: 100%; height: 100%; position: absolute; content: ""; } .xpo-container { position: relative; z-index: 1; } } .xpo-progressbar { position: relative; max-width: 180px; text-align: center; margin: 0 auto; } .xpo-progressbar svg { width: 180px; height: 180px; margin: 0 auto; text-align: center; } .progressbar-value { font-size: 32px; font-weight: 700; position: absolute; top: 61%; left: 50%; color: #fff; transform: translate(-50%, -50%); } .progressbar-title { display: inline-block; margin-bottom: 20px; font-size: 28px; color: #fff; font-weight: 700; } .xpo-bar-1, .xpo-bar-2, .xpo-bar-3, .xpo-bar-4 { fill: none; stroke-width: 8px; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; } .xpo-bar-bg { fill: none; stroke-width: 36px; stroke: #001138; } .xpo-bar-1 { stroke: #41C5FF; filter: drop-shadow(0 0px 5px #2196f3); } .xpo-bar-2 { stroke: #00FFB1; filter: drop-shadow(0 0px 5px #00FFB1); } .xpo-bar-3 { stroke: #FFD972; filter: drop-shadow(0 0px 5px #FFD972); } .xpo-bar-1, .xpo-bar-2, .xpo-bar-3 { stroke-dasharray: 440; stroke-dashoffset: 0; animation: progress-2 .75s ease-out; } .xpo-bar-4 { stroke: #FF71A7; stroke-dasharray: 470; stroke-dashoffset: 50; animation: progress-2 .75s ease-out; filter: drop-shadow(0 0px 5px #FF71A7); } @keyframes progress-1 { from { stroke-dashoffset: 440; } to { stroke-dashoffset: 0; } } @keyframes progress-2 { from { stroke-dashoffset: 470; } to { stroke-dashoffset: 50; } } .xpo-live-video { pointer-events: none; // border: 15px solid #fff; border-radius: 8px; // box-shadow: 0 20px 80px -12px rgb(50 50 93 / 30%), 0 20px 40px -20px rgb(0 0 0 / 30%), 0 -15px 50px -10px rgb(0 0 0 / 35%); width: 100%; } //footer .xpo-footer-brand { img { max-width: 70%; margin-bottom: 20px; } color: rgba(255,255,255,.6); font-size: 14px; line-height: 25px; >div { padding-right: 20px; } } .xpo-title-shape { position: relative; &:after { position: absolute; left: 0; bottom: 6px; height: 17px; width: calc(100% + 12px); background: #ffce96; content: ""; border-radius: 10px; z-index: -1; margin-left: -6px; transform: skewX(-30deg); } } @media (max-width: 1200px) { .xpo-tap-content-nav ul>li>span { padding: 7px 12px; font-size: 14px; } .xpo-tap-content-nav ul>li { margin: 0 5px; } .video-bg { margin-left: -53px; } .xpo-review-container { grid-template-columns: 200px 1fr; grid-gap: 50px; } } @media (max-width: 992px) { .xpo-main-title42, .xpo-main-title44 { font-size: 32px; } .xpo-space-pt130 { padding-top: 100px; } .xpo-space-pt150 { padding-top: 110px; } .xpo-postx-start { padding-top: 110px; padding-bottom: 150px; } .xpo-postx-overview { margin-top: -250px; } .xpo-featured-on-item { grid-gap: 20px; padding: 20px 50px; } .video-bg { max-width: 100%; height: auto; padding: 83px; background-position: 50% 59%; background-size: 723px; margin-left: 0; margin-top: -30px; } .xpo-satisfy-item { > img { display: none; } } .xpo-postx-builder-image .xpo-popup-btn-bg { top: 25%; left: 39%; } .xpo-tap-content-nav ul>li>span { padding: 6px 10px; font-size: 13px; } .xpo-tap-content-nav ul>li { margin: 0 5px 10px; } .xpo-tap-content-nav ul>li.active>span:after { display: none; } .xpo-feature-item .xpo-feature-content { padding: 25px; } .xpo-feature-item .xpo-feature-content h4 { font-size: 18px; } .xpo-feature-item .xpo-feature-content span { font-size: 14px; } .xpo-creation-content ul li { margin: 5px 0 5px 0; } .xpo-creation-content>ul li span { padding: 8px 20px; } .xpo-postx-blocks { padding: 30px 30px 0; } .xpo-postx-blocks .xpo-main-title42 { font-size: 24px; } .xpo-postx-blocks .xpo-title20 { font-size: 16px; } .xpo-slider-check li { margin-right: 20px; } .xpo-card-feature { padding: 30px; } .xpo-feature-grid .xpo-card-feature { padding: 30px; } .xpo-card-feature .xpo-postx-blocks-image { margin: -30px -30px 30px; } .xpo-postx-blocks-content .xpo-main-title42 { font-size: 24px; } .xpo-feature-grid { grid-column-gap: 50px; } .xpo-cta-wrapper { padding: 40px; } .xpo-cta-left .xpo-cta-content { margin-bottom: 40px; } .xpo-cta-left { display: block; } .xpo-postx-list li { margin: 5px; font-size: 20px; padding: 10px 20px; } .xpo-sm-mb20 { margin-bottom: 20px; } .xpo-sm-mb25 { margin-bottom: 25px; } .xpo-sm-mb40 { margin-bottom: 40px; } .xpo-sm-mb50 { margin-bottom: 50px; } .xpo-sm-mt50 { margin-top: 50px; } .xpo-btn-group { .xpo-btn-postx-light { &:last-child { margin-top: 10px; margin-left: 0 !important; } } } //compare .postx-compare-hero .xpo-feature-left { grid-template-columns: 1fr; } } @media (max-width: 767px) { .video-bg { max-width: 100%; height: auto; padding: 60px; background-position: 50% 57%; background-size: 480px; margin-top: 0; } .xpo-main-title42 { font-size: 32px; } .xpo-title22 { font-size: 18px; } .xpo-satisfy-item { > img { display: none; } } .xpo-reviews-rating h4 { font-size: 16px; } .xpo-feature-left { grid-template-columns: 1fr; } .xpo-review-container { grid-template-columns: 1fr; grid-gap: 40px; } .xpo-featured-on-item { grid-template-columns: 1fr; } .xpo-postx-blocks { grid-template-columns: 1fr; padding: 30px; } .xpo-feature-grid { grid-template-columns: 1fr; grid-gap: 50px; } .xpo-btn-group { .xpo-btn-postx-light { &:last-child { margin-top: 0; margin-left: 10px !important; } } } .xpo-feature-video .xpo-video-popup-image .xpo-video-popup span { margin-left: -90px; left: 50%; } } .xpo-landing-footer { background: #f8f8f8; border-top: 1px solid #e5e5e5; .xpo-footer-inner { padding: 50px 0; .xpo-footer-img { img { width: 250px; } margin-bottom: 40px; } .xpo-footer-brand { p { margin: 0; font-size: 20px; a { text-decoration: underline; font-weight: 700; } } margin-bottom: 60px; } .xpo-footer-menu { list-style: none; margin: 0; padding: 0; li { display: inline-block; margin: 0 20px; font-size: 22px; a { color: $metacolor; transition: 400ms; &:hover { color: $primarycolor; } } } } } } span.typed-text { color: #ff5845; } span.cursor { display: inline-block; background-color: red; margin-left: 0.1rem; width: 2px; animation: blink 1s infinite; line-height: 1; } span.cursor.typing { animation: none; } @keyframes blink { 0% { background-color: #ff5845; } 49% { background-color: #ff5845; } 50% { background-color: #ff5845; } 99% { background-color: #ff5845; } 100% { background-color: #ff5845; } }
Leave a Comment