BrandChamp CSS
Fri Feb 10 2023 09:28:25 GMT+0000 (Coordinated Universal Time)
/*
* 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
Comments