/* Theme Name: BAI Default theme Author: Nils Hendriks Author URI: https://www.nh-design.nl Description: Our default theme for 2020 is designed to take full advantage of the flexibility of the block editor. Organizations and businesses have the ability to create dynamic landing pages with endless layouts using the group and column blocks. The centered content column and fine-tuned typography also makes it perfect for traditional blogs. Complete editor styles give you a good idea of what your content will look like, even before you publish. You can give your site a personal touch by changing the background colors and the accent color in the Customizer. The colors of all elements on your site are automatically calculated based on the colors you pick, ensuring a high, accessible color contrast for your visitors. Version: 1.0 Requires PHP: 7.0 Text Domain: Bosch Architectuur Initiatief */ /* root */ :root { --color-default: #222; --color-dark: #000; --color-accent: #00C597; --font-headers: 'Oswald', Arial, Helvetica, sans-serif; --font-text: 'Open Sans', Arial, Helvetica, sans-serif; } /* text */ html, body, input, select, textarea { font-family: var(--font-text); background: #FFFFFF; color: var(--color-default); font-size: 0.92rem; line-height: 1.5rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -ms-text-size-adjust: 100%; text-size-adjust: 100%; text-rendering: optimizeLegibility; font-variant-ligatures: none; } h1,h2,h3,h4,h5,h6 { font-family: var(--font-headers); color: var(--color-dark); font-weight: 600; line-height: 130%; } h1 { font-size: 2.0rem; font-weight: 600; margin: 0 0 1.3rem 0; color: var(--color-dark); line-height: 1 } h2 { font-size: 1.6rem; font-weight: 600; margin: 0 0 20px 0; } h3 { font-size: 1.5rem; } h4 { } h6 { } p { color: var(--color-default) } a, a:visited, a:active { text-decoration: none; outline: none; color: inherit; } a[href="#"] { cursor: default; } .post-edit-link { display: none !important } /* buttons */ .button { display: inline-block; font-family: var(--font-headers); border: none; position: relative; border-radius: 5px; text-transform: uppercase; } .button:hover { text-decoration: none; -webkit-box-shadow: 0 .25em 1em 0 rgba(0,57,216,.2); box-shadow: 0 .25em 1em 0 rgba(0,57,216,.2); -webkit-transition: -webkit-transform .2s ease,-webkit-box-shadow .2s ease; transition: -webkit-transform .2s ease,-webkit-box-shadow .2s ease; -o-transition: transform .2s ease,box-shadow .2s ease; transition: transform .2s ease,box-shadow .2s ease; transition: transform .2s ease,box-shadow .2s ease,-webkit-transform .2s ease,-webkit-box-shadow .2s ease; } /* sizes */ .button.tiny { padding: 3px 10px; font-size: 75%; text-transform: lowercase; } .button.small { padding: 6px 10px; font-size: 75%; } .button.medium { padding: 7px 30px; font-size: 90% } .button.mediumlarge { padding: 10px 30px; font-size: 90% } .button.large { padding: 12px 50px; } .button.huge { padding: 26px 100px; font-size: 140%; border-radius: 50px } .button.full { width: 100%; text-align: center; padding: 12px; } /* colors */ .button.white { background: #fff; color: var(--maincolor) } /* forms */ form label, .em-booking-form label { display: block; float: none; font-weight: normal; font-size: 0.95rem; margin: 0 0 10px 0 } form input[type='submit'] { background: var(--color-accent); padding: 10px 20px; font-weight: bold; color: #222222 } form input[type='submit']:hover { box-shadow: 0 1px 6px rgba(0,0,0,0.5) } .comment-reply-link { background: var(--color-accent); padding: 5px 10px; border-radius: 4px; font-weight: bold; color: #222222 } input, select, textarea { background: #F2F2F2; border: none; margin: 0 0 10px 0; padding: 10px; border-radius: 4px; transition: all 300ms; box-sizing: border-box; } input:focus, select:focus, textarea:focus { background: rgba(0,197,151,0.1); transition: all 300ms; } .comments .comment-respond { border: 1px solid #EAEAEA; padding: 30px; margin: 0 0 30px 0 } .comments .comment-form-comment textarea { width: 100% } .comments .comment-form-attachment { font-size: 0.8rem; line-height: 1.2rem } .comments .comment-form-attachment input { } .comments .comment-body { margin: 0 0 30px 0 } .comments .comment-meta { font-weight: 900; font-size: 1.1rem } .comments .comment-awaiting-moderation { color: #FF0000; font-style: normal; } .comments ul.children { margin: 0 0 0 40px } .comments .parent { border-bottom: 1px solid #EAEAEA; padding: 10px 0; margin: 0 0 10px 0 } .user-registration.ur-frontend-form, #loginform { max-width: 450px; margin: 0 auto; padding: 0; border: none; } .um input, .um select, .um textarea, #loginform input, #loginform select, #loginform textarea { width: 100%; box-sizing: border-box; margin: 0 0 10px 0; } .um textarea { background: #F2F2F2 !important; } #loginform #rememberme { display: inline-block; width: auto } div#user-submitted-posts form { padding: 0 } /* general layout */ main { height: auto !important; min-height: 70vh; margin: 0 auto 100px; position: relative; display: block /* for ie11*/ } .ctr-content { margin: 0 auto; padding: 0 15px 0px; position: relative; } .ctr-content.small { max-width: 700px; } .ctr-content.medium { max-width: 1392px; } .ctr-content.full { max-width: 100%; } .ctr-content.special { max-width: 74%; } .postwrapper { max-width: 670px; } @media only screen and (max-width:768px){ .ctr-content { padding: 0 5px 0px; } } /* header */ header { margin: 25px 0 25px 0 } header .ctr-content { height: 100% } header, header a { color: var(--color-accent) } header .payoff { position: absolute; color: var(--color-accent); right: 14.5%; text-align: right; line-height: 120%; max-width: 25%; padding: 50px 0 0 0} header .title img { max-height: 65px; position: absolute; right: 35px; top: 33px; } header .logo { ppadding: 10px 0; margin: 0px 0 -7px 0; } header .logo img { max-height: 150px; transform: rotate(0deg); } header .account { position: absolute; bottom: -26px; right: 14.5% } header .account .login { background: var(--color-accent); color: #FFFFFF; display: inline-block; padding: 1px 20px } header .account span { text-transform: capitalize; } header nav { border-bottom: 1px solid var(--color-accent); max-width: 74%; margin: -21px auto 40px} header nav li { display: inline-block; list-style-type: none; margin: 0 30px 0 0px; padding: 0; color: var(--color-accent); } header nav li.current-menu-item { background: var(--color-accent); color: #FFFFFF } header nav li a { padding: 1px 20px; border: 1px solid var(--color-accent); border-bottom: none; display: block } header nav li a:hover { background: var(--color-accent); color: #FFFFFF; } header nav ul > li:hover .sub-menu { display: block; -webkit-transition-duration: .5s; -o-transition-duration: .5s; transition-duration: .5s; } header nav .sub-menu { margin: 0px 0 0 0; display: none; background: #FFFFFF; position: absolute; border: 1px solid var(--color-accent); z-index: 999; width: 200px; } header nav .sub-menu li { display: block; margin: 0; border-bottom: 1px solid var(--color-accent);} header nav .sub-menu li:last-of-type { border: none; } header nav .sub-menu li a { display: block; padding: 3px 20px; width: 100%; border: none; } header #menu-button, header nav .button-cancel { display: none; } @media only screen and (max-width:1220px){ header .title img { max-height: 55px; top: 40px;} } @media only screen and (max-width:768px){ header .payoff { position: absolute; top: 92px; left: 38%; text-align: left; max-width: 100%; font-size: 84%;} header .logo { margin: 0px; padding: 60px 0 0 0 } header .logo img { max-height: 120px; } header .title img { max-height: 51px; position: absolute; right: 0; top: 36px; left: 38%; } header nav { position: fixed; box-sizing: border-box; overflow-y: auto; z-index: 9999; color: #FFFFFF; background: var(--color-accent); top: 0px; right: -100%; bottom: 0px; left: auto; width: 360px; padding: 75px 30px; -webkit-transition-duration: .3s; /* Safari */ transition-duration: .3s; transition-timing-function: ease-out;} header nav li { width: 100%; color: #FFFFFF; position: relative; border-bottom: 1px solid #FFFFFF } header nav li a { color: #FFFFFF; display: block; padding: 10px 0px; } header nav.open { right: 0px; -webkit-transition-duration: .3s; /* Safari */ transition-duration: .3s; transition-timing-function: ease-out; } header nav .sub-menu { position: relative; display: block; background: none; margin: 0; width: 100% } header nav .sub-menu li { width: 100% } header nav .sub-menu li a { padding: 10px 0 10px 20px } header .account { position: static; margin: 20px 0 0 0 } header .account a { color: #FFFFFF; display: block; text-decoration: underline; } header .account .login { padding: 0; display: block } header #menu-button { position: fixed; z-index: 9999; height: 50px; width: 50px; right: 0; top: 0; background: var(--color-accent); color: #FFFFFF; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } header #menu-button span { font-size: 130% } header nav .button-cancel { position: absolute; right: 0px; top: 21px; height: 50px; width: 50px; font-weight: normal; text-decoration: none; color: var(--color-accent); background: #FFFFFF; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } header nav .button-cancel span { font-size: 130% } } /* overwrite */ .wp-block-image img { max-width:100%; height: auto; } /* home */ #ctr-maincontent { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr; gap: 30px; grid-template-columns: repeat(auto-fill); } body.category .postwrapper { max-width: 100% } /* categoryfilter */ #ctr-categoryfilter { float: right; } #ctr-categoryfilter li { display: inline-block; margin: 0 10px 0 0 } #ctr-categoryfilter li.current-cat { color: var(--color-accent); font-weight: bold } /* ratings */ .thumbs-rating-container .thumbs-rating-down { display: none !important; } .thumbs-rating-container .thumbs-rating-up { background: var(--color-accent); } .thumbs-rating-container .thumbs-rating-up:before { content: 'ja, inspirerend ' } article.loop { position: relative; padding: 0; overflow: hidden; border-bottom: 1px solid #CCCCCC } article.loop .date { color: var(--color-accent); } article.loop h3 { padding: 0 0 20px 0; } article.loop .image { display: block; width: 100%; height: 200px; margin: 0 0 20px 0; overflow: hidden; } article.loop .image .ctr-image { background-size: cover; background-repeat: no-repeat; background-position: center; width: 100%; height: 100%; } article.loop .image { background: #F2F2F2; font-family: var(--font-headers); color: #585858; font-size: 240%; font-weight: 900; text-align: center; line-height: 1; display: flex; align-items: center; justify-content: center; } article.loop .corner { background: #FFFFFF; display: inline-block; transform: rotate(-24deg); padding: 30px 110px; z-index: 10; position: absolute; top: -35px; left: -110px; color: var(--color-accent); } article.loop .corner span { transform: rotate(24deg); display: inline-block; } article.loop .content { box-sizing: border-box; } article.loop .text { overflow: hidden; padding-bottom: 30px } article.loop a.view-article { color: var(--color-dark); position: absolute; bottom: 10px; left: 0; font-weight: bold; font-size: 80% } article.loop.category-verslag .image { -webkit-filter: grayscale(100%); filter: grayscale(100%); } article.single img { max-width: 100% } article.single .thumbnail img { max-width: 100%; margin: 0 0 30px 0 } article.single .info { margin: -0.4rem 0 1.5rem 0 } article.single.category-nieuws .author, body.location-template-default .author { display: none } article.single.small { } article.single.category-nieuws h1 { font-size: 400% } body.location-template-default .author { display: none } article.single.category-nieuws-extern .author, body.location-template-default .author { display: none } article.single.small { } article.single.category-nieuws-extern h1 { font-size: 400% } body.location-template-default .author { display: none } article.single.category-informatie .author, body.location-template-default .author { display: none; } article.single.small { } article.single.category-informatie h1 { font-size: 400%; } @media only screen and (max-width:768px){ article.loop { padding: 0 0 10px 0; border-bottom: 1px solid #EAEAEA; margin: 0 0 20px 0 } } /* events */ body.event-template-default .hideforevents { display: none } .em-booking { border: 1px solid #EAEAEA; padding: 30px; margin: 0 0 30px 0 } .em-booking-form-details { width: 100% } .css-events-list { } .css-events-list table { width: 100% } .css-events-list table th { text-align: left; padding: 10px 0 } .css-events-list table.events-table tr { border-bottom: 1px solid #EAEAEA } .css-events-list table.events-table td { padding: 10px 0 } footer { background: #F2F2F2; min-height: 200px; padding: 30px 0; } /* portfolio */ .vp-portfolio { margin: auto !important } /* Slideshow */ #slideshow-container-specific-name { width: 100%; height: 500px; margin-bottom: 20px; position: relative; } .slideshow-image-container { width: 100%; height: 100%; position: relative; } .slideshow-image-container > div { display: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .slideshow-image-container > div img { width: 100%; height: 100%; object-fit: scale-down; } .slideshow-image-container > div:first-of-type { display: block; } .slideshow-button-container { width: 100%; display: grid; grid-template-columns: auto auto; justify-content: space-between; z-index: 6; cursor: pointer; position: absolute; top: 50%; } .slideshow-button-container div { cursor: pointer; } .slideshow-button { padding: 8px; color: #ffffff; background-color: rgba(0,0,0,0.5); border-radius: 50%; } /* vote */ .usp-pro .usp-input-remember, .usp-pro .usp-label-remember { display: none !important; } .usp-pro .usp-add-another a { cursor: pointer; color: #ffffff; border: 1px solid #00c597; background-color: #00c597; margin: 12px 0; display: inline-block; padding: 12px; border-radius: 3px; } .usp-pro .usp-success { color: #ffffff; font-size: 18px; line-height: 24px; margin-bottom: 20px; padding: 24px; background-color: #00c597; } .usp-pro .usp-error { color: #ffffff !important; font-size: 18px; line-height: 24px; margin: 12px 0 20px; padding: 24px; background-color: #cc6666; } .usp-images-wrap { margin: 32px 0; } .usp-image-thumbnail { width: 108px; height: 108px; margin-bottom: 4px; object-fit: cover; cursor: pointer; } .usp-images-container img { outline: 4px solid white; outline-offset: -4px; } #usp-image-1 { outline: 4px solid #00c597; outline-offset: -4px; } .usp-images-container { margin-bottom: 20px; text-align: center; } .post-1431 .usp-success::after, .post-1638 .usp-success::after, .postid-1638 .usp-success::after { content: ' Het project is succes ingediend. De inzending wordt gecontroleerd en dan toegevoegd op de site. Vanaf dan kunnen bezoekers reageren op dit project.'; } .post-1348 .usp-success::after, .post-1636 .usp-success::after, .postid-1636 .usp-success::after { content: ' Je nominatie is succesvol verstuurd, deze wordt nog gecontroleerd en dan toegevoegd op de site. De nieuwe inzendingen worden op vrijdagen online gezet. In de maand augustus zijn wij er even tussenuit, nominaties die in die periode worden geupload verschijnen begin september op de site.'; } .post-1359 .usp-success::after, .post-1639 .usp-success::after, .postid-1639 .usp-success::after { content: ' Het project is succesvol verstuurd. De inzending wordt gecontroleerd en dan toegevoegd op de site.'; } .info-message { color: #00c597; font-size: 18px; line-height: 24px; margin-bottom: 32px; } #bai-project-meta { margin-bottom: 20px; } #bai-project-meta tr td { padding-bottom: 8px; } #bai-project-meta tr td:first-child { width: 250px; } #bai-project-meta tr td:nth-child(2) { font-weight: bold; } #bai-vote-body-block { background-color: #000000; opacity: 0.6; position: fixed; top: 0; left:0; width: 100%; height: 100%; z-index: 100; display: none; } #bai-dialog-block { background-color: #000000; opacity: 0.6; position: absolute; top: 0; left:0; width: 100%; height: 100%; z-index: 102; display: none; } #bai-vote-dialog-centerpoint { top: 50%; left: 50%; position: fixed; z-index: 101; display: none; } #bai-vote-dialog { width: 400px; margin-left: -200px; height: 430px; margin-top: -215px; padding: 0; background-color: #ffffff; } #bai-vote-dialog-header { padding: 48px 48px 0 48px; } #bai-vote-dialog-text { padding: 12px 48px; } #bai-vote-dialog-fields { padding: 12px 48px; } #bai-vote-dialog-buttons { padding: 12px 48px; } #bai-vote-dialog-fields input { width: 100%; } .bai-vote-button { cursor: pointer; margin: 0px 12px 12px 0; padding: 8px 16px; background-color: #c9282d; color: #ffffff; } .bai-vote-button-40 { background-color: #255991; } .bai-vote-button.bai-vote-button-voted { cursor: default; background-color: #666666; color: #aaaaaa; } .bai-vote-button-close { cursor: pointer; margin: 12px 12px 12px 0; padding: 8px 16px; background-color: #ffffff; border: 1px solid #aaaaaa; color: #aaaaaa; } .field-validation-message { color: #c9282d; display: none; padding: 4px 0; } .field-validation-error { border: 1px solid #c9282d; } @media only screen and (max-width: 350px) { #bai-vote-dialog-centerpoint { top: 100px; left: 0; position: fixed; z-index: 101; display: none; } #bai-vote-dialog { width: 100%; margin-left: 0; height: 100%; margin-top: 0; } }