Navigation sticky after scroll
(works only if the first panel is a "Hero")
Navigation with brand-logo
/* general */
body{
background-color: color_bg_main;
color: color_font_main;
}
hr{
background-color: color_font_secondary;
}
h6.subtitle,
.panel-comments .reply-wrap{
color: color_font_secondary;
}
.color-bg-secondary{
background-color: color_bg_secondary;
}
.popup{
color: color_font_secondary;
}
.ticket-title{
color: color_font_secondary;
}
.panel-services .element-services .body-title{
color: color_font_secondary;
}
.main-nav,
#mobile-overlay{
background: menu_bg;
}
/* hover-details-overlay-effect-1 */
.hover-details-overlay-effect-1 .details-container{
color: rollover_font;
}
.hover-details-overlay-effect-1 .details-container hr{
background-color: rollover_font;
}
.hover-details-overlay-effect-1:hover .overlay{
background-color: rollover_bg;
}
/* inputs */
input[type="text"],
input[type="email"],
input[type="password"],
textarea{
background-color: color_bg_secondary;
color: color_font_main;
}
/* main nav*/
.main-nav a,
#mobile-overlay a,
#mobile-overlay .social{
color: color_font_main;
}
.main-nav a:hover,
.main-nav a.active,
#mobile-overlay a:hover,
#mobile-overlay a.active{
color: color_font_secondary;
}
/* cta */
.cta,
input[type="submit"],
#sliding-popup .eu-cookie-compliance-buttons button{
color: color_btn_main_x;
border: 2px solid color_btn_main_x;
}
.cta:hover,
input[type="submit"]:hover,
#sliding-popup .eu-cookie-compliance-buttons button:hover{
color: color_btn_main_hover;
background-color: color_btn_main_x;
}
.cta.cta-white,
#sliding-popup .eu-cookie-compliance-buttons button.decline-button{
color: color_btn_secondary_x;
border: 2px solid color_btn_secondary_x;
}
.cta.cta-white:hover,
#sliding-popup .eu-cookie-compliance-buttons button.decline-button:hover{
color: color_btn_secondary_hover;
background-color: color_btn_secondary_x;
}
/* slick slider */
.slick-arrow{
color: color_font_secondary;
}
.slick-dots li button{
background-color: color_bg_third;
border: 1px solid color_font_secondary;
}
.slick-dots li.slick-active button{
background-color: color_font_secondary;
border: 1px solid color_font_secondary;
}
/* cookie banner */
#sliding-popup .eu-cookie-compliance-message button{
color: color_font_main;
}
/* tags */
.tag{
background-color: color_font_secondary;
color: color_font_dark;
}
/* comments */
.panel-comments .reply-wrap{
color: color_font_secondary;
}
/* sidebar */
.sidebar li{
color: color_font_main;
}
.sidebar li.active{
color: color_font_secondary;
}
/* panel-image-grid */
.panel-image-grid .filter-bar .mobile-dropdown{
background-color: color_bg_third;
}
.panel-image-grid .filter-bar .filter-trigger{
color: color_font_main;
background-color: color_bg_third;
}
.panel-image-grid .filter-bar .filter-trigger.active,
.panel-image-grid .filter-bar .filter-trigger:hover,
.panel-image-grid .filter-bar .icon-filter{
color: color_btn_main_hover;
background-color: color_btn_main_x;
}
/* 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: color_font_secondary;
}
/* panel about*/
.panel-about .element-about h6{
color: color_font_secondary;
}
/* panel-faq */
.panel-faq .faq-element{
background-color: color_bg_third;
border: 1px solid color_bg_third;
}
.panel-faq .faq-element .faq-title{
color: color_font_main;
}
.panel-faq .faq-element .faq-title:hover{
color: color_font_secondary;
}
.panel-faq .faq-element.active-faq{
border: 1px solid color_font_secondary;
}
.panel-faq .faq-element.active-faq .faq-title{
color: color_font_secondary;
}
/* panel-hero---panel-bg-with-text */
.panel-hero hr,
.panel-bg-with-text hr,
.panel-brands hr,
.panel-banner hr{
background-color: color_font_main;
}
.panel-bg-with-text .row-headline hr{
background-color: color_font_secondary;
}
.panel-hero .text-layer .inner-text-layer:before,
.panel-bg-with-text .text-layer .inner-text-layer:before{
background-color: color_text_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: color_text_read_bright;
}
.panel-hero.bg-bright hr,
.panel-bg-with-text.bg-bright hr{
background-color: color_font_dark;
}
.panel-hero.bg-bright .text-layer,
.panel-bg-with-text.bg-bright .text-layer{
color: color_font_dark;
}
/* language switcher */
.filter-dropdown{
border-bottom: 1px solid color_font_main;
}
.filter-dropdown.active{
background-color: color_btn_main_x;
color: color_btn_main_hover;
}
.filter-dropdown .expand-row{
background-color: color_btn_main_x;
color: color_btn_main_hover;
}
color_bg_main: #1f0801;
color_bg_secondary: #36211b;
color_bg_third: #36211b;
color_font_main: #ffffff;
color_font_secondary: #ff9c01;
color_font_dark: #000000;
color_btn_main_x: #FF9C01;
color_btn_main_hover: #000;
color_btn_secondary_x: #ffffff;
color_btn_secondary_hover: #000000;
color_text_read_dark: #000000;
color_text_read_bright: #ffffff;
rollover_font: #000000;
rollover_bg: #ff9c01;
menu_bg: #000;
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
