Global background pattern
Navigation sticky after scroll
(works only if the first panel is a "Hero")
Navigation logo change
(In the purchased theme a real image can be uploaded. Can also be empty. The field is optional.)
/* general */
body{
background-color: color_bg_main;
color: color_font_main;
}
p a:not(.cta){
border-bottom: 1px solid color_font_main;
}
p a:not(.cta):hover{
border-bottom: 1px solid transparent;
}
.element-logo .inner-stripe,
.element-logo .small-title-top span:first-of-type:after,
.element-logo .small-title-top span:last-of-type:after,
.element-logo .small-title-bottom span:first-of-type:after,
.element-logo .small-title-bottom span:last-of-type:after{
background-color: color_font_main;
}
.main-nav .hamburger-menu div{
background-color: color_font_main;
}
.main-nav li ul{
background-color: color_font_main;
}
.main-nav li ul a{
color: color_menu_bg;
}
.main-nav li.with-children.active,
#mobile-overlay li.with-children.active{
border-bottom: 2px solid color_font_main;
}
hr{
background-color: color_font_secondary;
}
.panel-collapse-slider .bg-line,
.panel-collapse-slider .animate-line{
background-color: color_font_secondary;
}
.panel-food-menu .category-title{
background-color: color_font_secondary;
}
.panel-food-menu .category-entries-wrap{
border-left: 3px solid color_font_secondary;
border-right: 3px solid color_font_secondary;
border-bottom: 3px solid color_font_secondary;
}
h6.subtitle,
.panel-comments .reply-wrap{
color: color_font_secondary;
}
.color-bg-secondary{
background-color: color_bg_secondary;
}
.popup{
color: white;
}
.popup .slick-arrow{
color: white;
}
.ticket-title{
color: color_font_secondary;
}
.panel-services .element-services .body-title{
color: color_font_secondary;
}
.main-nav,
#mobile-overlay{
background: color_menu_bg;
}
/* hover-details-overlay-effect-1 */
.hover-details-overlay-effect-1 .details-container{
color: color_rollover_font;
}
.hover-details-overlay-effect-1 .details-container hr{
background-color: color_rollover_font;
}
.hover-details-overlay-effect-1:hover .overlay{
background-color: color_rollover_bg;
}
/* inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
textarea{
color: color_btn_main_x;
background-color: color_btn_main_hover;
}
/* 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{
border-bottom: 2px solid color_font_main;
}
.main-nav li ul a:hover,
.main-nav li ul a.active{
border-bottom: 2px solid color_menu_bg;
}
.main-nav .brand-logo:hover,
.main-nav .brand-logo.active,
#mobile-overlay .brand-logo:hover,
#mobile-overlay .brand-logo.active{
border-bottom: none;
}
.main-nav li ul .brand-logo:hover,
.main-nav li ul .brand-logo.active,
#mobile-overlay li ul .brand-logo:hover,
#mobile-overlay li ul .brand-logo.active{
border-bottom: none;
}
/* cta */
.cta,
input[type="submit"],
#sliding-popup .eu-cookie-compliance-buttons button{
color: color_btn_main_x;
/*border: 2px solid color_btn_main_x;*/
border: 2px solid transparent;
background-color: color_btn_main_hover;
}
.cta:hover,
input[type="submit"]:hover,
#sliding-popup .eu-cookie-compliance-buttons button:hover{
/*color: color_btn_main_hover;*/
}
.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;
}
.panel-bg-with-text.panel-quotes.bg-bright .slick-arrow{
color: white;
}
.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;
}
/* 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_main;
}
.panel-image-grid .filter-bar .filter-trigger{
border-bottom: 2px solid transparent;
}
.panel-image-grid .filter-bar .filter-trigger.active,
.panel-image-grid .filter-bar .filter-trigger:hover,
.panel-image-grid .filter-bar .icon-filter{
border-bottom: 2px solid color_font_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: 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-bg-with-text.panel-quotes.bg-bright hr{
background-color: color_font_main;
}
.panel-hero.bg-bright .text-layer,
.panel-bg-with-text.bg-bright .text-layer,
.panel-food-menu.bg-bright .category-title{
color: color_font_dark;
}
.panel-hero.bg-bright .element-logo .inner-stripe,
.panel-hero.bg-bright .element-logo .small-title-top span:first-of-type:after,
.panel-hero.bg-bright .element-logo .small-title-top span:last-of-type:after,
.panel-hero.bg-bright .element-logo .small-title-bottom span:first-of-type:after,
.panel-hero.bg-bright .element-logo .small-title-bottom span:last-of-type:after{
background-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: #2C1901;
color_bg_secondary: #2C1901;
color_bg_third: #211301;
color_font_main: #ffffff;
color_font_secondary: #D4A276;
color_font_dark: #000000;
color_btn_main_x: #ffffff;
color_btn_main_hover: #A47148;
color_btn_secondary_x: #ffffff;
color_btn_secondary_hover: #583101;
color_text_read_dark: #000000;
color_text_read_bright: #ffffff;
color_rollover_font: #000000;
color_rollover_bg: #FEFAE0;
color_menu_bg: #211301;
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
