/* ======= Dynamic Theme Colors & Design ======= */ /* Uses CSS variables set in by PHP */ /* ============================================ ACCENT COLOR — text (replaces all #b19777) ============================================ */ #bauen-aside .bauen-footer a, #bauen-aside .bauen-footer ul li a:focus, #bauen-aside .bauen-logo a, #bauen-aside .bauen-main-menu > ul > li.open > a, #bauen-aside .bauen-main-menu ul ul li.active > a, .accordion-box .block .acc-btn .count, .accordion-box .block .acc-btn.active, .accordion-box .block .acc-btn:before, .banner-header h5, .banner-header h6 a:hover, .banner-header p a, .bauen-blog .item .con .category a:hover, .bauen-blog .item .con h5 a, .bauen-blog .item .con h5 a:hover, .bauen-blog2 .content .cont .more, .bauen-blog2 .content .date h3, .bauen-blog2 .content .info .tags, .bauen-blog3 .post-cont .date a, .bauen-blog3 .post-cont .tag, .bauen-blog3 .post-cont h5 a:hover, .bauen-comment-section h3, .bauen-gallery-filter li.active, .bauen-gallery-filter li:hover, .bauen-pagination-wrap li a.active, .bauen-pagination-wrap li a:hover, .bauen-project-filter li.active, .bauen-project-filter li:hover, .bauen-project-link, .bauen-project-link:before:hover, .bauen-project-link:hover, .bauen-project-link:hover i, .bauen-project-wrap p, .bauen-repay, .blog-sidebar .widget ul li a.active, .blog-sidebar .widget ul li a:hover, .comming h6, .gallery-masonry-wrapper .gallery-masonry-item-category, .go-back a:hover, .link-btn i, .main-footer .abot .social-icon a:hover, .main-footer .fothead h6, .main-footer .sub-footer p a:hover, .owl-theme .owl-nav [class*=owl-]:hover, .page-list-icon span, .play-button.color, .pricing-card-list li i, .pricing-card-name, .pricing-card:hover i, .process .item .icon, .process2.item .icon, .progress-wrap::after, .project-bar h5, .project-masonry-wrapper .project-masonry-item-category, .projects .item .con h6 a, .projects .item .con i:hover, .projects-prev-next a:hover, .projects4 .caption h6, .section-padding h6, .section-title span, .section-title2, .services2 .services2-subtitle, .services3-img-area, .team .info .social a, .team-details .content .info-list .list-title, .testimonials .item .info i, .video-gallery-polygon:hover, .vid-area .cont h5, b, blockquote cite, blockquote cite:before { color: var(--theme-accent) !important; } /* Active menu — keep separate to not override white logo */ #bauen-aside .bauen-main-menu > ul > li > a:hover, #bauen-aside .bauen-main-menu > ul > li.active > a, #bauen-aside .bauen-main-menu ul ul li:hover > a { color: var(--theme-accent) !important; } /* Logo tagline */ .bauen-logo h2 span { color: var(--theme-accent) !important; } /* ============================================ ACCENT COLOR — backgrounds ============================================ */ .bauen-blog2 .content .cont .more:after, .bauen-blog4 .caption h6, .bauen-nav-toggle, .bauen-project-link:before, .blog-sidebar .tags li, .butn-dark a, .butn-pricing a, .comming form button, .link-btn:before, .position:hover, .process .item .cont:hover, .sidebar .services ul li:before, button[type="submit"], input[type="submit"], .butn-light a span::before, .butn-dark a span::before, .services .item .line:after { background: var(--theme-accent) !important; } /* ============================================ ACCENT COLOR — borders ============================================ */ #bauen-aside .bauen-footer ul li:hover, .alert-success, .bauen-pagination-wrap li a.active, .bauen-pagination-wrap li a:hover, .comming form input, .main-footer .abot .social-icon a:hover, .owl-theme .owl-dots .owl-dot:hover span, .owl-theme .owl-nav [class*=owl-]:hover, .process .item .cont:hover, .process2.item:hover i.number, .services3:hover, .services4 .btn-line a:hover, .team-details .content .social-icons.square li a:hover, .butn-light a:hover, .services .item:hover { border-color: var(--theme-accent) !important; } /* Border-color specific */ #bauen-aside .bauen-main-menu > ul > li.open > a > span::after, #bauen-aside .bauen-main-menu > ul > li > a:hover > span::after, #bauen-aside .bauen-main-menu > ul > li.active > a > span::after, .projects .item .con .butn-light:hover, textarea:focus, input:focus { border-color: var(--theme-accent) !important; } /* Preloader spinner */ .loader span { border-top-color: var(--theme-accent) !important; } /* Scroll progress circle */ .progress-wrap svg.progress-circle path { stroke: var(--theme-accent) !important; } /* Play button circle */ .vid-area .vid-icon .play-button .circle-fill circle { stroke: var(--theme-accent) !important; fill: transparent !important; } /* ============================================ DARK BACKGROUND (replaces #272727) ============================================ */ body, .main-footer, .sub-footer { background-color: var(--theme-bg-dark) !important; } /* ============================================ CARD BACKGROUND (replaces #323232) ============================================ */ .project-page .project-bar, .sidebar-widget .widget-inner, .testimonials-box { background-color: var(--theme-bg-card) !important; } /* ============================================ FONT FAMILIES ============================================ */ h1, h2, h3, h4, h5, h6, .section-title, .section-title2, .bauen-logo h2, .bauen-main-menu ul li a, .banner-header .caption h1, .banner-header .caption h5, .butn-light a span, .butn-dark a span { font-family: var(--theme-font-heading), sans-serif !important; } body, p, .bauen-logo h2 span { font-family: var(--theme-font-body), sans-serif !important; } /* Text justify */ p { text-align: justify !important; } /* Sidebar logo name — white, not accent */ #bauen-aside .bauen-logo h2 { color: #fff !important; } /* ============================================ SIDEBAR BACKGROUND IMAGE ============================================ */ #bauen-aside.has-bg-image { background: none !important; background-color: transparent !important; background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), var(--sidebar-bg-image) !important; background-position: var(--sidebar-bg-position, center) !important; background-size: cover !important; background-repeat: no-repeat !important; background-attachment: scroll !important; border-right: none !important; } /* ============================================ SIDEBAR WIDTH ============================================ */ #bauen-aside { width: var(--theme-sidebar-width) !important; } #bauen-main { width: calc(100% - var(--theme-sidebar-width)) !important; float: right !important; } @media screen and (max-width: 768px) { #bauen-aside { width: 270px !important; } #bauen-main { width: 100% !important; } }