Navigation sticky after scroll
(works only if the first panel is either "Hero" or "Hero Slider")
Navigation with brand-logo
/* general */
body{
background-color: bg_main;
color: font_main;
}
hr{
background-color: font_secondary;
}
h6.subtitle,
.panel-comments .reply-wrap{
color: font_secondary;
}
.color-bg-secondary{
background-color: bg_secondary;
}
/* inputs */
input[type="text"],
input[type="email"],
input[type="password"],
textarea{
background-color: bg_secondary;
color: font_main;
}
/* main nav*/
.main-nav a,
#mobile-overlay a,
#mobile-overlay .social{
color: font_main;
}
.main-nav a:hover,
.main-nav a.active,
#mobile-overlay a:hover,
#mobile-overlay a.active{
color: font_secondary;
}
/* cta */
.cta,
input[type="submit"],
#sliding-popup .eu-cookie-compliance-buttons button{
color: btn_color_main;
border: 2px solid btn_color_main;
}
.cta:hover,
input[type="submit"]:hover,
#sliding-popup .eu-cookie-compliance-buttons button:hover{
color: btn_main_hover;
background-color: btn_color_main;
}
.cta.cta-white,
#sliding-popup .eu-cookie-compliance-buttons button.decline-button{
color: btn_color_secondary;
border: 2px solid btn_color_secondary;
}
.cta.cta-white:hover,
#sliding-popup .eu-cookie-compliance-buttons button.decline-button:hover{
color: btn_secondary_hover;
background-color: btn_color_secondary;
}
/* slick slider */
.slick-dots li button{
background-color: bg_secondary;
border: 1px solid font_main;
}
.slick-dots li.slick-active button{
background-color: font_secondary;
border: 1px solid font_secondary;
}
/* cookie banner */
#sliding-popup .eu-cookie-compliance-message button{
color: font_main;
}
/* tags */
.tag{
background-color: font_secondary;
color: font_dark};
}
/* comments */
.panel-comments .reply-wrap{
color: font_secondary;
}
/* sidebar */
.sidebar li{
color: font_main;
}
.sidebar li.active{
color: font_secondary;
}
/* pagination */
.posts-post-tesaer-wrap nav a{
color: font_secondary;
background-color: bg_secondary;
}
/* hover-details-overlay-effect-1 */
.hover-details-overlay-effect-1 .details-container{
color: font_main;
}
.hover-details-overlay-effect-1 .details-container hr{
background-color: font_main;
}
/* panel-image-grid */
.panel-image-grid .filter-bar .mobile-dropdown{
background-color: bg_secondary;
}
.panel-image-grid .filter-bar .filter-trigger{
color: font_main;
background-color: bg_secondary;
}
.panel-image-grid .filter-bar .filter-trigger.active,
.panel-image-grid .filter-bar .filter-trigger:hover,
.panel-image-grid .filter-bar .icon-filter{
color: btn_main_hover;
background-color: btn_color_main;
}
/* panel-usp */
.panel-usp .element-usp .icon-wrap i,
.panel-usp .element-usp .icon-wrap .text-wrap .subtitle,
.panel-usp .element-usp h2,
.panel-usp .element-usp h3,
.panel-usp .element-usp h4,
.panel-usp .element-usp h5,
.panel-usp .element-usp h6{
color: font_secondary;
}
/* panel about*/
.panel-about .element-about h6{
color: font_secondary;
}
/* panel-faq */
.panel-faq .faq-element{
background-color: bg_secondary;
border: 1px solid bg_secondary;
}
.panel-faq .faq-element .faq-title{
color: font_main;
}
.panel-faq .faq-element .faq-title:hover{
color: font_secondary;
}
.panel-faq .faq-element.active-faq{
border: 1px solid font_secondary;
}
.panel-faq .faq-element.active-faq .faq-title{
color: font_secondary;
}
/* panel-hero---panel-bg-with-text */
.panel-hero hr,
.panel-bg-with-text hr{
background-color: font_main;
}
.panel-hero .text-layer .inner-text-layer:before,
.panel-bg-with-text .text-layer .inner-text-layer:before{
background-color: txt_read_dark;
}
.panel-hero.bg-bright .text-layer .inner-text-layer:before,
.panel-bg-with-text.bg-bright .text-layer .inner-text-layer:before{
background-color: txt_read_bright;
}
.panel-hero.bg-bright hr,
.panel-bg-with-text.bg-bright hr{
background-color: font_dark;
}
.panel-hero.bg-bright .text-layer,
.panel-bg-with-text.bg-bright .text-layer{
color: font_dark;
}
Colors - backgrounds
Background color - secondary
Colors - buttons
Button - main - font color
Button - main - font color - hover
Button - secondary - font color
Button - secondary - font color - hover
Colors - text readability helpers
Text readability helper - dark
Text readability helper - bright