/* Table of Content ================================================== #Site Styles #Media Queries */ /* #Site Styles ================================================== */ :root { --font-family-base: 'Avenir', sans-serif; --font-size-base: 16px; --width-base: 1230px; --width-lg: 1880px; --lineheight-base: 1.75; --gutter-base: 15px; --color-text: #2e2e2e; --color-primary: #77923b; --color-secondary: #bec14f; --color-grey: #f1f1f4; --color-gray-100: #8d8d8d; --color-blue: #315c87; --color-blue-100: #5881ad; --color-skyblue: #6f99ba; --color-green: #586e27; --color-light: #f3f4e6; --color-light-100: #fdfef9; --color-brown: #785a00; --color-yellow: #f2b704; --color-yellow-100: #fbbf14; --color-white: #fff; --color-black: #000; --color-near-black: #010103; --color-leah: #dcddb8; --color-beige: #f4f5dc; --color-opal: #f3f4e6; --color-ivory: #eef2e0; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-bold: 700; --font-weight-heavy: 900; --font-family-icon: 'icomoon', sans-serif; --font-family-heading: 'Amatic', sans-serif; --font-size-h1: 40px; --font-size-h2: 32px; --font-size-h3: 24px; --font-size-h4: 20px; --font-size-h5: 18px; --font-size-h6: 16px; --heading-lineheight: 1.1; --default-radius: 6px; --base-duration: 0.25s; } /* ### general ### */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { font-family: var(--font-family-base), sans-serif; font-size: var(--font-size-base); font-weight: var(--font-weight-light); line-height: var(--lineheight-base); color: var(--color-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { background: var(--color-white); } input, select, textarea { padding: 8px 20px 5px; width: 100%; height: 48px; font-family: var(--font-family-base), sans-serif; font-size: var(--font-size-base); font-weight: var(--font-weight-regular); color: var(--color-black); border: 1px solid rgba(46, 46, 46, 0.1); border-radius: var(--default-radius); background-color: var(--color-white); } select { background: url('../images/select-arrow.png') no-repeat center right 10px; -webkit-appearance: none; } textarea { padding-top: 15px; height: 144px; } input[type='checkbox'] { padding: 0; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1px solid rgba(46, 46, 46, 0.1); border-radius: var(--default-radius); background-color: var(--color-white); -webkit-appearance: none; } input[type='checkbox']:checked:before { display: block; font-family: var(--font-family-icon), sans-serif; font-size: 8px; content: '\e901'; } input::placeholder, textarea::placeholder { color: rgba(0, 0, 0, 0.5); } img { display: block; max-width: 100%; height: auto; border: 0; } ul, li { list-style: none; } p { margin-bottom: 20px; } a { color: var(--color-primary); } :focus { outline: none; } h1, h2, h3, h4, h5, h6 { margin-bottom: 16px; font-family: var(--font-family-heading), sans-serif; font-weight: var(--font-weight-bold); line-height: var(--heading-lineheight); color: var(--color-primary); } h1 { font-size: var(--font-size-h1); } h2 { font-size: var(--font-size-h2); } h3 { font-size: var(--font-size-h3); } h4 { font-size: var(--font-size-h4); } h5 { font-size: var(--font-size-h5); } h6 { font-size: var(--font-size-h6); } /* ### global classes ### */ .clear { visibility: hidden; clear: both; height: 0; line-height: 0; } .centered { padding-right: var(--gutter-base); padding-left: var(--gutter-base); } .centered-lg { padding-right: var(--gutter-base); padding-left: var(--gutter-base); } .button { padding: 13px 20px; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; font-family: var(--font-family-base), sans-serif; font-size: var(--font-size-base); font-weight: var(--font-weight-regular); line-height: var(--heading-lineheight); text-decoration: none; color: var(--color-white); border: 1px solid var(--color-primary); border-radius: var(--default-radius); background-color: var(--color-primary); transition: var(--base-duration); cursor: pointer; } .button:focus, .button:hover { color: var(--color-white); border: 1px solid var(--color-green); background-color: var(--color-green); } .button-outline { color: var(--color-primary); border: 1px solid var(--color-primary); background-color: transparent; } .button-outline:focus, .button-outline:hover { color: var(--color-white); border: 1px solid var(--color-primary); background-color: var(--color-primary); } .button-black-outline { color: var(--color-black); border: 1px solid var(--color-black); background-color: transparent; } .button-black-outline:focus, .button-black-outline:hover { color: var(--color-white); border: 1px solid var(--color-black); background-color: var(--color-black); } .button-white-outline { color: var(--color-white); border: 1px solid var(--color-white); background-color: transparent; } .button-white-outline:focus, .button-white-outline:hover { color: var(--color-text); border: 1px solid var(--color-white); background-color: var(--color-white); } .textBox ul { padding-left: 16px; } .textBox ul li { list-style: disc; } .textBox ol { padding-left: 16px; } .textBox ol li { list-style: decimal; } /* ### wrapper ### */ #wrapper { padding-top: 62px; position: relative; display: block; width: 100%; min-height: 100%; overflow: clip; } /* ### header ### */ .header { padding-top: 15px; padding-bottom: 15px; position: fixed; top: 0; z-index: 9; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; width: 100%; background-color: var(--color-white); } .header-logo { display: block; width: 200px; } .header-logo img { width: 100%; } .header-info { display: flex; justify-content: flex-end; } .header-info .button { padding: 12px 15px 12px; display: none; font-weight: var(--font-weight-heavy); } .header-lang { position: relative; display: none; border-radius: var(--default-radius); background-color: var(--color-white); } .header-lang li { text-transform: uppercase; } .header-lang li a { padding: 5px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; font-size: 14px; text-decoration: none; color: var(--color-text); border-radius: var(--default-radius); } .header-lang li a i { margin-top: -2px; margin-left: 6px; font-size: 5px; transition: var(--base-duration); } .header-lang li a:focus, .header-lang li a:hover { color: var(--color-primary); } .header-lang li:hover ul { opacity: 1; visibility: visible; } .header-lang li ul { margin-top: -6px; position: absolute; top: 100%; left: 0; opacity: 0; visibility: hidden; border-radius: 0 0 var(--default-radius) var(--default-radius); background-color: var(--color-white); transition: var(--base-duration); } .header-lang li ul li a { padding: 2px 5px; display: block; height: auto; border-radius: 0; } .header.transparent { background-color: transparent; transition: background-color var(--base-duration); } .header.transparent.sticky { background-color: var(--color-white); } /* ### header-menu ### */ .header-menu { display: none; } .header-menu ul { display: flex; flex-wrap: wrap; justify-content: center; } .header-menu ul > li { margin-right: 20px; position: relative; } .header-menu ul > li:last-of-type { margin-right: 0; } .header-menu ul > li:hover > ul { opacity: 1; visibility: visible; } .header-menu ul > li > a { display: inline-flex; align-items: center; text-decoration: none; color: var(--color-text); transition: var(--base-duration); } .header-menu ul > li > a i { margin-left: 5px; font-size: 5px; } .header-menu ul > li > a:focus, .header-menu ul > li > a:hover { color: var(--color-primary); } .header-menu ul > li > ul { padding: 10px 0; position: absolute; top: 100%; left: 0; display: block; opacity: 0; visibility: hidden; width: fit-content; border-radius: var(--default-radius); background-color: var(--color-white); transition: var(--base-duration); box-shadow: 0 2px 5px rgb(0, 0, 0, 0.16); } .header-menu ul > li > ul > li { margin-right: 0; } .header-menu ul > li > ul > li > a { padding: 3px 15px 1px; width: fit-content; white-space: nowrap; } .header-menu ul > li > ul > li > ul { top: 0; left: 100%; } /* ### Mobile Menu ### */ .mobile-menu { position: absolute; top: 7px; right: 0; transition: var(--base-duration); } .mobile-menu .hamburger { position: absolute; top: 13px; right: 20px; display: flex; align-items: center; color: var(--color-primary); transition: all 0.3s ease-in-out; cursor: pointer; } .mobile-menu label { margin-bottom: 0; } .m-menu__checkbox { display: none !important; } .m-menu__toggle { margin-left: -8px; padding-top: 5px; cursor: pointer; } .m-menu { padding-bottom: 5px; position: fixed; top: 0; right: -768px; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; opacity: 0; visibility: hidden; width: calc(100vw - 30px); max-width: 768px; height: 100vh; background-color: var(--color-white); -o-transform: translate3d(-450px, 0, 0); transform: translate3d(768px, 0, 0); transition: transform 0.35s; overflow: hidden; } .m-menu__overlay { position: absolute; top: 0; bottom: 0; z-index: 1; display: none; width: 100%; background-color: rgba(103, 103, 103, 0.5); } .m-menu__header { padding: 0 16px; display: flex; align-items: center; height: 61px; border-bottom: 1px solid var(--color-text); } .m-menu__header span { width: 100%; font-size: 20px; text-align: center; color: var(--color-white); } .m-menu .m-menu { transform: translate3d(768px, 0, 0); } .m-menu .header-submenu { padding: 5px 0; border-bottom: 1px solid var(--color-text); } .m-menu ul { overflow-y: auto; } .m-menu ul li { margin-right: 0 !important; position: relative; display: block !important; } .m-menu ul li ul { display: block !important; } .m-menu ul li a { font-size: 16px; font-weight: 400; } .m-menu ul li a:focus, .m-menu ul li a:hover { text-decoration: none !important; color: var(--color-secondary); } .m-menu ul li a, nav .m-menu ul li label { padding: 0 15px; position: relative; display: block; line-height: 47px; text-align: left; text-decoration: none; color: var(--color-text); border-bottom: 1px solid var(--color-text); cursor: pointer; } nav .m-menu ul li label { border-bottom: 0; } .m-menu .btn-last { padding: 15px 10px; border-bottom: 0; } .m-menu .button { display: flex; align-items: center; justify-content: center; color: var(--color-white); border: 0; background-color: var(--color-secondary); } .m-menu .button:focus, .m-menu .button:hover { background-color: var(--color-secondary); } .m-menu .button.button-arrow:after { height: 42px; } .m-menu ul li label.a-label__chevron { padding: 0 25px; position: absolute; top: 0; right: 0; display: inline-block; height: 48px; border-left: solid 1px var(--color-text); } .m-menu ul li label.a-label__chevron:after { padding: 5px; position: absolute; top: 19px; right: 20px; display: inline-block; width: 0; height: 0; border-color: var(--color-text); border-style: solid; border-width: 1px 1px 0 0; transform: rotate(45deg); content: ''; } .m-menu ul li .-invisible { border-bottom: 0; } .m-menu .m-menu label.m-menu__toggle { margin: 0 !important; padding: 0 0 0 10px; display: flex; border-bottom: 0; } .m-menu__checkbox:checked ~ .m-menu__overlay { display: block; } .m-menu__checkbox:checked ~ .m-menu { right: 0; opacity: 1; visibility: visible; transform: translate3d(0, 0, 0); } .m-menu .header-lang { position: relative; display: block; width: 70px; border-radius: var(--default-radius); background-color: transparent; text-transform: uppercase; } .m-menu .header-lang a { padding: 5px 15px; display: flex; align-items: center; justify-content: space-between; font-size: 16px; text-decoration: none; color: var(--color-text); border-radius: var(--default-radius); } .m-menu .header-lang a i { margin-top: -2px; margin-left: 6px; font-size: 7px; } .m-menu .header-lang a:focus, .m-menu .header-lang a:hover { color: var(--color-text); } .m-menu .header-lang-dropdown { opacity: 1; visibility: visible; } .m-menu .header-lang-dropdown { margin-top:0; position: unset; top: auto; left: auto; width: 100%; opacity: 1; visibility: visible; border-radius: 0; background-color: transparent; } .m-menu .header-lang .header-lang-dropdown a { padding: 2px 15px; display: block; height: auto; border-radius: 0; } /* ### hero ### */ .hero { margin-top: -62px; padding-top: 160px; padding-bottom: 20px; position: relative; text-align: center; } .hero:before { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(46, 46, 46, 0) 0%, rgba(46, 46, 46, 0) 60%, rgba(46, 46, 46, 1) 100%); content: ''; pointer-events: none; } .hero-text { margin: 0 auto; position: relative; z-index: 2; max-width: 1050px; } .hero-text h1 { color: var(--color-white); text-shadow: 6px 6px 12px rgba(0, 0, 0, 1); } .hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .hero-bg img { width: 100%; height: 100%; object-fit: cover; } .hero .planned { margin-bottom: 0; } .hero + .planned { margin-bottom: 40px; } .hero .planned-book { display: none; } .hero + .planned { display: none; } /* ### banner ### */ .banner { position: relative; display: flex; align-items: flex-end; justify-content: center; min-height: 280px; text-align: center; } .banner:before { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(46, 46, 46, 0) 0%, rgba(46, 46, 46, 0) 40%, rgba(46, 46, 46, 1) 100%); content: ''; pointer-events: none; } .banner-text { position: relative; z-index: 2; } .banner-text h1 { color: var(--color-white); text-shadow: 6px 6px 12px rgba(0, 0, 0, 1); } .banner-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .banner-bg img { width: 100%; height: 100%; object-fit: cover; } .banner.inner { padding-top: 12px; align-items: center; min-height: 300px; } /* ### planned ### */ .planned { margin-bottom: 50px; position: relative; z-index: 1; } .planned-holder { padding: 22px 30px; display: grid; grid-template-columns: repeat(1, 1fr); gap: 20px; border-radius: var(--default-radius); background-color: var(--color-white); box-shadow: 6px 6px 12px 0 rgba(0, 0, 0, 0.32); } .planned-column label { display: block; font-weight: var(--font-weight-heavy); text-align: left; } .planned-column select { color: rgba(0, 0, 0, 0.5); cursor: pointer; } .planned-column .button { width: 100%; } .planned-column label.is-hide { display: none; } .planned-book { margin-top: 20px; text-align: center; } .planned-book .button { font-weight: var(--font-weight-heavy); color: var(--color-white); border: 1px solid var(--color-secondary); background-color: var(--color-secondary); cursor: inherit; } /* ### tours ### */ .tours-text { margin: 0 auto 21px; max-width: 610px; text-align: center; } .tours-text img { margin: 0 auto; } .tours-text h2 { margin-bottom: 14px; } .tours-text p:last-of-type { margin-bottom: 0; } .tours-toggle { margin: 0 auto 30px; padding: 4px; display: flex; justify-content: space-between; max-width: 346px; border: 1px solid var(--color-light); border-radius: var(--default-radius); } .tours-toggle button { padding-top: 3px; display: flex; align-items: center; justify-content: center; min-width: 150px; height: 48px; font-family: var(--font-family-base), sans-serif; font-size: var(--font-size-base); font-weight: var(--font-weight-regular); color: var(--color-primary); border: 0; border-radius: var(--default-radius); background-color: transparent; cursor: pointer; } .tours-toggle button.is-active { color: var(--color-white); background-color: var(--color-primary); } .tours-toggle button:last-of-type { margin-right: 0; } .tours-holder { display: none; grid-template-columns: repeat(1, 1fr); gap: 15px; } .tours-holder .swiper { overflow: visible; } .tours-holder .swiper-slide { height: auto; } .tours-holder.active { display: block; } .tours-table { display: none; } .tours-table.active { display: block; } .tours-table-head { padding: 5px 21px 2px; display: flex; flex-wrap: wrap; border-top: 1px solid var(--color-light); } .tours-table-head-item { width: 100%; font-weight: var(--font-weight-heavy); } .tours-table-head-item.is-hide { display: none; } .tours-table-head-item:nth-child(2) { width: 10.1%; } .tours-table-head-item:nth-child(3) { width: 10%; } .tours-table-head-item:nth-child(4) { width: 31%; } .tours-table-head-item:nth-child(5) { width: 22%; } .tours-table-row { padding: 5px 5px 5px 10px; display: flex; flex-wrap: wrap; align-items: center; background-color: var(--color-light); } .tours-table-row:nth-child(odd) { background-color: var(--color-white); } .tours-table-item { width: 50%; font-size: 12px; } .tours-table-item:nth-child(2) { width: 9.9%; } .tours-table-item:nth-child(3) { width: 9.9%; } .tours-table-item:nth-child(4) { width: 40%; } .tours-table-item:nth-child(5) { width: 14.5%; } .tours-table-item:nth-child(6) { width: 15%; } .tours-table-item:nth-child(7) { width: 10%; text-align: right; } .tours-table-item .show-phone, .tours-table-item span { display: block; font-style: normal; } .tours-table-item.hide-phone, .tours-table-item.is-hide { display: none; } .tours-table-scroll tr td strong, .tours-table-item strong { padding: 1px 10px 0; display: inline-flex; font-size: 10px; font-weight: var(--font-weight-heavy); color: var(--color-primary); border-radius: var(--default-radius); background-color: rgba(190, 193, 79, 0.3); } .tours-table-item .button { padding: 0; width: 20px!important; height: 20px!important; font-size: 6px; min-height: auto; } .tours-table-item .button em { font-style: normal; display: none; } .tours-table-item .button i { display: inline-block; transform: rotate(-90deg); } .tours-all { margin-top: 30px; text-align: center; } .tours-all .button { min-width: 266px; } .tours-table-scroll table { width: 785px; border-top: solid 1px var(--color-light); } .tours-table-scroll thead tr td { padding: 2px 22px; font-weight: var(--font-weight-heavy); } .tours-table-scroll tbody tr:nth-child(odd) { background-color: var(--color-light); } .tours-table-scroll tbody tr td { padding: 6px 15px; } .tours-table-scroll tr td .button { padding: 7px 20px 8px; min-height: 36px; font-weight: var(--font-weight-heavy); } .tours.inner .tours-holder { padding-bottom: 60px; border-bottom: 1px solid var(--color-light); display: block; } /* ### card-tour ### */ .card-tour { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--color-text); border-radius: var(--default-radius); overflow: hidden; } .card-tour-image { aspect-ratio: 5 / 3; } .card-tour-image img { width: 100%; height: 100%; object-fit: cover; } .card-tour-text { padding: 25px; display: flex; flex-direction: column; flex: 1; border: 1px solid var(--color-light); border-radius: 0 0 var(--default-radius) var(--default-radius); } .card-tour-text h3 { margin-bottom: 1px; } .card-tour-text p { margin-bottom: 17px; font-size: 14px; line-height: 1.2; } .card-tour-text i { margin-bottom: 15px; display: block; } .card-tour-text ul { margin-bottom: 20px; padding-bottom: 25px; flex: 1; border-bottom: 1px solid var(--color-light); } .card-tour-text li { margin-bottom: 8px; padding-left: 20px; position: relative; line-height: 1.25; } .card-tour-text li:before { position: absolute; top: 3px; left: 0; font-family: var(--font-family-icon), sans-serif; font-size: 11px; color: var(--color-primary); content: '\e901'; } .card-tour-text li:last-of-type { margin-bottom: 0; } .card-tour-text h6 { margin-bottom: 0; font-family: var(--font-family-base), sans-serif; font-weight: var(--font-weight-heavy); text-align: center; color: inherit; } .card-tour-days { margin-bottom: 6px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } .card-tour-days span { margin-right: 8px; margin-bottom: 8px; padding: 6px 6px 3px; font-size: 12px; font-weight: var(--font-weight-heavy); line-height: var(--heading-lineheight); color: var(--color-brown); border-radius: var(--default-radius); background-color: rgba(242, 183, 4, 0.2); } .card-tour-days strong { margin-bottom: 5px; font-size: 10px; font-weight: var(--font-weight-heavy); text-decoration: underline; color: var(--color-brown); } .card-tour-text .button { margin-top: auto; width: 100%; } .card-tour-price { margin-bottom: 10px; font-size: 14px; text-align: center; } .card-tour-price strong { font-size: 16px; font-weight: var(--font-weight-heavy); } .card-tour:focus .card-tour-text .button, .card-tour:hover .card-tour-text .button { border: 1px solid var(--color-green); background-color: var(--color-green); } /* ### reviews ### */ .reviews { background-color: rgba(243, 244, 230, 0.2); } .reviews-text { margin: 0 auto 21px; max-width: 610px; text-align: center; } .reviews-text h2 { margin-bottom: 14px; } .reviews-text p:last-of-type { margin-bottom: 0; } .reviews-rating { margin: 0 auto 10px; padding: 4px 10px 2px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; max-width: 418px; font-size: 14px; font-weight: var(--font-weight-regular); text-align: center; border: 1px solid var(--color-light); border-radius: var(--default-radius); background-color: var(--color-white); } .reviews-rating-star { margin-right: 10px; display: flex; align-items: center; justify-content: center; } .reviews-rating-star img { margin-right: 10px; flex: 0 0 auto; width: 18px; height: 18px; } .reviews-rating-star i { margin-right: 2px; display: block; font-size: 16px; color: var(--color-yellow-100); } .reviews-rating-star i:last-of-type { margin-right: 0; } .reviews-rating a { color: var(--color-text); } .reviews-rating a:focus, .reviews-rating a:hover { text-decoration: none; } .reviews-slider { position: relative; } .reviews-all { margin-top: 39px; text-align: center; } .reviews-all .button { min-width: 266px; } .reviews .swiper { overflow: inherit; } .reviews .swiper-slide { opacity: 0.3; } .reviews .swiper-slide.swiper-slide-active { opacity: 1; } .reviews-nav { margin-top: 20px; display: flex; align-items: center; justify-content: center; } .reviews-nav .swiper-button-prev { transform: rotate(90deg); } .reviews-nav .swiper-button-next { margin-left: 10px; transform: rotate(-90deg); } /* ### card-review ### */ .card-review { border-radius: 6px; background-color: var(--color-white); overflow: hidden; } .card-review-image img { width: 100%; } .card-review-text { padding: 22px 25px; border: 1px solid var(--color-light); border-top: 0; border-radius: 0 0 var(--default-radius) var(--default-radius); } .card-review-text h3 { margin-bottom: 11px; line-height: 1.22; } .card-review-text p { margin-bottom: 14px; } .card-review-text .js-review-meer { margin-bottom: 14px; align-self: flex-start; } .card-review-text p a:focus, .card-review-text p a:hover { text-decoration: none; } .card-review-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } .card-review-row strong { display: block; font-weight: var(--font-weight-heavy); } .card-review-star { display: flex; } .card-review-star i { margin-right: 4px; display: block; color: var(--color-yellow-100); } /* ### concept ### */ .concept { background-color: var(--color-skyblue); } .concept-video { margin-bottom: 30px; } .concept-video iframe, .concept-video video { width: 100%; height: 300px; border-radius: var(--default-radius); object-fit: cover; } .concept-text { color: var(--color-white); } .concept-text h2 { margin-bottom: 15px; color: inherit; } .concept-text p { margin-bottom: 20px; } .concept-text .button { width: 100%; } /* ### download ### */ .download-holder { padding: 30px 30px 20px; position: relative; color: var(--color-white); border-radius: 6px; background-color: var(--color-secondary); } /* Variant met alleen een knop: geen formulier, dus ook geen verborgen * checkbox meer zoals in de HTML van de designer. */ .download.inner .button { width: auto; min-width: 180px; } .download-wrap { margin-bottom: 30px; } .download h2 { margin-bottom: 15px; color: inherit; } .download p { margin-bottom: 5px; } .download-image { display: inline-flex; } .download-row { margin-bottom: 6px; display: grid; grid-template-columns: repeat(1, 1fr); gap: 15px; } .download-field .button { width: 100%; } .download label { padding-left: 30px; position: relative; display: inline-flex; font-size: 14px; line-height: 1.25; } .download label input[type='checkbox'] { position: absolute; top: -2px; left: 0; } .download label a { color: var(--color-white); } .download label a:focus, .download label a:hover { text-decoration: none; color: var(--color-white); } /* ### formulieren ### * De eigen stylesheets van Gravity Forms staan uit via gform_disable_css in * functions.php. Alle opmaak van formulieren staat daarom hier. * * GF nest als volgt: .gform_wrapper > form > .gform_body > .gform_fields > * .gfield. Beide tussenlagen krijgen display:contents, zodat de velden én de * verzendknop grid-items van het formulier zelf worden. */ .gform_wrapper { margin: 0; } .gform_wrapper form { display: grid; grid-template-columns: repeat(1, 1fr); gap: 15px; align-items: start; } .gform_body, .gform_fields { display: contents; } .gfield { margin: 0; } .gform_footer { margin: 0; padding: 0; } .gform_required_legend, .gfield_required { display: none; } /* Honeypot en screenreader-velden. GF verbergt die normaal met eigen CSS; * die staat uit, dus hier. Ze moeten in de DOM blijven — weghalen breekt de * spamcontrole — en niet op display:none, want dat maakt ze onbereikbaar voor * schermlezers waar dat juist wel nodig is. */ .gform_validation_container, .gfield--type-honeypot, .gform_wrapper .screen-reader-text { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .gfield input[type='text'], .gfield input[type='email'], .gfield input[type='tel'], .gfield input[type='number'], .gfield input[type='url'], .gfield textarea, .gfield select { padding: 13px 15px; width: 100%; font-family: var(--font-family-base), sans-serif; font-size: var(--font-size-base); color: var(--color-text); border: 1px solid var(--color-light); border-radius: var(--default-radius); background-color: var(--color-white); } .gfield textarea { min-height: 140px; } .gform_button { padding: 15px 20px 12px; display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; font-family: var(--font-family-base), sans-serif; font-size: var(--font-size-base); font-weight: var(--font-weight-regular); line-height: var(--heading-lineheight); color: var(--color-white); border: 1px solid var(--color-primary); border-radius: var(--default-radius); background-color: var(--color-primary); transition: var(--base-duration); cursor: pointer; } .gform_button:focus, .gform_button:hover { border-color: var(--color-green); background-color: var(--color-green); } /* GF zet een fieldset om het consent-veld. Browsers geven die standaard een * rand en insprong, en de legend neemt ruimte in. GF ruimde dat met eigen CSS * op; die staat uit. */ .gform_wrapper fieldset, .gform_wrapper fieldset.gfield { margin: 0; padding: 0; min-width: 0; border: 0; } .gform_wrapper fieldset > legend { padding: 0; } .gfield--type-consent { grid-column: 1 / -1; } .gfield--type-consent .gfield_label { display: none; } .gfield--type-consent .ginput_container_consent { padding-left: 30px; position: relative; display: block; } .gfield--type-consent input[type='checkbox'] { position: absolute; top: 2px; left: 0; margin: 0; } .gfield--type-consent label { display: inline; font-size: 14px; line-height: 1.25; } .gfield--type-consent a { text-decoration: underline; } /* Meldingen ingetogen houden: de samenvatting bovenaan is een h2 en zou * anders in de kopfont over twee regels staan. */ .gform_validation_errors { margin-bottom: 15px; padding: 10px 14px; border: 1px solid var(--color-error, #b3261e); border-radius: var(--default-radius); background-color: rgba(179, 38, 30, 0.08); } .gform_validation_errors h2 { margin: 0; font-family: var(--font-family-base), sans-serif; font-size: 14px; font-weight: var(--font-weight-regular); line-height: 1.35; color: var(--color-error, #b3261e); } /* Het foute veld wordt zelf de melding: rode rand in plaats van een regel * eronder, zodat de rij niet verspringt. De tekst blijft in de DOM voor * schermlezers. */ .gfield_validation_message { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .gfield_error input[type='text'], .gfield_error input[type='email'], .gfield_error input[type='tel'], .gfield_error input[type='number'], .gfield_error input[type='url'], .gfield_error textarea, .gfield_error select { border-color: var(--color-error, #b3261e); } .gfield_error input[type='checkbox'], .gfield_error input[type='radio'] { outline: 2px solid var(--color-error, #b3261e); outline-offset: 2px; } .gform_confirmation_message { font-weight: var(--font-weight-heavy); } /* Binnen het contactblok: twee kolommen, bericht en akkoord over de breedte */ .contact .gfield_label { display: none; } .contact .gfield--type-textarea, .contact .gfield--type-consent, .contact .gform_footer { grid-column: 1 / -1; } .contact .gform_footer { justify-self: end; } .contact .gform_button { width: auto; min-width: 266px; } /* Binnen het downloadblok: labels weg, alles wit */ .download .gfield_label { display: none; } .download .gfield--type-consent label, .download .gfield--type-consent a { color: var(--color-white); } .download .gfield--type-consent label { padding-left: 0; } .download .gform_validation_errors { background-color: rgba(255, 255, 255, 0.18); } .download .gform_validation_errors h2 { color: var(--color-white); } .download .gform_confirmation_message { color: var(--color-white); } /* ### guide ### */ .guide { position: relative; text-align: center; color: var(--color-white); background-color: var(--color-skyblue); overflow: hidden; } .guide h2 { margin-bottom: 19px; position: relative; z-index: 1; color: inherit; } .guide-slider { margin: 0 auto; padding: 0 15px; max-width: 1800px; } .guide .swiper { overflow: visible; } .guide i { margin-bottom: 20px; display: block; } .guide i img { margin: 0 auto; } .guide h3 { margin-bottom: 17px; font-size: 28px; color: inherit; } .guide p:last-of-type { margin-bottom: 0; } .guide-bg { position: absolute; top: 35px; left: 0; opacity: 0.4; width: 100%; height: 100%; pointer-events: none; } .guide-bg img { width: 100%; height: 100%; object-fit: cover; } /* ### blogs ### */ .blogs-text { margin: 0 auto 21px; max-width: 610px; text-align: center; } .blogs-text h2 { margin-bottom: 14px; } .blogs-text p:last-of-type { margin-bottom: 0; } .blogs-holder { display: grid; grid-template-columns: repeat(1, 1fr); gap: 15px; } .blogs-all { margin-top: 40px; text-align: center; } .blogs-all .button { min-width: 266px; } .blogs .swiper { overflow: visible; } .blogs .swiper-slide { height: auto; } .blogs .card-blog { height: 100%; } /* ### card-blog ### */ .card-blog { display: flex; flex-direction: column; width: 100%; text-decoration: none; color: var(--color-text); border-radius: var(--default-radius); overflow: hidden; } .card-blog-image { position: relative; aspect-ratio: 5 / 3; } .card-blog-image img { width: 100%; height: 100%; object-fit: cover; } .card-blog-image span { padding: 2px 10px 0 12px; position: absolute; top: 10px; right: 0; display: flex; align-items: center; justify-content: center; min-width: 36px; height: 24px; white-space: nowrap; font-family: var(--font-family-heading), sans-serif; font-size: 14px; font-weight: var(--font-weight-bold); line-height: var(--heading-lineheight); border-radius: var(--default-radius) 0 0 var(--default-radius); background-color: var(--color-white); } .card-blog-text { padding: 28px 30px 22px; display: flex; flex-direction: column; justify-content: space-between; flex: 1; font-size: 14px; line-height: 1.95; border: 1px solid var(--color-light); border-radius: 0 0 var(--default-radius) var(--default-radius); } .card-blog-text span { display: inline-block; text-decoration: underline; color: var(--color-primary); } .card-blog:focus .card-blog-text span, .card-blog:hover .card-blog-text span { text-decoration: none; } /* ### story ### */ .story-image { margin-bottom: 30px; border-radius: var(--default-radius); overflow: hidden; } .story-image img { width: 100%; } .story-text h2 { margin-bottom: 15px; } .story-text p { margin-bottom: 20px; } .story-text .button { width: 100%; } /* ### found ### */ .found-text { margin-bottom: 21px; } .found-text h2 { margin-bottom: 14px; } .found-text p:last-of-type { margin-bottom: 0; } .found-tags { margin-bottom: 25px; display: flex; flex-wrap: wrap; align-items: center; } .found-tags span { margin-right: 10px; margin-bottom: 10px; padding: 3px 10px; display: flex; align-items: center; justify-content: space-between; width: 120px; min-height: 32px; font-size: 14px; font-weight: var(--font-weight-regular); border-radius: var(--default-radius); background-color: var(--color-light); } .found-tags span i { font-size: 13px; font-style: normal; color: var(--color-gray-100); } .found-tags a { margin-bottom: 10px; display: inline-block; font-size: 14px; font-weight: var(--font-weight-regular); text-decoration: none; color: var(--color-near-black); transition: var(--base-duration); } .found-tags a:focus, .found-tags a:hover { color: var(--color-primary); } .found .card-found { margin-bottom: 20px; } .found-all { margin-top: 40px; text-align: center; } .found-all .button { min-width: 266px; } /* ### card-found ### */ .card-found { display: block; text-decoration: none; color: var(--color-text); border-radius: var(--default-radius); overflow: hidden; } .card-found-image img { width: 100%; } .card-found-row { padding: 25px; border: 1px solid var(--color-light); border-radius: 0 0 var(--default-radius) var(--default-radius); } .card-found-text { margin-bottom: 20px; } .card-found-text:last-of-type { margin-bottom: 0; } .card-found-text h3 { margin-bottom: 1px; } .card-found-text p { margin-bottom: 17px; font-size: 14px; line-height: 1.2; } .card-found-text i { margin-bottom: 15px; display: block; } .card-found-text li { margin-bottom: 8px; padding-left: 20px; position: relative; line-height: 1.25; } .card-found-text li:before { position: absolute; top: 3px; left: 0; font-family: var(--font-family-icon), sans-serif; font-size: 11px; color: var(--color-primary); content: '\e901'; } .card-found-text li:last-of-type { margin-bottom: 0; } .card-found-text h6 { margin-bottom: 0; font-family: var(--font-family-base), sans-serif; font-weight: var(--font-weight-heavy); text-align: center; color: inherit; } .card-found-days { margin-bottom: 15px; padding-bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; border-bottom: 1px solid var(--color-light); } .card-found-days span { margin-right: 8px; margin-bottom: 8px; padding: 6px 6px 3px; font-size: 12px; font-weight: var(--font-weight-heavy); line-height: var(--heading-lineheight); color: var(--color-brown); border-radius: var(--default-radius); background-color: rgba(242, 183, 4, 0.2); } .card-found-days strong { margin-bottom: 5px; font-size: 10px; font-weight: var(--font-weight-heavy); text-decoration: underline; color: var(--color-brown); } .card-found-text .button { width: 100%; } .card-found-price { margin-bottom: 10px; font-size: 14px; text-align: center; } .card-found-price strong { font-size: 16px; font-weight: var(--font-weight-heavy); } .card-found:focus .card-found-text .button, .card-found:hover .card-found-text .button { border: 1px solid var(--color-green); background-color: var(--color-green); } /* ### blokritme ### * 40px padding boven en onder elk blok, dus 80px tussen twee blokken. * Blokken met een eigen achtergrond houden hun padding en krijgen daarnaast * 40px marge, zodat de witruimte ernaast ook 80px is. * Per blok te overschrijven via het tabblad Instellingen. */ .story, .inform, .blogs, .stay, .action, .team, .contact, .social-media, .submitted, .seo, .tours, .download, .filter-blok, .heading, .usp, .found, .customer { padding-top: 40px; padding-bottom: 40px; } .heading { padding-top: 0; } .usp { padding-top: 10px; } .guide, .concept, .reviews { padding-top: 40px; padding-bottom: 40px; } .guide, .concept, .reviews, .information { margin-top: 40px; margin-bottom: 40px; } /* ### seo ### */ .seo h2 { margin-bottom: 14px; } .seo p { margin-bottom: 28px; } .seo-image { margin-bottom: 32px; border-radius: var(--default-radius); overflow: hidden; } .seo-image img { width: 100%; } /* ### inform ### */ .inform-text h2 { margin-bottom: 14px; } .inform-text p:last-of-type { margin-bottom: 0; } .inform-image { margin-bottom: 20px; } /* Vaste verhouding. wp_get_attachment_image() zet width en height als * attribuut op het element; de browser leidt daar een verhouding uit af die * van aspect-ratio wint. Vandaar height: auto erbij. */ .inform-image img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--default-radius); } /* ### stay ### */ .stay-holder { display: grid; grid-template-columns: repeat(1, 1fr); gap: 15px; } .stay-all { margin-top: 40px; text-align: center; } .stay-all .button { min-width: 266px; } /* ### customer ### */ .customer h2 { text-align: center; } .customer p { margin-bottom: 24px; } .customer-row { margin-bottom: 15px; } .customer-rating { margin: 0 auto 10px; padding: 4px 10px 2px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; max-width: 418px; font-size: 14px; font-weight: var(--font-weight-regular); text-align: center; border: 1px solid var(--color-light); border-radius: var(--default-radius); background-color: var(--color-white); } .customer-rating-star { margin-right: 10px; display: flex; align-items: center; justify-content: center; } .customer-rating-star img { margin-right: 10px; flex: 0 0 auto; width: 18px; height: 18px; } .customer-rating-star i { margin-right: 2px; display: block; font-size: 16px; color: var(--color-yellow-100); } .customer-rating-star i:last-of-type { margin-right: 0; } .customer-rating a { color: var(--color-text); } .customer-rating a:focus, .customer-rating a:hover { text-decoration: none; } .customer .card-customer { margin-bottom: 30px; } /* Reviews hebben geen eigen pagina; 'lees meer' vouwt de tekst open. */ .js-review-tekst.is-ingekort { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .js-review-meer { padding: 0; font-family: var(--font-family-base), sans-serif; font-size: var(--font-size-base); text-decoration: underline; color: var(--color-primary); border: 0; background: none; cursor: pointer; } .js-review-meer:focus, .js-review-meer:hover { text-decoration: none; } .customer-all { margin-top: 49px; text-align: center; } .customer-all .button { min-width: 266px; } .customer.is-alt h2 { margin-bottom: 15px; font-size: 36px; text-align: start; } /* ### card-customer ### */ .card-customer-image { margin-bottom: 20px; flex: 0 0 auto; width: 180px; height: 180px; border-radius: 50%; overflow: hidden; } .card-customer-image img { width: 100%; } .card-customer-text h3 { margin-bottom: 15px; line-height: 1.22; } .card-customer-text p { margin-bottom: 15px; } .card-customer-text p a:focus, .card-customer-text p a:hover { text-decoration: none; } .card-customer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } .card-customer-row strong { display: block; font-weight: var(--font-weight-heavy); } .card-customer-star { display: flex; } .card-customer-star i { margin-right: 4px; display: block; color: var(--color-yellow-100); } /* ### action ### */ .action-holder { padding: 25px; border: 1px solid var(--color-light); border-radius: var(--default-radius); } .action .button { min-width: 180px; } .action h3 { font-size: 28px; } .action-row { margin-top: 30px; margin-bottom: 18px; } .action-column { margin-bottom: 16px; } .action-column img { width: 100%; height: auto; border-radius: var(--default-radius); } .action.inner .action-holder { padding: 0; border: 0; } .action.inner p { margin-bottom: 21px; } .action.inner p:last-of-type { margin-bottom: 0; } /* ### social-media ### */ .social-media { text-align: center; } .social-media h3 { margin-bottom: 10px; font-size: 28px; } .social-media-holder { padding-top: 12px; padding-bottom: 12px; border-top: 1px solid var(--color-light); border-bottom: 1px solid var(--color-light); } .social-media ul { display: flex; align-items: center; justify-content: center; line-height: var(--heading-lineheight); } .social-media li:after { margin: 0 12px; display: inline-block; width: 1px; height: 20px; background-color: var(--color-text); content: ''; } .social-media li:last-of-type:after { display: none; } .social-media li a { display: inline-block; font-size: 24px; text-decoration: none; color: var(--color-text); transition: var(--base-duration); } .social-media li a:focus, .social-media li a:hover { color: var(--color-primary); } /* YouTube is een inline SVG en geen icoonfont; meeschalen en meekleuren. */ .social-media li a svg { display: block; width: 1em; height: 1em; fill: currentColor; } /* ### team ### */ .team-text { margin-bottom: 21px; } .team-text h2 { margin-bottom: 14px; } .team-text p:last-of-type { margin-bottom: 0; } .team .swiper { overflow: visible; } /* ### card-team ### */ .card-team { display: block; width: 100%; text-decoration: none; color: var(--color-text); border-radius: var(--default-radius); overflow: hidden; } .card-team-image img { width: 100%; } .card-team-text { padding: 25px 30px 27px; border: 1px solid var(--color-light); border-radius: 0 0 var(--default-radius) var(--default-radius); } .card-team-text h3 { margin-bottom: 2px; } .card-team-text span { margin-bottom: 19px; display: block; font-size: 14px; line-height: var(--heading-lineheight); } .card-team-text p:last-of-type { margin-bottom: 0; } /* ### contact ### */ .contact-left { margin-bottom: 40px; } .contact-left h2 { margin-bottom: 13px; } .contact-left p { margin-bottom: 24px; } .contact-left span { margin-bottom: 14px; padding-left: 30px; position: relative; display: block; } .contact-left span a { color: var(--color-text); transition: var(--base-duration); } .contact-left span a:focus, .contact-left span a:hover { color: var(--color-primary); } .contact-left address { padding-left: 30px; position: relative; font-style: normal; } .contact-left address i, .contact-left span i { position: absolute; top: 50%; left: 0; font-size: 24px; transform: translateY(-50%); } .contact-left span i.icon-mail { font-size: 20px; } .contact-field { margin-bottom: 16px; } .contact-textarea { margin-bottom: 7px; } .contact-check { margin-bottom: 16px; } .contact-check label { padding-left: 30px; position: relative; display: inline-flex; font-size: 14px; font-weight: var(--font-weight-regular); line-height: 1.25; } .contact-check label input[type='checkbox'] { position: absolute; top: -2px; left: 0; } .contact-check label a { color: var(--color-text); } .contact-check label a:focus, .contact-check label a:hover { text-decoration: none; color: var(--color-text); } .contact-submit { text-align: right; } .contact-submit .button { min-width: 192px; } /* ### submitted ### */ .submitted { text-align: center; } .submitted h2 { margin-bottom: 14px; color: var(--color-text); } .submitted p { margin-bottom: 5px; } .submitted-holder { padding: 25px; border: 1px solid var(--color-secondary); border-radius: var(--default-radius); } /* ### claim ### */ .claim-info { margin-bottom: 7px; padding-top: 10px; padding-bottom: 8px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; text-align: center; border-top: solid 1px var(--color-leah); border-bottom: solid 1px var(--color-leah); background-color: var(--color-beige); } .claim-info i { margin-right: 12px; margin-bottom: 3px; font-size: 18px; color: var(--color-primary); } .claim-info p { margin-bottom: 0; } .claim-info p strong { font-weight: var(--font-weight-heavy); } .claim-info a { margin-left: 20px; font-weight: var(--font-weight-heavy); color: var(--color-primary); } .claim-info a:focus, .claim-info a:hover { text-decoration: none; } .claim-info.hide-phone { display: none; } /* ### breadcrumbs ### */ .breadcrumbs { margin-bottom: 16px; } .breadcrumbs ul { display: flex; flex-wrap: wrap; } .breadcrumbs li { position: relative; font-size: 12px; color: var(--color-text); } .breadcrumbs li a { text-decoration: none; color: var(--color-text); transition: var(--base-duration); } .breadcrumbs li:not(:last-child):after { margin: 0 10px; display: inline-block; width: 1px; height: 10px; vertical-align: middle; background-color: var(--color-text); content: ''; } .breadcrumbs li a:focus, .breadcrumbs li a:hover { color: var(--color-primary); } /* Rank Math levert