/* * Menu Icons and Description * Please change the variable value below to update * icon and description on the submenu */ // Icons $analytics: '/wp-content/uploads/2022/11/solutions-analytics-reporting.svg'; $consumer: '/wp-content/uploads/2022/11/solutions-consumer-generated-content.svg'; $content: '/wp-content/uploads/2022/11/solutions-content-management.svg'; $segmenting: '/wp-content/uploads/2022/11/solutions-segmenting-personalization.svg'; $relationship: '/wp-content/uploads/2022/11/solutions-relationship-management.svg'; $rewards: '/wp-content/uploads/2022/11/solutions-reward.svg'; $referral: '/wp-content/uploads/2022/11/solutions-referral-tracking.svg'; $payments: '/wp-content/uploads/2022/11/solutions-payments.svg'; $affiliate: '/wp-content/uploads/2022/11/platform-affiliate-program.svg'; $ambassador: '/wp-content/uploads/2022/11/platform-ambassador-program.svg'; $creator: '/wp-content/uploads/2022/11/platform-creator-management.svg'; $customer: '/wp-content/uploads/2022/11/platform-customer-advocacy.svg'; $influencer: '/wp-content/uploads/2022/11/platform-influencer-marketing.svg'; $refprograms: '/wp-content/uploads/2022/11/platform-referral-program.svg'; $loyalty: '/wp-content/uploads/2022/11/platform-loyalty-program.svg'; $blog: '/wp-content/uploads/2022/11/resources-blog.svg'; $success: '/wp-content/uploads/2022/11/resources-success-stories.svg'; $guides: '/wp-content/uploads/2022/11/resources-guides-ebook.svg'; $videos: '/wp-content/uploads/2022/11/resources-videos.svg'; $webinars: '/wp-content/uploads/2022/11/resources-webinars.svg'; $comparison: '/wp-content/uploads/2022/11/resources-comparison.svg'; // Description $analytics-desc: 'Lorem ipsum dolor sit amet consetetur sadipscing.'; $consumer-desc: 'Lorem ipsum dolor sit amet consetetur sadipscing.'; $content-desc: 'Lorem ipsum dolor sit amet consetetur sadipscing.'; $segmenting-desc: 'Lorem ipsum dolor sit amet consetetur sadipscing.'; $relationship-desc: 'Lorem ipsum dolor sit amet consetetur sadipscing.'; $rewards-desc: 'Lorem ipsum dolor sit amet consetetur sadipscing.'; $referral-desc: 'Lorem ipsum dolor sit amet consetetur sadipscing.'; $payments-desc: 'Lorem ipsum dolor sit amet consetetur sadipscing.'; $affiliate-desc: 'Lorem ipsum dolor sit amet consetetur sadipscing.'; $ambassador-desc: 'Lorem ipsum dolor sit amet consetetur sadipscing.'; $creator-desc: 'Lorem ipsum dolor sit amet consetetur sadipscing.'; $customer-desc: 'Lorem ipsum dolor sit amet consetetur sadipscing.'; $influencer-desc: 'Lorem ipsum dolor sit amet consetetur sadipscing.'; $refprograms-desc: 'Lorem ipsum dolor sit amet consetetur sadipscing.'; $loyalty-desc: 'Lorem ipsum dolor sit amet consetetur sadipscing.'; $blog-desc: 'Discover practice by our blog.'; $success-desc: 'Get inspired by our success stories.'; $guides-desc: 'Enrich knowledge with our guides & e-books.'; $videos-desc: 'Quality courses from our videos.'; $webinars-desc: 'Get in touch with our webinars.'; $comparison-desc: 'Turn into high-performance sales funnel.'; // Declare Sub-menu Icons $menu-image: ( "analytics": $analytics, "consumer": $consumer, "content": $content, "segmenting": $segmenting, "relationship": $relationship, "rewards": $rewards, "referral": $referral, "payments": $payments, "affiliate": $affiliate, "ambassador": $ambassador, "creator": $creator, "customer": $customer, "influencer": $influencer, "refprograms": $refprograms, "loyalty": $loyalty, "blog": $blog, "success": $success, "guides": $guides, "videos": $videos, "webinars": $webinars, "comparison": $comparison ); // Declare Sub-menu Description $menu-description: ( "analytics": $analytics-desc, "consumer": $consumer-desc, "content": $content-desc, "segmenting": $segmenting-desc, "relationship": $relationship-desc, "rewards": $rewards-desc, "referral": $referral-desc, "payments": $payments-desc, "affiliate": $affiliate-desc, "ambassador": $ambassador-desc, "creator": $creator-desc, "customer": $customer-desc, "influencer": $influencer-desc, "refprograms": $refprograms-desc, "loyalty": $loyalty-desc, "blog": $blog-desc, "success": $success-desc, "guides": $guides-desc, "videos": $videos-desc, "webinars": $webinars-desc, "comparison": $comparison-desc ); // Mixins @mixin bc-transition{ transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; } // Media Queries $desktop: 1440px; $tablet: 1115px; $mobile: 860px; $min-tablet: 1116px; $min-mobile: 861px; /* General */ body:not(.fl-builder-edit){ a, .fl-button, .fl-button-text, .pp-button, button, input[type="submit"]{ @include bc-transition; } @media(min-width: $min-mobile){ .sticky-sidebar{ position: sticky; top: 5rem; align-self: start; } } } .fl-button-has-icon{ i.fa-long-arrow-right::before{ content: ""; width: 13px; height: 13px; display: block; background: url('/wp-content/uploads/2022/11/arrow-button.svg') no-repeat; background-size: contain; } } .fl-module-pp-logos-grid.fl-visible-desktop{ .pp-logos-content{ .pp-logo{ margin-bottom: 0 !important; } } } .pp-dual-button-inner{ a.pp-button{ transition: all .3s ease-in-out !important; border-radius: 24px; width: fit-content !important; padding-left: 24px !important; padding-right: 24px !important; .fa-long-arrow-right::before{ content: ""; width: 13px; height: 13px; display: block; background: url('/wp-content/uploads/2022/11/arrow-button.svg') no-repeat; background-size: contain; } } @media(max-width: $mobile){ width: 100%; .pp-dual-button{ a{ width: 100% !important; } &.pp-dual-button-2{ padding-top: 15px; } } } } .bc-green-arrow{ .pp-dual-button-inner{ .pp-dual-button-2{ a.pp-button{ .fa-long-arrow-right::before{ background: url('https://bchampiodev.wpengine.com/wp-content/uploads/2022/11/arrow-green.svg') no-repeat !important; background-size: contain !important; } } } } } .fl-rich-text{ p{ margin-bottom: 0 !important; &:not(:first-child){ margin-top: 22px; } } ul{ margin-top: 30px; & >{ li{ &:not(:first-child){ margin-top: 12px; } } } } } .gform_wrapper{ .gform_heading{ .gform_required_legend{ display: none !important; } } form{ .gform_body{ .gform_fields{ .gfield{ &.gfield_error{ .ginput_container{ input{ border-color: #E63946 !important; } } .ginput_container_checkbox + .validation_message{ margin-top: 10px !important; } .validation_message{ font-size: 14px; &::before{ content: "\f06a"; font-family: "Font Awesome 5 Pro"; font-weight: 700; font-size: 14px; margin-right: 5px; vertical-align: middle; } } } } } } } } .bc-footer-form { form { .gform_body { .gform_fields { display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap; background-color: #fff; border-radius: 25px; padding: 2px 4px; border: 1px solid #EDEDED; .gfield { &:first-child { flex: 0 0 60%; } &:last-child { flex: 0 0 40%; text-align: right; } label { display: none !important; } .ginput_container { input { background-color: transparent !important; padding: 15px !important; } } .validation_message { position: absolute; font-size: 14px; bottom: -30px; left: 24px; } } } } } } .pp-icon-list-items{ .pp-icon-list-item{ span.pp-list-item-icon{ padding-top: 6px !important; } } } .bc-arrow-button{ a.fl-button{ i::before{ background: url('/wp-content/uploads/2022/11/arrow-green.svg') no-repeat !important; background-size: contain !important; transition: all .3s ease-in-out; width: 15px; } } } /* Header */ .bc-white-header{ background-color: #FFF !important; } .bc-header{ .fl-row-content-wrap{ .fl-row-content{ position: unset !important; } } } header{ &.fl-theme-builder-header-scrolled{ background: linear-gradient(90deg, #E5F6FF 0%, #F3FBFF 100%); box-shadow: 0 1px 25px rgb(57 63 72 / 10%); } &.fl-theme-builder-header-shrink{ .pp-advanced-menu{ nav{ ul.menu >{ li{ padding: 25px 0 !important; } } } } } } @media(min-width: $min-mobile){ .pp-advanced-menu{ nav{ ul.menu >{ li{ padding: 38px 0; &.menu-hide-desktop{ @media(min-width: 861px){ display: none; } } &.pp-has-submenu{ border-bottom: 2px solid transparent; @include bc-transition; position: unset !important; >{ .pp-has-submenu-container{ a{ .menu-item-text{ padding-right: 20px; .pp-menu-toggle{ transition: all .3s ease-in-out; right: 0; } } } } } &:hover{ .pp-has-submenu-container{ a{ .menu-item-text{ .pp-menu-toggle{ transform: rotate(-180deg); -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); } } } } } &.bc-submenu-open{ border-bottom-color: #53B7E2 !important; } } &.pp-has-submenu.bc-submenu-open >{ position: unset !important; ul.sub-menu{ display: grid !important; padding: 0; border-top: 1px solid #dedede; box-shadow: 0 10px 40px rgb(0 0 0 / 5%); width: 100% !important; left: 0 !important; display: grid !important; visibility: visible !important; opacity: 1 !important; grid-template-columns: 2fr 1fr !important; li{ &.submenu-main{ padding: 40px 60px 40px 80px; .pp-has-submenu-container{ a{ padding: 0; font-size: 20px; font-weight: 600; cursor: default !important; &:hover{ color: #121212 !important; } } } ul.sub-menu{ padding-top: 5px; width: 100%; display: grid !important; grid-template-columns: 1fr 1fr !important; column-gap: 40px; li{ margin-top: 25px; &.submenu-child{ a{ padding: 0; display: grid; grid-template-columns: 28px auto; grid-template-rows: auto; column-gap: 15px; grid-template-areas: "icon menu" "icon description"; transition: all .3s ease-in-out; .menu-item-text{ grid-area: menu; line-height: 1.25; } .menu-desc{ font-size: 14px; font-weight: 400; grid-area: description; margin-bottom: 0; margin-top: 5px; color: #7E7E7E !important; } .menu-image{ background-repeat: no-repeat; background-size: contain; width: 28px; height: auto; grid-area: icon; } } } &.submenu-button{ width: fit-content; padding-top: 40px; a{ padding: 0; color: #24B75C; font-weight: 600 !important; transition: all .3s ease-in-out; &::after{ content: ""; width: 14px; height: 12px; display: inline-block; background: url('/wp-content/uploads/2022/11/arrow-green.svg') no-repeat; background-size: cover; margin-left: 10px; transition: all .3s ease-in-out; } &:hover{ color: #25A756; text-decoration: underline; &:after{ margin-left: 15px; } } } } @each $name, $glyph in $menu-image { &.submenu-child-#{$name}{ .menu-image{ background-image: url($glyph); } } } @each $name, $glyph in $menu-description { &.submenu-child-#{$name}{ .menu-desc{ &::before{ content: $glyph; } } } } } } &.submenu-main-platform{ ul.sub-menu{ li{ &.submenu-button{ position: absolute !important; left: 80px; bottom: 40px; } } } } } &.submenu-side{ background: linear-gradient(180deg, #E5F6FF 0%, #FFFFFF 100%); padding: 40px 80px 40px 60px!important; .pp-has-submenu-container{ a{ font-size: 20px; font-weight: 600; padding: 0 !important; cursor: default !important; &:hover{ color: #121212 !important; } } } ul.sub-menu{ background: transparent !important; padding-top: 30px !important; width: 100%; display: block !important; li{ &:not(:first-child){ margin-top: 25px; } >{ a{ padding: 0 !important; transition: all .3s ease-in-out; display: flex; flex-direction: row; align-items: center; justify-content: space-between; &:hover{ color: #24B75C !important; &:after{ background: url('/wp-content/uploads/2022/11/arrow-green.svg') no-repeat; background-size: cover; } } &::after{ content: ""; display: block; width: 14px; height: 12px; background: url('/wp-content/uploads/2022/11/arrow-black.svg') no-repeat; background-size: cover; transition: background .3s ease-in-out; } } } &.current-menu-item{ a{ color: #24B75C !important; &::after{ background: url('/wp-content/uploads/2022/11/arrow-green.svg') no-repeat !important; background-size: cover !important; } } } } } &.submenu-side-blank{ ul.sub-menu{ padding-top: 0 !important; height: 0 !important; > { li{ min-height: 110px !important; > { .fl-builder-content{ padding: 0 !important; } a{ display: none !important; } } } } } .pp-has-submenu-container{ display: none !important; } } } .pp-menu-toggle{ display: none !important; } ul.sub-menu{ visibility: visible !important; opacity: 1 !important; position: unset !important; } } } } &.menu-parent-resources.pp-has-submenu.bc-submenu-open{ >{ ul.sub-menu{ grid-template-columns: 1.5fr 1fr !important; } } } &.current-page-parent, &.current-page-ancestor, &.current-menu-ancestor{ >{ .pp-has-submenu-container{ a{ color: #53B7E2; .pp-menu-toggle{ &::before{ border-color: #53B7E2; } } } } } } } } } } } /* Homepage */ body:not(.fl-builder-edit){ .bc-custom-accordion-wrapper{ position: relative; .bc-custom-accordion{ width: 40%; padding-right: 20px; .pp-accordion{ .pp-accordion-item{ &.pp-accordion-item-active{ .pp-accordion-button{ border-bottom: unset !important; padding-bottom: 12px !important; span.pp-accordion-button-label{ @media(min-width: $min-mobile){ font-weight: 600 !important; } } } } .pp-accordion-button{ span.pp-accordion-icon{ font-size: 0 !important; width: 24px !important; margin-right: 12px !important; padding-right: 0 !important; } } &:first-child{ .pp-accordion-button{ @media(min-width: $min-mobile){ padding-top: 0 !important; } } } .pp-accordion-content{ p{ a{ font-weight: 600; display: block; margin-top: 25px; &::after{ content: ""; display: inline-block; width: 15px; height: 15px; background: url('/wp-content/uploads/2022/11/arrow-green.svg') no-repeat; background-size: contain; margin-left: 12px; vertical-align: middle; transition: all .3s ease-in-out; } &:hover{ &:after{ margin-left: 16px; } } } } img.alignnone{ position: absolute; top: 0; right: 0; margin: 0 !important; width: 50%; } } } } &.bc-custom-accordion--right{ float: right; padding-right: 0 !important; padding-left: 20px; img.alignnone{ right: unset !important; left: 0; } } } } } .bc-objective-infobox{ .pp-infobox-wrap{ .pp-infobox{ cursor: pointer; .pp-infobox-description{ .pp-infobox-button{ text-align: right !important; .pp-button{ font-size: 0 !important; i{ margin-left: 0 !important; } } } } &:hover{ .pp-infobox-title{ text-decoration: underline; } .pp-infobox-description{ .pp-infobox-button{ .pp-button{ background-color: rgb(37, 167, 86); } } } } } } &.bc-objective-infobox--unlink{ .pp-infobox-wrap{ .pp-infobox{ cursor: default; &:hover{ .pp-infobox-title{ text-decoration: none; } } } } } } .bc-testimonial-carousel{ .pp-testimonials{ .owl-carousel{ .owl-stage-outer { width: calc(100% + 20px) !important; padding: 25px 0; .owl-item { margin-right: 18px !important; margin-left: 16px; .pp-content-wrapper{ margin-bottom: 35px !important; } .pp-vertical-align{ display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 30px; width: 100%; .pp-title-wrapper{ h6{ margin-top: 0; } p{ margin-bottom: 0; } } .pp-testimonials-image{ margin-right: 0 !important; img{ max-height: 45px !important; max-width: 100px !important; } } } } } } } &.partner-testimonial{ .owl-carousel{ .owl-stage-outer { .owl-item { .pp-vertical-align{ flex-direction: row !important; justify-content: flex-start !important; gap: 15px; } } } } } } /* Solutions */ .bc-clickable-box{ .fl-col-content{ cursor: pointer; .fl-photo{ .fl-photo-content{ border-radius: 16px; -webkit-border-radius: 16px; -moz-border-radius: 16px; -khtml-border-radius: 16px; overflow: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); img{ transition: all .3s ease-in-out; } } } .bc-arrow-button{ a.fl-button i{ transition: all .3s ease-in-out; } } &:hover{ .fl-photo-content{ img{ transform: scale(1.1); } } .fl-heading{ text-decoration: underline; } .bc-arrow-button{ a.fl-button i{ margin-left: 12px; } } } } } /* Footer */ footer{ .fl-rich-text{ a{ text-decoration: none !important; } } .pp-social-icons{ .pp-social-icon{ i.fa-trello::before{ content: ""; width: 20px; height: 18px; display: block; background: url('/wp-content/uploads/2022/11/social-e1669106874120.png') no-repeat; background-size: contain; } i.fa-linux::before{ content: ""; width: 20px; height: 18px; display: block; background: url('/wp-content/uploads/2022/11/social-1-e1669106913834.png') no-repeat; background-size: contain; } } } .fl-rich-text{ p:not(:first-child){ margin-top: 15px; } p:last-child strong{ font-size: 9px; padding: 2px 8px; background: #F9C344; border-radius: 8px; margin-left: 5px; display: inline-block; vertical-align: middle; color: #121212 !important; } } } /* Accordion Basic */ .bc-accordion-basic{ .pp-accordion{ .pp-accordion-item{ &.pp-accordion-item-active{ .pp-accordion-button{ border-bottom: unset !important; padding-bottom: 15px; .pp-accordion-button-icon{ color: #53B7E2; } } } } } } /* Resources */ .bc-resources-filter{ .fl-rich-text{ ul{ padding-left: 0; list-style: none; margin: 0 !important; li{ display: inline-block; padding: 8px 20px; border-radius: 24px; transition: all .3s ease-in-out; background: transparent; &:not(:first-child){ margin-left: 5px; } a{ text-decoration: none; transition: all .3s ease-in-out; } &:hover, &.active{ background: #24B75C; a{ color: #FFFFFF !important; } } } } } @media(max-width: $mobile){ .fl-rich-text{ width: 100%; overflow-x: scroll; ul{ width: max-content; } } } } .bc-trans-button{ .fl-button-has-icon{ a.fl-button{ i.fa-long-arrow-right::before{ background: url('/wp-content/uploads/2022/11/arrow-green.svg') no-repeat !important; background-size: contain !important; transition: all .3s ease-in-out; } &:hover{ i.fa-long-arrow-right::before{ background: url('/wp-content/uploads/2022/11/arrow-button.svg') no-repeat !important; background-size: contain !important; } } } } } /* Contact */ .contact-social{ .pp-social-icons{ .pp-social-icon{ i.fa-rss::before { content: ""; width: 24px; height: 18px; display: block; background: url(/wp-content/uploads/2022/11/social-e1669106874120.png) no-repeat; background-size:contain; } } } } .pp-gf-content{ .gform_wrapper{ form.contact-form{ .gform_body{ .gform_fields{ .gfield{ @media(min-width: 861px){ &.gf_half{ width: 50% !important; display: inline-block !important; vertical-align: top !important; &.gf_left{ padding-right: 10px; } &.gf_right{ padding-left: 10px; } } } &:not(:last-child){ margin-bottom: 20px; } label{ margin-bottom: 12px !important; } .ginput_container{ select{ width: 100%; border-radius: 8px; appearance: none; -webkit-appearance: none; -moz-appearance: none; background: url('/wp-content/uploads/2022/11/arrow-nav.svg') no-repeat; background-size: 16px; background-position: 98% center; padding: 0 20px !important; } } &.hidden_label{ legend{ display: none !important; } } .gchoice{ label{ font-size: 16px; font-weight: 400; margin-left: 10px; margin-bottom: 0 !important; vertical-align: top; } input{ margin-top: 0 !important; &::before{ clip-path: polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%); } &:checked{ background: #53b7e2 !important; } } @media(max-width: $mobile){ display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; } } textarea{ height: 100px; } } } } .gform_footer{ padding-top: 25px; } .gform_page_footer{ padding-top: 25px; text-align: right; } } } } /* Login */ #modal-peycrqm2s81h{ .pp-modal-header{ .pp-modal-title { padding-top: 23px; padding-bottom: 23px; } } @media(max-width: $mobile){ .pp-modal-content{ padding: 0 !important; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; } } } .login-form-module{ .form-title{ font-weight: 700 !important; } } .login-form{ .gfield--width-half{ width: 50% !important; display: inline-block !important; } .bc-link{ text-align: right; a{ font-size: 14px; color: #0A1931; font-weight: 400; } } .bcf-account{ .ginput_container{ position: relative; &::after { content: "brandchamp.io"; padding: 7px 20px; background: #F2F8FD; border-radius: 34px; display: inline-block; font-size: 16px; position: absolute; top: 5px; right: 5px; } input{ padding: 5px 160px 5px 20px !important; } } } input[type="text"]{ &::placeholder { font-weight: 400; color: #0A1931; } } div.hidden_label { label{ display: none !important; } } .gchoice{ label{ margin-left: 5px !important; font-size: 14px !important; } } .gform_footer{ padding-top: 15px !important; input[type="submit"]{ color: #fff; background-color: #24b75c; font-family: "Archivo",sans-serif; font-weight: 600; font-size: 18px; line-height: 1.45; text-transform: none; border-style: none; border-width: 1px; border-color: #121212; border-radius: 24px; transition: all .3s ease-in-out; &:hover{ background-color: #25a756; } } } } /* Pricing */ .bc-pricing-tabs{ .pp-tabs{ .pp-tabs-labels{ width: max-content !important; background: #ffffff; padding: 5px; border-radius: 25px; box-shadow: #00000012 0 0 20px; .pp-tabs-label{ border-radius: 24px; padding: 6px 16px; &:not(:last-child){ margin-right: 5px; } &.pp-tab-active{ .pp-tab-title{ font-weight: 600 !important; } } } } } @media(max-width: $mobile){ .pp-tabs{ .pp-tabs-labels{ width: 100% !important; display: flex !important; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: nowrap; .pp-tabs-label{ &:not(:last-child){ margin-right: 3px; } padding: 9px 20px; flex: 1 1 auto; .pp-tab-label-flex{ justify-content: center; .pp-tab-title{ font-size: 14px !important; } } } } .pp-tabs-panels{ .pp-tabs-panel{ .pp-tabs-label { display: none !important; } } } } } } .bc-pricing-table{ .pp-pricing-table{ .pp-pricing-table-colset{ display: flex !important; flex-direction: row; align-items: flex-end; justify-content: center; .pp-pricing-table-col{ width: 30% !important; &.pp-pricing-table-highlight{ width: 40% !important; .pp-pricing-featured-title{ @media(min-width: 861px){ font-size: 35px !important; } &::after{ content: "Popular plan"; font-size: 12px; color: #121212; padding: 7px 15px; background: #F9C344; border-radius: 24px; float: right; margin-top: 10px; } } .pp-pricing-table-inner-wrap{ @media(min-width: 861px){ .pp-pricing-table-header{ .pp-pricing-table-title{ font-size: 20px !important; } } .pp-pricing-table-features{ padding: 20px 0; margin: 30px 0; font-size: 20px; } .pp-pricing-table-price{ font-size: 35px !important; .pp-pricing-table-duration{ opacity: 1; font-size: 20px !important; text-transform: lowercase !important; } } } } } .pp-pricing-featured-title{ position: unset !important; text-align: left !important; h2{ padding: 0 !important; font-size: inherit; color: inherit; display: inline-block; } } .pp-pricing-table-duration{ text-transform: lowercase !important; } .pp-pricing-table-inner-wrap{ padding-top: 10px; .pp-pricing-table-header{ .pp-pricing-table-title{ height: 28px !important; } } .pp-pricing-table-features{ padding: 15px 0; border-top: 1px solid #dedede; border-bottom: 1px solid #dedede; margin: 25px 0; } .fl-button-wrap{ margin-top: 20px; } } } } @media(max-width: $mobile){ width: 100%; overflow-x: scroll; .pp-pricing-table-colset{ width: max-content; .pp-pricing-table-col{ margin-top: 35px !important; width: 30% !important; min-width: 340px; &.pp-pricing-table-highlight{ min-width: 440px; } } } } } } .bc-pricing-enterprise{ ul.pp-icon-list-items{ li.pp-icon-list-item{ display: inline-block !important; span.pp-list-item-icon{ padding-top: 3px !important; } &:not(:first-child){ margin-left: 20px; } @media(max-width: $mobile){ display: flex !important; flex-direction: row; flex-wrap: nowrap; width: 100%; span.pp-list-item-icon{ float: unset !important; } &:not(:first-child){ margin-left: 0; margin-top: 10px; } } } } } /* Career Detail */ .career-share{ .pp-social-share-inner{ grid-template-columns: repeat(3,auto) !important; .pp-share-button{ &:hover{ filter: unset !important; .pp-share-button-link{ border-color: #6EB5DE !important; } } .pp-share-button-link{ width: max-content; padding: 10px 16px; gap: 8px; background: #FFF !important; border-color: #fff; transition: all .3s ease-in-out; .pp-share-button-icon{ width: auto; } .pp-share-button-text{ span{ color: #121212; } } } } } } .career-content{ h2{ &:first-child{ margin-top: 0; } &:not(:first-child){ margin-top: 60px; @media(max-width: $mobile){ margin-top: 30px; } } margin-bottom: 30px; font-size: 35px; color: #0A1931; @media(max-width: $mobile){ font-size: 30px; } } ul{ padding-left: 22px; } } .career-form{ .ginput_container.ginput_container_fileupload{ border: 1px solid #dedede; padding: 6px 6px !important; border-radius: 8px; text-align: left; height: 50px; background-color: #fff !important; cursor: pointer; overflow: hidden; .validation_message { display: none !important; } input[type=file]::-webkit-file-upload-button { appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; margin-right: 10px; background: #F2F8FD; border: unset; color: #121212; padding: 10px 12px; font-family: "general-sans" !important; font-weight: 500; font-size: 14px; border-radius: 6px; cursor: pointer; } .gform_fileupload_rules { display: none; } } .form-title{ font-size: 25px; margin: 0; } .form-description{ font-size: 16px; margin-top: 8px; margin-bottom: 30px; } .gform_footer{ position: relative; &::before{ content: ""; width: 13px; height: 13px; display: block; background: url(/wp-content/uploads/2022/11/arrow-button.svg) no-repeat; background-size: contain; position: absolute; top: 50%; right: 34%; transform: translateY(50%); @media(max-width: $mobile){ right: 31%; } } } &.story-form{ .gform_footer::before{ right: 33% !important; } } &.webinar-form{ .gform_footer::before{ right: 28% !important; } } } .gfield_error .ginput_container.ginput_container_fileupload { border-color: #e63946 !important; } /* Comparison */ .bc-vertical-list{ ul{ li{ display: block !important; width: 100% !important; text-align: center !important; float: unset !important; &:last-child{ padding-bottom: 0 !important; } .pp-infolist-icon-inner{ margin: 0 auto; } } } } .bc-comparison-wrapper{ @media(max-width: $mobile){ .fl-row-content{ width: 100%; overflow-x: scroll; >{ .fl-col-group{ width: max-content !important; } } } } } /* Single Post */ .single-terms{ ul{ list-style: none; padding-left: 0; margin: 0; li{ display: inline-block; margin-right: 8px; a{ padding: 8px 14px; border: 1px solid #53B7E2; border-radius: 24px; color: #53B7E2; transition: all .3s ease-in-out; text-decoration: none; &:hover{ background: #53B7E2; color: #FFF; } } } } } .single-top-author{ .pp-infobox{ .pp-infobox-title{ margin: 0; @media(max-width: $mobile){ padding-top: 10px; } } .pp-description-wrap{ display: flex; flex-direction: row; align-items: center; column-gap: 8px; padding-top: 5px; @media(max-width: $mobile){ justify-content: center; } p{ margin-bottom: 0; } } } } .bc-toc{ .pp-toc-container{ .pp-toc-header { padding: 0 0 0 0 !important; } .pp-toc-body { overflow-y: unset !important; ul{ list-style: none !important; li{ border-left: 2px solid transparent; padding-left: 15px; line-height: 1; &::before{ display: none; } &:not(:first-child){ margin-top: 15px; } a{ text-decoration: none !important; } &.active { border-color: #24B75C !important; text-align: left !important; display: block !important; a{ color: #24B75C !important; } } @media(max-width: $mobile){ border-color: #212121 !important; color: #212121 !important; } } } } } } .single-share{ .pp-share-button{ .pp-share-button-link { border-width: 0 !important; &:hover { background: linear-gradient(180deg, #E5F6FF 30%, #FFFFFF 100%); } } &:hover { filter: unset !important; } } } .single-author{ .pp-infobox-description{ .pp-description-wrap{ p{ margin-bottom: 15px; } .author-social{ display: inline-block; margin-right: 10px; @media(max-width: $mobile){ margin-right: 0; margin-bottom: 10px; } a{ padding: 6px 15px; background-color: transparent; color: #121212; border-radius: 17px; border: 1px solid #DEDEDE; font-size: 14px; font-weight: 500; text-decoration: none; transition: all 0.3s ease-in-out; display: inline-block; &:hover{ background-color: #324059; color: #FFF; border-color: #324059; } } & + p{ display: none!important; } &.social-twitter{ a::before{ content: "\f099"; font-family: "Font Awesome 5 Brands"; margin-right: 8px; color: #1DA1F2; vertical-align: middle; } } &.social-linkedin{ a::before{ content: "\f08c"; font-family: "Font Awesome 5 Brands"; margin-right: 8px; color: #0077b5; vertical-align: middle; } } } } } @media(max-width: $mobile){ .pp-heading-wrapper{ padding-top: 20px; } } } .single-readstory{ .fl-button-has-icon{ .fl-button{ &:hover{ i.fa-long-arrow-right{ margin-left: 15px; } } i.fa-long-arrow-right{ transition: all .3s ease-in-out; &::before { content: ""; width: 13px; height: 13px; display: block; background: url('/wp-content/uploads/2022/11/arrow-green.svg') no-repeat; background-size: contain; } } } } } .single-subscribe-form{ .gform_footer{ padding-top: 12px; position: relative; @media(min-width: 861px){ &::before{ content: ""; width: 13px; height: 13px; display: block; background: url(/wp-content/uploads/2022/11/arrow-button.svg) no-repeat; background-size: contain; position: absolute; top: 40%; right: 27%; transform: translateY(40%); } } } .gform_confirmation_message{ text-align: center; i{ font-size: 40px; color: #24B75C !important; } h2{ font-size: 35px; margin-top: 20px; margin-bottom: 0; } p{ margin: 15px 0 0 0; font-size: 16px; } } } .single-content{ h2{ font-size: 35px; &:not(:first-child){ margin-top: 60px; margin-bottom: 20px; } } h3{ font-size: 25px; &:not(:first-child){ margin-top: 60px; margin-bottom: 20px; } } h4{ font-size: 22px; &:not(:first-child){ margin-top: 60px; margin-bottom: 20px; } } ul, ol{ margin-top: 40px; margin-bottom: 30px; padding-left: 20px; li{ margin-bottom: 15px; } } figure{ margin-top: 40px; margin-bottom: 40px; img{ border-radius: 16px; } figcaption{ font-size: 16px; font-style: italic; margin-top: 20px; } } blockquote{ margin-top: 40px; border-left-color: #53B7E2; padding-left: 30px; padding-top: 0; padding-bottom: 0; p{ font-size: 22px; font-style: italic; } cite{ margin-top: 20px !important; display: block; } } } /* Privacy Policy, Cookie & Terms */ .legal-content{ h2{ font-size: 30px; &:not(:first-child){ margin-top: 60px; margin-bottom: 30px; } } ul, ol{ margin-top: 30px; margin-bottom: 30px; padding-left: 20px; li{ margin-bottom: 15px; } } &.legal-content--inside{ ul,ol{ padding-left: 50px; } } } /* Book a Demo */ .gf_progressbar_title{ margin-bottom: 0; text-align: right; font-size: 15px; @media(max-width: $mobile){ text-align: left; } } .partial_entry_warning { display: none !important; } .book-demo-form{ .gf_progressbar_title{ display: none; } .gf_progressbar{ background-color: #F3F5F7; .gf_progressbar_percentage{ background: #53B7E2; height: 5px; span{ display: none; } } } .gform_body{ @media(min-width: 861px){ padding-left: 90px; padding-right: 90px; padding-top: 80px; } @media(max-width: $mobile){ padding: 30px 20px 20px 20px; } .ginput_container_checkbox{ padding-top: 10px; .gfield_checkbox{ display: flex; flex-direction: row; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: 10px 15px; } } .demo-title{ margin-bottom: 40px !important; h1, h2{ font-size: 50px; } p{ font-weight: 400; color: #121212; } } } .gform_page_footer{ .gform_previous_button{ background-color: #F3F5F8 !important; color: #121212 !important; margin-right: 10px; transition: all .3s ease-in-out; &:hover{ background-color: #24b75c !important; color: #FFF !important; } } .gform_next_button{ background: url('https://bchampiodev.wpengine.com/wp-content/uploads/2022/11/arrow-button.svg') no-repeat !important; background-size: 15px !important; background-position: 82% center !important; background-color: #24B75C !important; padding-right: 50px !important; transition: all .3s ease-in-out; &:hover{ background-color: #25a756 !important; } } } } /* Partner Program */ .partner-infobox{ @media(max-width: $mobile){ .pp-infobox-image{ text-align: left; padding-bottom: 15px; } } } /* Responsive */ @media(max-width: $mobile){ .pp-hamburger-inner{ &::before{ display: none !important; } &::after{ bottom: -10px !important; } } .pp-advanced-menu{ nav{ ul.pp-advanced-menu-horizontal { width: 100% !important; top: 0 !important; transform: translatey(0) !important; padding: 0 20px !important; > { li.menu-item{ padding: 20px 0; border-bottom: 1px solid #dedede; &.menu-parent{ .pp-has-submenu-container{ a{ transition: all .3s ease-in-out; } } &.pp-active{ padding-bottom: 30px; .pp-has-submenu-container{ a{ span.pp-menu-toggle{ &::before{ border-color: #121212 !important; } } } &:hover{ a{ span.pp-menu-toggle{ &::before{ border-color: #121212 !important; } } } } } } } >{ ul.sub-menu{ padding-left: 15px; padding-top: 20px; li{ padding: 0 !important; .pp-has-submenu-container{ a{ font-size: 16px; font-weight: 600; span.pp-menu-toggle{ display: none; } } } ul.sub-menu{ display: block !important; padding-top: 0; li{ margin-top: 20px; &.submenu-button{ display: none !important; } } } &.submenu-main{ ul.sub-menu{ li{ &.submenu-child{ a{ padding: 0; display: grid; grid-template-columns: 24px auto; grid-template-rows: auto; column-gap: 14px; grid-template-areas: "icon menu" "icon description"; transition: all .3s ease-in-out; .menu-item-text{ grid-area: menu; line-height: 1.25; } .menu-desc{ font-size: 14px; font-weight: 400; grid-area: description; margin-bottom: 0; margin-top: 5px; color: #7E7E7E !important; } .menu-image{ background-repeat: no-repeat; background-size: contain; width: 24px; height: auto; grid-area: icon; } } } @each $name, $glyph in $menu-image { &.submenu-child-#{$name}{ .menu-image{ background-image: url($glyph); } } } @each $name, $glyph in $menu-description { &.submenu-child-#{$name}{ .menu-desc{ &::before{ content: $glyph; } } } } } } } &.submenu-side{ display: none !important; background: transparent !important; } } } } &.menu-login{ border-bottom: unset !important; text-align: center; padding: 30px 0; font-weight: 500; } &.menu-book{ border-bottom: unset !important; text-align: center; padding: 0; a{ width: fit-content; margin: 0 auto; padding: 9px 20px; background-color: #24B75C; color: #FFF; font-weight: 600; border-radius: 24px; font-size: 16px; &::after{ content: ""; width: 13px; height: 13px; display: inline-block; background: url(/wp-content/uploads/2022/11/arrow-button.svg) no-repeat; background-size: contain; margin-left: 8px; vertical-align: middle; } } } } } } } &.menu-open{ .pp-menu-nav{ .mobile-upper{ display: block; position: relative; width: 100%; background-color: #FFFFFF; height: 75px; border-bottom: 1px solid #DEDEDE; &::before { content: ""; width: 170px; height: 29px; background-image: url('/wp-content/uploads/2022/11/brandchamp-logo.png'); background-size: contain; background-repeat: no-repeat; background-position: center center; display: block; position: absolute; z-index: 999999; top: 20px; left: 15px; } .pp-menu-close-btn{ right: 20px !important; top: 25px !important; width: 30px !important; height: 30px !important; &::before{ height: 25px !important; } &::after{ height: 25px !important; } } } ul.menu{ width: 100%!important; top: 0!important; transform: translatey(0)!important; padding: 0 20px!important; position: relative; } } } } .bc-brand-logo{ .pp-logos-wrapper{ justify-content: center; .pp-logo{ img{ object-fit: contain; } &:last-child{ margin-right: 0 !important; } } } } .pp-content-post-carousel{ .owl-theme .owl-dots { margin-top: 30px !important; } } .pp-infobox-wrap{ .pp-infobox.layout-5{ .pp-icon-wrapper{ .pp-infobox-image{ img{ width: 40px; } } } .pp-infobox-title-wrapper{ .pp-infobox-title { margin-top: 15px; } } .pp-infobox-description{ margin-top: 10px; } } } .pp-advanced-menu-mobile-toggle.hamburger { padding: 0; } body:not(.fl-builder-edit){ .bc-custom-accordion-wrapper{ .bc-custom-accordion{ width: 100% !important; overflow-x: scroll; min-height: 550px; padding-left: 0 !important; padding-right: 0 !important; .pp-accordion{ width: fit-content; display: flex; flex-direction: row; .pp-accordion-item { flex: 0 0 auto; border-bottom: none !important; margin-right: 15px; .pp-accordion-button{ padding: 9px 20px !important; border: 1px solid #EDEDED !important; background-color: #FFFFFF; border-radius: 26px; span.pp-accordion-button-label{ font-size: 16px; } } .pp-accordion-content{ position: absolute; top: 15%; left: 0; border-bottom: none !important; img.alignnone{ position: unset !important; width: 400px !important; margin-top: 20px !important; } } &:first-child{ .pp-accordion-button{ padding-top: 9px !important; } } &.pp-accordion-item-active{ .pp-accordion-button{ padding-top: 9px !important; border: 1px solid #EAF8FF !important; background-color: #EAF8FF; span.pp-accordion-button-label{ font-weight: 500 !important; } } } } } } } .bc-objective-infobox{ overflow-x: scroll; padding-bottom: 50px; .objective-wrapper{ width: fit-content; display: flex; flex-direction: row; .fl-col { flex: 1 0 250px; &:not(:first-child){ margin-left: 15px; } .pp-infobox{ padding: 16px !important; h4.pp-infobox-title{ font-size: 16px !important; } .pp-description-wrap{ p{ font-size: 14px !important; } } } } } } .bc-mobile-scrollable{ overflow-x: scroll; padding-bottom: 50px; .objective-wrapper{ width: fit-content; display: flex; flex-direction: row; .fl-col { flex: 1 0 250px; &:not(:first-child){ margin-left: 15px; } } } } } .bc-privacy-mobile{ ul{ list-style: none !important; padding-left: 0; display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-top: 0 !important; margin-bottom: 0 !important; li{ margin-top: 0 !important; } } } .bc-footer-accordion{ .pp-accordion{ .pp-accordion-item{ .pp-accordion-button{ .pp-accordion-button-label{ font-weight: 600 !important; } } .pp-accordion-content{ p:not(:first-child){ margin-top: 15px; } p{ strong{ font-size: 9px; padding: 2px 8px; background: #F9C344; border-radius: 8px; margin-left: 5px; display: inline-block; vertical-align: middle; color: #121212 !important; } } } &.pp-accordion-item-active{ .pp-accordion-button{ border-bottom: none !important; } } } } } } // Media close
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter