Skip to content

Custom CSS

Anvith KS edited this page Apr 6, 2020 · 1 revision

The website is designed using WordPress and the Salient Theme Alongwith the theme design there are some customizations made to the design. The custom style sheet is included in the theme options. Maintained here for future reference. This page should be updated when the custom styles are updated.

/***** Custom Styles added to the theme options for sodafoundation.io ******/
body:not([data-header-format="left-header"]) #top nav >ul >.megamenu >ul >li >a{
    font-family: abeatbykai;
    font-size: 16px;
}

body {
    text-align: left;
    font: Normal 20px/28px Muli;
    letter-spacing: 0.5px;
    color: #000000;
    opacity: 1;
}
body[data-full-width-header="false"].admin-bar #slide-out-widget-area .slide_out_area_close{
    top: 10px;
}

.sf-menu >li ul{
    width: 25em !important;
}
.sf-menu li li:hover ul, .sf-menu li .sfHover ul {
    left: 25em !important;
}
 .sf-menu li li .on-left-side, .sf-menu li .sfHover .on-left-side{
    right: 25em !important;
    left: auto !important;
    margin-right: -20px !important;
    margin-left: 0 !important;
 }
 #header-secondary-outer nav > ul > li > a{
     line-height: 14px !important;
    font-size: 14px !important;
 }
 #header-secondary-outer #social li a i {
    height: 24px !important;
    line-height: 24px !important;
    font-size: 24px !important;
}
/*Smart SLider Custom styles*/
    .soda-elba-release-slider-overlay-center{
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        opacity: 0.5;
    }
    
/*Smart Slider */
/* Home Page Custom Styles*/
    #what-is-soda-foundation{
        background: transparent linear-gradient(90deg, #243680 0%, #223980 22%, #1E4481 41%, #185683 60%, #0F6F86 78%, #039089 95%, #009B8B 100%) 0% 0% no-repeat padding-box;
        opacity: 1;
        margin-top: -90px;
    }
    #what-is-soda-heading{
        margin-bottom: 20px;
    }
    #what-is-soda-foundation a{
        font-family: Muli, Bold;
        font-weight: 700;
    }
    #what-is-soda-foundation-heading .arrow-down {
      width: 0; 
      height: 0; 
      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
      margin: 0 auto;
      border-top: 20px solid #fff;
    }
    
    #events-list div.tribe-event-image{
        border-radius: 25px !important;
    }
    #events-list .tribe-events-list-widget .tribe-event-featured{
        background: #fff !important;
        text-align: center;
    }
    #events-list .tribe-events-list-widget .tribe-event-featured .tribe-event-title a{
        color: #000 !important;
    }
    #events-list .tribe-events-list-widget .tribe-event-featured .tribe-event-duration{
        color: #000 !important;
    }
    #events-list .tribe-events-list-widget .tribe-events-widget-link a{
        display: none;
    }
    #newsletter-section{
        background: transparent linear-gradient(180deg, #243680 0%, #000000 100%) 0% 0% no-repeat padding-box;
        opacity: 1;    
    }
    #newsletter-section .newsletter-form .nf-form-content{
        max-width: 1260px;
    }
    #newsletter-section .newsletter-form input{
        background-color: rgba(255, 255, 255, 0);
        border: 1px solid #BFBFBF;
    }
    #newsletter-section .newsletter-form input.newsletter-submit{
        background: #27CCC0 0% 0% no-repeat padding-box;
        opacity: 1;
        border: 1px solid #BFBFBF;
        text-align: center;
        font: 20px/28px Muli;
        font-weight: Bold 700;
        letter-spacing: 0.5px;
        color: #FFFFFF;
        text-transform: uppercase;
        opacity: 1;
    }
    #newsletter-section .newsletter-form input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
        font: 20px/32px Open Sans;
        letter-spacing: 0.5px;
        color: #BFBFBF;
        opacity: 1; /* Firefox */
    }

    #newsletter-section .newsletter-form input:-ms-input-placeholder { /* Internet Explorer 10-11 */
        font: 20px/32px Open Sans;
        letter-spacing: 0.5px;
        color: #BFBFBF;
    }
    
    #newsletter-section .newsletter-form input::-ms-input-placeholder { /* Microsoft Edge */
      font: 20px/32px Open Sans;
        letter-spacing: 0.5px;
        color: #BFBFBF;
    }
/* Home Page Custom style ends*/
/*The Foundation Overview*/
#soda-foundation-mission{
    background: transparent linear-gradient(90deg, #243680 0%, #223980 22%, #1E4481 41%, #185683 60%, #0F6F86 78%, #039089 95%, #009B8B 100%) 0% 0% no-repeat padding-box;
    opacity: 1;
}
/*The Foundation Overview ends*/
/*Members Page*/
    #members-page-submenu .page-submenu ul{
        background: transparent linear-gradient(90deg, #243680 0%, #223980 22%, #1E4481 41%, #185683 60%, #0F6F86 78%, #039089 95%, #009B8B 100%) 0% 0% no-repeat padding-box;
        opacity: 1;
    }
    #members-page-submenu .page-submenu ul li a{
        font: 24px/34px Muli;
        font-weight: Normal 400;
        letter-spacing: 2.4px;
        color: #ffffff;
        opacity: 1;
    }
    #members-page-submenu .page-submenu ul li a:hover{
        font: 24px/34px Muli;
        font-weight: Bold 700;
        letter-spacing: 2.4px;
        color: #27CCC0;
        opacity: 1;
    }
     #members-page-submenu .page-submenu ul li.current-menu-item a {
        font: 24px/34px Muli;
        font-weight: Bold 700;
        letter-spacing: 2.4px;
        color: #27CCC0;
        opacity: 1;
    }
    
    #members-page-submenu .page-submenu ul li a:before{
        content: "\f054";
        display: inline-block;
        word-spacing: 1px;
        position: relative;
        text-align: center;
        top: -2px;
        vertical-align: middle;
        max-width: 100%;
        font-family: FontAwesome;
        font-weight: normal;
        font-style: normal;
        text-decoration: inherit;
        -webkit-font-smoothing: antialiased;
        margin-right: 0.3em;

    }
/* Members Page ends*/
/*Join SOda*/
    #join-soda-benefits .row-bg-overlay{
        background: transparent linear-gradient(90deg, #243680 0%, #223980 22%, #1E4481 41%, #185683 60%, #0F6F86 78%, #039089 95%, #009B8B 100%) 0% 0% no-repeat padding-box !important;
    }
    #join-soda-benefits .nectar-fancy-ul ul li i.icon-default-style[class^="icon-"].icon-salient-thin-line{
        color: #fff !important;
        font-weight: 700;
    }
/*Join SOda ends*/
/*Team Member Custom Styles*/
    .wpb_wrapper >div.team-member{
        margin-bottom: 0;
    }
    .team-member img{
        filter: saturate(0);
        width: 70% !important;
    }
    .team-member h4 {
        text-align: center;
        font: 18px/26px Muli;
        font-weight: Bold 700;
        letter-spacing: 0.45px;
        color: #000000;
        opacity: 1;
    }
    .team-member .position{
        text-align: center;
        font: 14px/18px Open Sans;
        font-weight: Semibold 600;
        letter-spacing: 0.35px;
        color: #000000;
        opacity: 1;
    }
    .team-member p.description, .row .col .team-member p.description{
        text-align: center;
        font: 12px/18px Open Sans;
        font-weight: 100;
        border: none;
        letter-spacing: 0.3px;
        color: #000000;
        opacity: 1;
        margin-bottom: 0;
        padding: 0;
    }
    div.mega-model-popup div.model-popup-container > h2{
        
        font: 20px/28px Muli !important;
        font-weight: 700 !important;
        letter-spacing: 0.5px !important;
        padding: 20px 20px !important;
        opacity: 1;
    }
    div.mega-model-popup div.model-popup-container p{
        text-align: left !important;
        font: 20px/32px Open Sans !important;
        font-weight: 300 !important;
        letter-spacing: 0 !important;
        color: #000000 !important;
        opacity: 1 !important;
    }
/* Team member custom styles end*/
/* Projects and Sub pages styles*/
    #plugins-page-submenu .page-submenu ul{
        /*background: transparent linear-gradient(90deg, #243680 0%, #223980 22%, #1E4481 41%, #185683 60%, #0F6F86 78%, #039089 95%, #009B8B 100%) 0% 0% no-repeat padding-box;
        opacity: 1;*/
    }
    #plugins-page-submenu .page-submenu ul li a{
        font: 16px/26px Muli;
        font-weight: 400;
        letter-spacing: 2.4px;
        color: #000;
        opacity: 1;
    }
    #plugins-page-submenu .page-submenu ul li a:hover{
        font: 16px/26px Muli;
        font-weight: Bold 700;
        letter-spacing: 2.4px;
        color: #27CCC0;
        opacity: 1;
    }
    #plugins-page-submenu .page-submenu ul li.current-menu-item a {
        font: 16px/26px Muli;
        font-weight: Bold 700;
        letter-spacing: 2.4px;
        color: #27CCC0;
        opacity: 1;
    }
    #plugins-page-submenu.kubernetes-csi .page-submenu ul li:nth-child(1) a{
        font: 16px/26px Muli;
        font-weight: Bold 700;
        letter-spacing: 2.4px;
        color: #27CCC0;
        opacity: 1;
    }
    #plugins-page-submenu.openstack .page-submenu ul li:nth-child(2) a{
        font: 16px/26px Muli;
        font-weight: Bold 700;
        letter-spacing: 2.4px;
        color: #27CCC0;
        opacity: 1;
    }
    #plugins-page-submenu.vmware .page-submenu ul li:nth-child(3) a{
        font: 16px/26px Muli;
        font-weight: Bold 700;
        letter-spacing: 2.4px;
        color: #27CCC0;
        opacity: 1;
    }
    #plugins-page-submenu .page-submenu ul li a:before{
        content: "\f054";
        display: inline-block;
        word-spacing: 1px;
        position: relative;
        text-align: center;
        top: -2px;
        vertical-align: middle;
        max-width: 100%;
        font-family: FontAwesome;
        font-weight: normal;
        font-style: normal;
        text-decoration: inherit;
        -webkit-font-smoothing: antialiased;
        margin-right: 0.3em;

    }
/* Projects and Sub pages styles end*/
/*Footer custom style*/

/*Footer custom style ends*/
.project-icon-container .project-icon.style-svg, .goals-container .goals-icon.style-svg{
    width: 150px;
    height: 150px;
}
.project-icon-container .project-icon.style-svg polygon{
    fill: #27ccc0 !important;
}
.project-icon-container .project-icon.style-svg path{
    fill: #27ccc0 !important;
}
.project-icon-container .project-icon.style-svg rect{
    fill: #27ccc0 !important;
}t
.goals-container .goals-icon.style-svg polygon, .goals-container .goals-icon.style-svg path, .goals-container .goals-icon.style-svg rect{
    fill: #333333 !important; 
}
.goals-container .goals-icon.style-svg circle{
    fill: #27ccc0 !important;
}
/*Key Features*/
.key-features-description{
    font-size: 14px; 
    line-height: 18px; 
    font-family: Open Sans, Light;
    letter-spacing: 0.3px;
    text-align: left;
}
/*Testimonial Slider*/
.testimonial-quote-desc{
    text-align: center;
    font: Bold 24px/34px Muli;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: #000000;
    opacity: 1;
}
.testimonial-quote-author{
    text-align: center;
    font: 18px/34px Open Sans;
    font-style: italic; 
    letter-spacing: 0.45px;
    opacity: 1;
}
/* FAQs Custom Styles*/
    #soda-foundation-faqs .toggles .toggle a{
        text-align: left;
        font: 20px/28px Muli;
        font-weight: Normal;
        letter-spacing: 0.5px;
        color: #888888;
        opacity: 1;
    }
    #soda-foundation-faqs .toggles .toggle.open a{
        text-align: left;
        font: 20px/28px Muli;
        font-weight: Bold 700;
        letter-spacing: 0.5px;
        color: #27CCC0;
        opacity: 1;
    }
/* FAQs Cutom style ends*/

Clone this wiki locally