/* -------------------------------------------------------------- Theme Name: BOB OnePage Theme URI: https://brings-online.com/demo/wordpress-block-themes/bob-onepage Description: WordPress Block Theme für OnePage-Webseiten Version: 1.0.1 Tested up to: 7.0 Requires PHP: 7.4 Author: sb | brings-online.com Author URI: https://brings-online.com Text Domain: bob-onepage Domain Path: /languages License: GNU General Public License version 3.0 License URI: http://www.gnu.org/licenses/gpl-3.0.html -------------------------------------------------------------- */ @import url("assets/css/icofont.min.css"); html {scroll-behavior: smooth;} #stickyheader {top:-1px !important; z-index:25;} #stickyheader-transparent { z-index:25; top:0; position:fixed; width:100%;} #stickyheader-transparent {transition: background-color 0.4s ease, box-shadow 0.4s ease;} #stickyheader-transparent.is-scrolled {background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 90%, transparent); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);} .bob-sticky-sidebar-group.is-position-sticky {z-index:5; top:150px; } a.bob-onepage-anchor {margin:0 !important;padding:0 !important;height:0 !important;} /* main menu */ .bob-main-menu-group .wp-block-navigation > li.wp-block-navigation-item:hover > a { color:var(--wp--preset--color--base) } .bob-main-menu-group .wp-block-navigation > li.wp-block-navigation-item.current-menu-item > a { color:var(--wp--preset--color--base) } .bob-main-menu-group .wp-block-navigation > li.wp-block-navigation-item ul li:hover > a {color:var(--wp--preset--color--accent) } /* main menu */ .bob-main-menu-group .wp-block-navigation > li.wp-block-navigation-item {padding:8px 15px;transition:all linear 200ms; border-radius:2px;} .bob-main-menu-group .wp-block-navigation > li.wp-block-navigation-item:hover { background:var(--wp--preset--color--accent); color:var(--wp--preset--color--base) } .bob-main-menu-group .wp-block-navigation > li.wp-block-navigation-item.current-menu-item { background:var(--wp--preset--color--accent); color:var(--wp--preset--color--base) } .bob-main-menu-group .wp-block-navigation li.wp-block-navigation-item ul li:hover {color:var(--wp--preset--color--accent) } .bob-main-menu-group .wp-block-navigation__submenu-container li {border-bottom:1px dotted var(--wp--preset--color--base-4); font-size:1rem;} .bob-main-menu-group .wp-block-navigation__submenu-container li:last-child {border-bottom:none;} .bob-main-menu-group .wp-block-navigation__submenu-container {background-color:#fff; border:none !important; border-radius:0 0 7px 7px; padding-top:20px;} .bob-main-menu-group .wp-block-navigation.items-justified-right .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container, .bob-main-menu-group .wp-block-navigation .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {display: block; height: auto !important; max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: max-height 800ms ease, opacity 450ms ease, visibility 0s linear 800ms;} .bob-main-menu-group .wp-block-navigation .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-container, .bob-main-menu-group .wp-block-navigation .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-container {max-height: 1200px; opacity: 1; visibility: visible; transition: max-height 800ms ease, opacity 450ms ease, visibility 0s linear 0s;} .bob-main-menu-group .wp-block-navigation .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container li {height: auto !important;max-height: 0;overflow: hidden; opacity: 0; visibility: hidden; transition: max-height 800ms ease, opacity 450ms ease, visibility 0s linear 800ms;} .bob-main-menu-group .wp-block-navigation .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-container li {max-height: 60px; opacity: 1;visibility: visible; transition:max-height 800ms ease, opacity 450ms ease, visibility 0s linear 0s;} /* is underlined headline */ .is-style-heading--underline {padding-bottom:25px;margin-bottom:25px;} .is-style-heading--underline::after {content:""; background: var(--heading-underline-color, currentColor); height:2px;width:80px; position:absolute;bottom:0;left:0;} .is-style-heading--underline.has-text-align-left::after {left:0;} .is-style-heading--underline.has-text-align-right::after {left:auto;right:0;} .is-style-heading--underline.has-text-align-center::after {left:calc(50% - 40px);} /* wp accordion */ h3.wp-block-accordion-heading {font-size:var(--wp--preset--font-size--medium-large); border-bottom:1px solid var(--wp--preset--color--base-3); margin-bottom:2px;} h3.wp-block-accordion-heading .wp-block-accordion-heading__toggle-title {text-decoration:none !important;} h3.wp-block-accordion-heading:hover .wp-block-accordion-heading__toggle-icon {color:var(--wp--preset--color--accent);} h3.wp-block-accordion-heading button[aria-expanded="true"] .wp-block-accordion-heading__toggle-icon {color:var(--wp--preset--color--accent);} .wp-block-accordion-heading__toggle-icon {font-weight:bold;margin-right:10px;} /* position cover */ .wp-block-group.bob-stretch-image {width: 100%; height: 100%; position:relative;} .bob-stretch-image figure {width: 100%; height: 100%; position:relative;} .bob-stretch-image figure img { object-fit: cover; height: 100%; width:100%; position:absolute; top:0; left:0;} @media screen and (max-width: 782px) {.bob-stretch-image figure {min-height:300px;} } /* button - input - more */ input.bob-accent2-button {background:var(--wp--preset--color--accent-2) !important} .wp-block-button a {transition:all ease 200ms} .wp-block-post-excerpt__more-text a {color:var(--wp--preset--color--accent); font-weight:500;} input.wp-block-search__input {padding:16px !important} button.wp-block-search__button {padding:10px !important; height:60px} /* lists */ ul.is-style-list--is-checklist,ul.is-style-list--is-arrowlist,ul.is-style-list--is-trianglelist {padding-left:0; margin-left:0;} ul.is-style-list--is-checklist li,ul.is-style-list--is-arrowlist li,ul.is-style-list--is-trianglelist li {list-style:none; padding-left:30px; position:relative;padding-top:3px;padding-bottom:3px;} ul.is-style-list--is-checklist li:before, ul.is-style-list--is-arrowlist li:before, ul.is-style-list--is-trianglelist li:before {position:absolute; left:0; font-family:"Icofont"; font-size:15px;color:var(--wp--preset--color--accent)} ul.is-style-list--is-checklist li:before {top:7px; content:"\f00d";} ul.is-style-list--is-arrowlist li:before {top:6px; content:"\ea98";} ul.is-style-list--is-trianglelist li:before {top:6px; content:"\ea69";} ol.is-style-list--is-numberslist {counter-reset: bob-list-counter; list-style: none; padding-left: 60px;} ol.is-style-list--is-numberslist li {counter-increment: bob-list-counter; position: relative;margin:15px 0;} ol.is-style-list--is-numberslist li::before {content: counter(bob-list-counter); color: var(--wp--preset--color--base); font-size: 1.6rem; font-weight: 500; position: absolute; --size: 36px; left: calc(-1 * var(--size) - 20px); line-height: var(--size); width: var(--size); height: var(--size); top: 3px; background: var(--wp--preset--color--accent); border-radius: 50%; text-align: center;} /* form */ .bob-form-data {display:flex; justify-content:space-between;width:100%; flex-wrap:nowrap; } .bob-form-data span {width:calc(50% - 5px);} input:not([type="submit"]), textarea, select { border-radius:3px; padding:10px; font-size:var(--wp--preset--font-size--small); width:100%; box-sizing:border-box; margin-bottom:10px; border-radius: 3px; border: 1px solid #EEEFF3; background:var(--wp--preset--color--base); font-family:var(--wp--preset--font-family--body); color:var(--wp--preset--color--contrast); } input::placeholder, select { color: var(--wp--preset--color--contrast); opacity: 0.5; } input:not([type="submit"]):focus, textarea:focus, select:focus {outline:1px solid var(--wp--preset--color--base-4);} input[type="radio"], input[type="checkbox"] {width:auto;display:inline-block; margin:0 10px 5px 0;} input[type="radio"]:checked ~ * {color:#000;} input[type="submit"] {font-family:var(--wp--preset--font-family--body);font-size:var(--wp--preset--font-size--x-small);font-weight:500; padding:12px 25px;margin:10px 0; border-radius:3px; background:var(--wp--preset--color--contrast);border:1px solid var(--wp--preset--color--contrast); color:var(--wp--preset--color--base);text-transform:uppercase; width:auto; } input[type="submit"]:hover {border-radius:8px;} .wpcf7-not-valid-tip {display:block; color:#f00; font-size:14px !important; width:100% !important;margin-bottom:10px } /* misc */ strong {font-weight:600;} .bob-price {display:inline-block; margin:0 auto !important; } .bob-shadow-group:hover { box-shadow:0 0 3px 3px var(--wp--preset--color--base-2) } p.bob-inline-block {display:inline-block;} .wp-block-cover__image-background, .wp-block-image img {backface-visibility: hidden;} .bob-full-slider .wp-block-columns { min-height:500px; } .wp-block-group.is-style-clickable {cursor: pointer;} .bob-clickable-group-link .wp-block-group.is-style-clickable .wp-block-column:first-child { transition: all ease 0.5s;} .bob-clickable-group-link:hover .wp-block-group.is-style-clickable .wp-block-column:first-child, .bob-clickable-group-link:focus-visible .wp-block-group.is-style-clickable .wp-block-column:first-child {background: var(--wp--preset--color--accent-2) !important} .is-style-image--circled img {border-radius:100%;} .is-style-rounded img {border-radius:15px;} @media screen and (max-width: 782px) {.bob-mobile-reverse-columns { flex-direction:column-reverse;}} /* animated blocks */ .bob-animated-block,.is-style-group--animated-down,.is-style-group--animated-up,.is-style-group--animated-left,.is-style-group--animated-right {-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both} @-webkit-keyframes fadeInUp {from{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:none;transform:none}} @keyframes fadeInUp {from{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:none;transform:none}} .fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp} @-webkit-keyframes fadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-100%,0); transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0)}} @keyframes fadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-100%,0); transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0)}} .fadeInDown{-webkit-animation-name:fadeInDown; animation-name:fadeInDown} @-webkit-keyframes fadeInLeft{from{opacity:0;-webkit-transform:translate3d(-100%,0,0); transform:translate3d(-100%,0,0)}to{opacity:1; -webkit-transform: translate3d(0,0,0); transform:translate3d(0,0,0)}} @keyframes fadeInLeft{from{opacity:0;-webkit-transform:translate3d(-100%,0,0); transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform: translate3d(0,0,0); transform:translate3d(0,0,0)}} .fadeInLeft{-webkit- animation-name:fadeInLeft;animation-name:fadeInLeft} @-webkit-keyframes fadeInRight{from{opacity:0;-webkit-transform:translate3d(100%,0,0); transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform: translate3d(0,0,0); transform:translate3d(0,0,0)}} @keyframes fadeInRight{from{opacity:0;-webkit-transform:translate3d(100%,0,0); transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform: translate3d(0,0,0); transform:translate3d(0,0,0)}} .fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight} .bob-animated-group .bob-animated-block:nth-child(2) {animation-delay:200ms} .bob-animated-group .bob-animated-block:nth-child(3) {animation-delay:400ms} .bob-animated-group .bob-animated-block:nth-child(3) {animation-delay:600ms} .bob-animated-group .bob-animated-block:nth-child(4) {animation-delay:800ms} .bob-animated-group .bob-animated-block:nth-child(5) {animation-delay:1000ms} .bob-animated-group .bob-animated-block:nth-child(6) {animation-delay:1200ms} .hidden {opacity:0;} .visible {opacity:1;} /* sticky bottom line */ #is-sticky-bottom {position:sticky; bottom:-100px; -webkit-backface-visibility: hidden; -webkit-perspective: 1000; transform: translateZ(0); -webkit-transform: translateZ(0);} /* hero */ .bob-hero-v1 {background-color:var(--wp--preset--color--contrast); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%233e4960' fill-opacity='0.6' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");} .bob-hero-v2 {background-color:var(--wp--preset--color--contrast); background-image: url("data:image/svg+xml,%3Csvg width='20' height='12' viewBox='0 0 20 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 12c0-.622-.095-1.221-.27-1.785A5.982 5.982 0 0 0 10 12c1.67 0 3.182-.683 4.27-1.785A5.998 5.998 0 0 0 14 12h2a4 4 0 0 1 4-4V6c-1.67 0-3.182.683-4.27 1.785C15.905 7.22 16 6.622 16 6c0-.622-.095-1.221-.27-1.785A5.982 5.982 0 0 0 20 6V4a4 4 0 0 1-4-4h-2c0 .622.095 1.221.27 1.785A5.982 5.982 0 0 0 10 0C8.33 0 6.818.683 5.73 1.785 5.905 1.22 6 .622 6 0H4a4 4 0 0 1-4 4v2c1.67 0 3.182.683 4.27 1.785A5.998 5.998 0 0 1 4 6c0-.622.095-1.221.27-1.785A5.982 5.982 0 0 1 0 6v2a4 4 0 0 1 4 4h2zm-4 0a2 2 0 0 0-2-2v2h2zm16 0a2 2 0 0 1 2-2v2h-2zM0 2a2 2 0 0 0 2-2H0v2zm20 0a2 2 0 0 1-2-2h2v2zm-10 8a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0-2a2 2 0 1 0 0-4 2 2 0 0 0 0 4z' fill='%233e4960' fill-opacity='0.2' fill-rule='evenodd'/%3E%3C/svg%3E");} /* bob patterns */ .bob-service-info-box {position:relative;} .bob-service-info-box::after {content:"";position:absolute; bottom:0; left:0; height:5px; width:0px; transition:all ease 500ms;border-radius:0 0 4px 4px} .bob-service-info-box:hover::after {background:var(--wp--preset--color--accent); width:100%; } .bob-service-info-box::before {content:"";position:absolute; top:15px; left:16px; height:8px; width:8px; border-radius:2px; background:var(--wp--preset--color--accent);} .bob-icon-box-v1:hover {border-color:var(--wp--preset--color--accent) !important;} .bob-icon-box-v1:hover .bob-icon-group {background:var(--wp--preset--color--accent) !important;} .bob-address-row p:first-child {width:100px;} @media screen and (max-width: 782px) { .bob-service-info-box h2 {margin-top:30px !important}} /* masonry gallery style */ .is-style-gallery--is-masonry.columns-default { -webkit-columns: 3; -moz-columns: 3; columns: 3;} .is-style-gallery--is-masonry{display:block !important;} .is-style-gallery--is-masonry .wp-block-image{ width:100% !important; margin-bottom:var(--wp--style--unstable-gallery-gap) !important;} .is-style-gallery--is-masonry.columns-1 {-webkit-columns: 1; -moz-columns: 1;columns: 1; } .is-style-gallery--is-masonry.columns-2 {-webkit-columns: 2; -moz-columns: 2; columns: 2; } .is-style-gallery--is-masonry.columns-3 {-webkit-columns: 3; -moz-columns: 3; columns: 3;} .is-style-gallery--is-masonry.columns-4 {-webkit-columns: 4;-moz-columns: 4; columns: 4; } .is-style-gallery--is-masonry.columns-5 {-webkit-columns: 5; -moz-columns: 5; columns: 5; } /* diagonal column border */ .bob-diagonal-column {position:relative;} .bob-diagonal-column:before {content:""; position:absolute; top:0; bottom:0; left:0; margin-left:-150px; width:150px; height:100%; background:inherit; z-index:9; clip-path: polygon(100% 0%, 50% 100%, 100% 100%);} .bob-diagonal-column .wp-block-group {position:relative; z-index:10} .is-style-column--diagonal {position:relative;} .is-style-column--diagonal:before {content:""; position:absolute; top:0; bottom:0; left:0; margin-left:-150px; width:150px; height:100%; background:inherit; z-index:9; clip-path: polygon(100% 0%, 50% 100%, 100% 100%);} .is-style-column--diagonal .wp-block-group {position:relative; z-index:10} .bob-diagonal-column-right {position:relative;} .bob-diagonal-column-right:before {content:""; position:absolute; top:0; bottom:0; right:0; margin-right:-150px; width:150px; height:100%; background:inherit; z-index:9; clip-path: polygon(0% 0%, 50% 100%, 0% 100%);} .bob-diagonal-column-right .wp-block-group {position:relative; z-index:10} .is-style-column--diagonal-right {position:relative;} .is-style-column--diagonal-right:before {content:""; position:absolute; top:0; bottom:0; right:0; margin-right:-150px; width:150px; height:100%; background:inherit; z-index:9; clip-path: polygon(0% 0%, 50% 100%, 0% 100%);} .is-style-column--diagonal-right .wp-block-group {position:relative; z-index:10} @media (max-width: 782px) { .bob-diagonal-column:before, .bob-diagonal-column-right:before, .is-style-column--diagonal:before, .is-style-column--diagonal-right:before {display:none;} } /* wave section */ .bob-wave-top {position:relative;} .bob-wave-top:before {content:" "; background:url('data:image/svg+xml,');background-repeat:no-repeat;background-position:center; background-size:100% 80px; width:100%; height:80px; position:absolute;left:0;top:0;} .bob-wave-bottom {position:relative;} .bob-wave-bottom:after {content:" ";background:url('data:image/svg+xml,'); background-repeat:no-repeat; background-size:100% 80px; width:100%; height:80px; position:absolute;left:0;bottom:0;transform: rotateX(180deg);} @media screen and (max-width: 480px) { .bob-wave-top:before {content:" "; background:url('data:image/svg+xml,');background-repeat:no-repeat;background-position:center; background-size:100% 80px; width:100%; height:80px; position:absolute;left:0;top:0;} .bob-wave-bottom:after {content:" ";background:url('data:image/svg+xml,'); background-repeat:no-repeat; background-size:100% 80px; width:100%; height:80px; position:absolute;left:0;bottom:0;transform: rotateX(180deg);} }