/* Theme Name: Mijnkerk Child Template: mijnkerk Site: PG Driebergen Version: 1.3 */ :root { --achtergrondkleur-4: #b4a99f; } /*---ALGEMEEN---*/ body, .header-row {background: var(--achtergrondkleur-1);} .button {box-shadow: none !important; border-radius: 200px; text-transform: none; color: #ffffff; background-color: var(--hoofdkleur-2); } .button.button-alt {background-color: #ffffff; color: var(--hoofdkleur-2); border: 1px solid var(--achtergrondkleur-3);} .button:not(.button-large) {font-size: 16px;} .button:after {content: "\f105"; font-size: 20px; margin-left: 10px; color: #ffffff; font-weight: 400; font-family: "Font Awesome 6 Pro"; -webkit-font-smoothing: antialiased; display: var(--fa-display, inline-block); font-style: normal; font-variant: normal; line-height: 1; text-rendering: auto;} .button-alt:after {color: var(--hoofdkleur-2); } /*---FONT---*/ body {font-size: 20px;} body footer {font-size: 16px;} footer .footer-heading:not(.footer-heading-main) {font-size: 20px;} .div-block.tekst h4 {font-size: var(--h5);} .paginablokken section h2, .paginablokken section:not(.page-breaker) h3 {font-size: var(--h4); color: var(--hoofdkleur-3);} @font-face { font-family: 'Bree%20Bold%20Oblique'; src: url('fonts/Bree%20Bold%20Oblique.otf'); } @font-face { font-family: 'Bree%20Bold'; src: url('fonts/Bree%20Bold.otf'); } @font-face { font-family: 'Bree%20ExtraBold%20Oblique'; src: url('fonts/Bree%20ExtraBold%20Oblique.otf'); } @font-face { font-family: 'Bree%20ExtraBold'; src: url('fonts/Bree%20ExtraBold.otf'); } @font-face { font-family: 'Bree%20Light%20Oblique'; src: url('fonts/Bree%20Light%20Oblique.otf'); } @font-face { font-family: 'Bree%20Light'; src: url('fonts/Bree%20Light.otf'); } @font-face { font-family: 'Bree%20Oblique'; src: url('fonts/Bree%20Oblique.otf'); } @font-face { font-family: 'Bree%20Regular'; src: url('fonts/Bree%20Regular.otf'); } @font-face { font-family: 'MuseoSans-100'; src: url('fonts/MuseoSans-100.otf'); } @font-face { font-family: 'MuseoSans-100Italic'; src: url('fonts/MuseoSans-100Italic.otf'); } @font-face { font-family: 'MuseoSans-300'; src: url('fonts/MuseoSans-300.otf'); } @font-face { font-family: 'MuseoSans-300Italic'; src: url('fonts/MuseoSans-300Italic.otf'); } @font-face { font-family: 'MuseoSans-500'; src: url('fonts/MuseoSans_500.otf'); } @font-face { font-family: 'MuseoSans-500_Italic'; src: url('fonts/MuseoSans_500_Italic.otf'); } @font-face { font-family: 'MuseoSans-700'; src: url('fonts/MuseoSans_700.otf'); } @font-face { font-family: 'MuseoSans-700Italic'; src: url('fonts/MuseoSans-700Italic.otf'); } @font-face { font-family: 'MuseoSans-900'; src: url('fonts/MuseoSans_900.otf'); } @font-face { font-family: 'MuseoSans-900Italic'; src: url('fonts/MuseoSans-900Italic.otf'); } h1, h2, h3, h4, h5, h6 {font-family: 'Bree%20Regular'; font-weight: normal !important; color: var(--hoofdkleur-3);} section.verwijzingen .verwijzing-titel {font-family: 'MuseoSans-500'; font-weight: normal !important;} body, input, select, textarea, td, #hoofdmenu-list .menu-item a {font-family: 'MuseoSans-300'; font-weight: normal !important;} .button {font-family: 'MuseoSans-500'; font-weight: normal !important;} body h1 {font-size: var(--h2);} /*---HEADER---*/ header .zoekformulier-wrapper {border-radius: 200px; padding-left: 30px;} header .dashicons:hover {color: var(--hoofdkleur-2);} header .zoekformulier-wrapper {border: 2px solid var(--hoofdkleur-2);} .overzicht-filter {display: none;} @media (min-width: 992px) and (max-width: 1060px) { header .site-logo { height: 70px;} } /*---MENU---*/ #hoofdmenu-list > li > a > .pagina-icoon {display: none;} #hoofdmenu-list .menu-item a:hover {color: var(--hoofdkleur-2);} .pagina-icoon {width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; color: var(--hoofdkleur-2); font-size: 22px;} .sub-menu li:hover {background: var(--achtergrondkleur-1);} header.vertikaal_submenu #hoofdmenu-list .sub-menu .menu-item a {padding-left: 15px; padding-right: 15px; } #hoofdmenu-list.menu-list .menu-item .sub-menu {padding: 0px !important;} header.vertikaal_submenu #hoofdmenu-list .sub-menu .menu-item:first-child a {padding-top: 10px;} header.vertikaal_submenu #hoofdmenu-list .sub-menu .menu-item:last-child a {padding-bottom: 10px;} #hoofdmenu-list.menu-list .menu-item .sub-menu {overflow:hidden;} header.vertikaal_submenu #hoofdmenu-list.menu-list .menu-item .sub-menu {left:0px;} /*---HOME---*/ @media (min-width:768px){.home h1 {margin-top: 60px;}} .home .hero-tekst {width: 100%; } @media (min-width:768px){.kb-searchbar-wrap {margin-bottom: 100px !important;}} /*---PAGE---*/ .paginadesign-achter {background: #000000;} .paginadesign-achter h1 {font-size: clamp(var(--h1), 5vw, 5vw);} .paginadesign-achter > img {opacity: 0.7;} .page .content > div:first-child {max-width: 900px; margin: auto;} .page .overzicht-ajax {margin-top: 20px;} .error404 .hero-image {display: none;} .error404 .hero-image + section > .section-inner-wrap {padding-top: 75px;} /*---SINGLE---*/ /*---PAGINABLOKKEN---*/ @media (min-width:768px){ .paginablokken section:not(.boven-geen-ruimte):not(.geen-ruimte):not(.carousel) .section-inner-wrap { padding-top: 60px;} .paginablokken section:not(.onder-geen-ruimte):not(.geen-ruimte):not(.carousel) .section-inner-wrap {padding-bottom: 60px; } } .paginablokken section:not(.onder-geen-ruimte):not(.geen-ruimte):not(.page-breaker) + section:not(.carousel):not(.page-breaker) .section-inner-wrap {padding-top: 0px;} section.carousel .section-inner-wrap, section.bijbeltekst .section-inner-wrap .bijbelblok {border-radius: var(--borderradius); border: 0px !important; box-shadow: var(--box-shadow); background-color: #fff; width: calc(100% - 40px); max-width: 1360px; padding-top: 20px; padding-bottom: 20px; padding-left: 40px; padding-right: 40px; margin-top: 0px; margin-bottom: 60px;} section.bijbeltekst .section-inner-wrap .bijbelblok {padding-top: 40px; padding-bottom: 40px; margin-bottom: 0px;} section.breed .section-inner-wrap, section.tekst-afbeelding.breed .collumns-2.boven{max-width: 1400px !important;} /**hero**/ section.hero {min-height: auto !important;} @media (max-width:768px){.hero.slider .flickity-enabled, .hero.slider .flickity-viewport, .hero.slider .flickity-slider, .hero.slider .media, section.hero .collumns-2 img, section.hero.voor .hero-bericht-slide img { max-height: 500px; height: calc(100vh - 430px) !important;}} /**tekst en afbeeldingen**/ section.tekst-afbeelding:not(.hero) .tekst-inner {padding-right: 0px; padding-left: 0px; padding-top: 40px; padding-bottom: 40px;} /**carousel**/ .flickity-prev-next-button.flickity-button.previous {left: -40px; background-color: transparent; color: var(--hoofdkleur-2);} .flickity-prev-next-button.flickity-button.next {right: -40px; background-color: transparent; color: var(--hoofdkleur-2);} section.carousel .button.button-alt {border: 0px; background-color: transparent; color: var(--footerkleur); font-weight: 500 !important; font-size: 16px; padding-left: 0px; padding-right: 0px; margin-right: -20px;} section.carousel .button.button-alt:after {content: "\f105"; font-size: 20px; margin-left: 10px; color: var(--hoofdkleur-2); font-weight: 400; font-family: "Font Awesome 6 Pro"; -webkit-font-smoothing: antialiased; display: var(--fa-display, inline-block); font-style: normal; font-variant: normal; line-height: 1; text-rendering: auto;} @media (min-width:992px) {section.carousel .carousel-cell {width: calc(20% + 4px);}} section.carousel .carousel-cell a {border-radius: 0px;} section.carousel img, section.carousel iframe {border-radius: var(--borderradius); height: 180px;} section.carousel .text-block {padding-bottom: 0px;} section.carousel h4 {color: var(--tekstkleur); font-size: 18px; font-family: 'MuseoSans-500';} section.carousel a:hover h4 {color: var(--hoofdkleur-3); } section.carousel .carousel-cell a span {color: var(--footerkleur); font-size: var(--m-text);} /**overzicht**/ section.overzicht .text-block {position: relative;} section.overzicht h4 {color: var(--hoofdkleur-3); } section.overzicht .overzicht-cell a span {color: var(--footerkleur); font-size: var(--m-text);} section.overzicht .post-text:after {content: "\f105"; font-size: 20px; position:absolute; right: 20px; bottom: 20px; color: var(--hoofdkleur-2); font-weight: 400; font-family: "Font Awesome 6 Pro"; -webkit-font-smoothing: antialiased; display: var(--fa-display, inline-block); font-style: normal; font-variant: normal; line-height: 1; text-rendering: auto;} .content .buttons:not(.overzicht-buttons) {max-width: 900px; margin: auto; } /***overzicht vieringen***/ section.overzicht-viering .overzicht-cell a {box-shadow: var(--box-shadow);} section.overzicht-viering .overzicht-cell .text-block {padding-top: 20px; padding-bottom: 20px; height: 100%;} /**page breaker**/ section.page-breaker h3 {font-size: var(--h2);} section.page-breaker div.text-shadow {font-style: italic; font-size: var(--h4);} /**verwijzingen**/ section.verwijzingen a {border: 1px solid var(--achtergrondkleur-3); box-shadow: none; } section.verwijzingen.voor a {display: grid; grid-template-columns: 50px auto; padding: 15px; grid-gap: 15px; justify-content: start;} section.verwijzingen.voor .tekst-container {padding: 0px;} section.verwijzingen .verwijzing-titel {font-size: 18px; } section.verwijzingen .verwijzing-icon { font-size: 30px; color: var(--footerkleur); width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; } @media (min-width:1200px){.verwijzing-columns-5 {grid-template-columns: repeat(5, 1fr); grid-gap: 20px;}} section.verwijzingen.voor a div.verwijzing-tekst { color: var(--footerkleur); font-size: var(--m-text); margin-top: 0px; text-align: left;} section.verwijzingen.boven .section-inner-wrap img {height: 180px;} .verwijzingen-tekst + .verwijzing-columns {margin-top: 30px;} section.verwijzingen .verwijzing-icon .fa-light {font-weight: 600; color: var(--achtergrondkleur-4); font-size: 36px;} section.verwijzingen.voor .section-inner-wrap img {width: 100%; object-fit: contain;} section.verwijzingen.voor .section-inner-wrap img + .tekst-container {width: 100%;} /**faq**/ /*---FOOTER---*/ #bovenbalk section {background-color: var(--achtergrondkleur-3);} #bovenbalk section .tekst-inner {padding-right: 30px; padding-left: 30px;} footer .back-to-top { position: fixed; right: 50%; margin: 30px 0px; transform: translateX(50%); } footer .back-to-top-container { border-radius: 17px; width: 9.5em; } footer .back-to-top-container::before { content: 'Naar boven'; font-size: 15px; font-weight: 500; margin-right: 3px; padding-left: 6px;} /*---CONTENT---*/ .overzicht .content .button {background-color: #ffffff; color: var(--hoofdkleur-2); border: 1px solid var(--achtergrondkleur-3);} .overzicht .content .button:after {color: var(--hoofdkleur-2); } /**blockquote**/ /**formulieren**/ /*lightbox*/ .lightbox-container {padding-bottom: 40px; border-radius: var(--borderradius);} @media (max-width:991px) {.lightbox-container {width: calc(100% - 60px); height: calc(100% - 60px);}} .lightbox-image img {border-radius: var(--borderradius); margin-bottom: 20px; object-fit: cover; height: 500px; max-height: calc(100vh - 260px);} @media (min-width:992px) {.lightbox-image img {max-height: calc(100vh - 300px);}} /**search field home**/ /* ===== Mooie zoekbalk styles ===== */ :root{ --kb-sb-bg: #ffffff; --kb-sb-ring: rgba(0,0,0,0.06); --kb-sb-ring-strong: rgba(0,0,0,0.10); --kb-sb-text: #333; --kb-sb-placeholder: #8b8b8b; --kb-sb-button: #e06a1c; /* oranje knop */ --kb-sb-button-hover: #c95f19; } .kb-sb-heading{ font-weight: 700; font-size: 2rem; line-height: 1.2; margin-bottom: .6rem; color: #7a2a78; /* paars zoals screenshot */ } /* uitlijning container */ .kb-sb-align-left { text-align: left; } .kb-sb-align-center{ text-align: center; } .kb-sb-align-right { text-align: right; } .kb-searchbar-wrap{ margin: 12px 0; } .kb-searchbar{ display: inline-flex; align-items: center; width: 100%; background: var(--kb-sb-bg); border-radius: 999px; box-shadow: var(--box-shadow); position: relative; padding-right: 68px; /* ruimte voor de ronde knop */ } .kb-sb-input{ appearance: none; border: none !important; background: transparent; font-size: 1rem; line-height: 1; padding: 18px 22px; width: calc(100% - 20px); color: var(--kb-sb-text); outline: none; } .kb-sb-input::placeholder{ color: var(--kb-sb-placeholder); } /* Ronde oranje knop die over de rand valt */ .kb-sb-button{ position: absolute; right: -10px; top: 50%; transform: translateY(-50%); width: 65px; height: 65px; border-radius: 50%; border: none; background: var(--hoofdkleur-2); color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: var(--box-shadow); transition: transform .3s ease, background .15s ease, box-shadow .15s ease; } .kb-sb-button:hover{ transform: translateY(-50%) scale(1.1);} .kb-sb-button:active{ transform: translateY(-50%) scale(0.98); } .kb-sb-icon{ display:block; } /* Focus state voor toegankelijkheid */ .kb-searchbar:focus-within{ box-shadow: 0 2px 4px var(--kb-sb-ring), 0 10px 28px var(--kb-sb-ring-strong), 0 0 0 3px rgba(224,106,28,0.15); } /* Kleinere schermen */ @media (max-width: 480px){ .kb-sb-button{ width: 50px; height: 50px; right: 5px; } .kb-searchbar{ padding-right: 62px; } }