@charset "utf-8"; /*** The new CSS reset - version 1.8.5 (last updated 14.6.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" attribute is exclud, because otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } strong { font-weight: 700; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } img { max-width: 100%; height: auto; vertical-align: middle; font-style: italic; background-repeat: no-repeat; background-size: cover; shape-margin: 0.75rem; content-visibility: auto; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { user-select: auto; -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element */ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; line-break: normal; user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } @font-face { font-family: "TheMix"; src: url("../fonts/TheMix_LP_700_.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "TheMix"; src: url("../fonts/TheMix_LP_700_.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "TheSans"; src: url("../fonts/TheSans_LP_500_Plain.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "TheSans"; src: url("../fonts/TheSans_LP_600_SemiBold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "TheSans"; src: url("../fonts/TheSans_LP_700_Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; } :root { --font-body: 'TheSans', system-ui, sans-serif; --font-header: 'TheMix', Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif; } h1 { font-size: 1.5rem; font-weight: 700; } h2 { font-size: 1.2rem; font-weight: 700; } :is(h1, h2, h3, h4, h5) { font-family: var(--font-header); } @media only screen and (min-width: 768px) { h1 { font-size: 3rem; } } :root { /* colors */ --white: #ffffff; --black: #000000; --grey5: #262626; --grey4: #4b4b4b; --grey3: #7a7a7a; --grey2: #d2d2d2; --grey1: #f1f1f1; --greywarm: #f8f7f5; --green5: #023011; --green4: #216a36; --green3: #2a8544; --green2: #80b47e; --green1: #d5e7d5; --blue5: #d5e7d5; --blue4: #0f4c7f; --blue3: #1962a1; --blue2: #ADCDED; --blue1: #dbebf9; --ocher5: #7D6200; --ocher4: #cb9f23; --ocher3: #f7d542; --ocher2: #feea8b; --ocher1: #fff6d3; --orange5: #8b360d; --orange4: #df561b; --orange3: #ef8723; --orange2: #fdb766; --orange1: #fedab0; --red5: #530303; --red4: #a10a0d; --red3: #cd1f19; --red2: #eb8982; --red1: #fed7d5; /* filter */ /*https://codepen.io/sosuke/pen/Pjoqqp */ --filtergrey3: invert(52%) sepia(0%) saturate(1703%) hue-rotate(146deg) brightness(91%) contrast(85%); --filtergrey4: invert(24%) sepia(2%) saturate(9%) hue-rotate(108deg) brightness(101%) contrast(91%); --filterblue3: invert(26%) sepia(95%) saturate(894%) hue-rotate(180deg) brightness(95%) contrast(90%); --filterblue4: invert(10%) sepia(84%) saturate(3663%) hue-rotate(195deg) brightness(113%) contrast(88%); --filterocher3: invert(92%) sepia(38%) saturate(2948%) hue-rotate(323deg) brightness(105%) contrast(94%); --filtergreen3: invert(44%) sepia(14%) saturate(1795%) hue-rotate(84deg) brightness(93%) contrast(98%); --filtergreen4: invert(32%) sepia(35%) saturate(773%) hue-rotate(85deg) brightness(98%) contrast(95%); } ::selection { color: var(--grey5); background-color: var(--blue2); } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } :is(h1,h2,h3,h4,h5,h6) { text-wrap: balance; } p { margin-bottom: 1rem; text-wrap: pretty; } :is(p, ul, ol, input, a) { font-size: 1.125rem; line-height: 1.5; font-family: var(--font-body); } label { font-size: 1.125rem; font-family: var(--font-body); } form label { font-weight: bold; } :focus-visible { outline: dashed var(--ocher5) 2px; outline-offset: 5px; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; } table { border-collapse: collapse; border-spacing: 0; } header { display: grid; grid-template-columns: 16px repeat(10, minmax(10px, 1fr)) 16px; height: 120px; align-items: center; background-color: var(--white); position: relative; z-index: 99999999; } .zoeken-inloggen ul li { margin-left: 1rem; } .zoeken-inloggen ul li a { display: block; } .zoeken-inloggen ul li a img { height: 1.5rem; width: 1.5rem; } ul li a:visited { color: inherit; text-decoration: inherit; } header div { display: grid; flex-direction: row; align-items: center; } header div ul { display: flex; flex-direction: row; align-items: center; } .logo { grid-column: 1 / 7; height: 48px; position: relative; top: 3px; width: max-content; margin-right: 1rem; } header .container .menu-list { order: 3; justify-self: flex-end; } header .container .zoeken-inloggen { order: 2; justify-self: flex-end; } .menu-list { grid-column-end: 12; justify-self: end; display: flex; justify-content: flex-start; flex-direction: column; align-items: flex-end; } .menu-list label { display: grid; width: 80px; color: var(--white); cursor: pointer; background-color: var(--green3); padding: 10px 16px; place-self: center; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; } .menu-list label:hover { background-color: var(--green4); } .menu-list ul { color: var(--black); } .zoeken-inloggen { grid-column: 7 / 11; grid-row: 1; justify-self: end; margin-right: 1rem; } .zoeken-inloggen ul li:first-of-type a:first-of-type { display: none; } .zoeken-inloggen ul li:nth-of-type(2) a:first-of-type { display: none; } .zoeken-inloggen ul li:nth-of-type(2) a:first-of-type form button:hover { cursor: pointer; } .remember-me > * { all: revert; height: 1rem; width: 1rem; } .header-background { background-color: var(--white); position: absolute; height: 120px; width: 100vw; top: 0; left: 0; z-index: -1; } .header-background-menu { background-color: var(--white); position: fixed; width: 100vw; left: 0; top: 0; bottom: 0; z-index: -3; } .menu-dropdown { color: var(--grey5); display: flex; flex-direction: column; position: absolute; background-color: var(--white); right: 0px; top: -500px; width: 100%; padding-top: 200px; z-index: -2; align-items: start; padding-left: 8.3%; padding-right: 8.3%; transition: top 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1); -webkit-transition: top 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1); -moz-transition: top 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1); -ms-transition: top 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1); -o-transition: top 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1); visibility: hidden; } .container .intro-text p { margin-bottom: 0; font-size: 1.5rem; line-height: 130%; max-width: 50ch; color: var(--grey4); } .menu-dropdown ul { display: flex; flex-direction: column; align-items: center; width: 100%; } .menu-dropdown ul li:last-child { margin-bottom: 2rem; } .menu-dropdown a { width: 100%; justify-content: center; margin-bottom: 2.5rem; } .menu-dropdown p { font-size: 1.25rem; line-height: 130%; margin-bottom: 1rem; } .menu-list .menu-dropdown p:last-of-type { font-size: 0.673rem; } .menu-dropdown .input-field{ margin-bottom: 1rem; } .menu-dropdown .input-field { width: 100%; } .menu-dropdown a img { filter: invert(100%); -webkit-filter: invert(100%); margin-right: 1rem; position: unset; } .header-checker-close { opacity: 0; position: fixed; width: 100vw; height: 100%; left: 0; top: 0; z-index: -2; visibility: hidden; } .content > * { max-width: 75ch; width: 100%; } .toggle-checkbox:checked + label + .menu-dropdown { top: -80px; visibility: visible; } .toggle-checkbox:checked + .header-checker + .menu-dropdown + .header-checker-close { visibility: visible; } .menu-list .toggle-checkbox + label::before { content: "Menu"; place-self: center; } .menu-list .toggle-checkbox:checked + label::before { content: "Sluit"; color: var(--green3); place-self: center; } .menu-list .toggle-checkbox:checked + label { background-image: unset; background-color: var(--white); border: solid var(--green3) 1px; } .grey-line { position: absolute; left: 0; background-color: var(--grey2); height: 1px; width: 100vw; } .menu-dropdown li { display: flex; width: 100%; border-bottom: solid var(--grey2) 1px; } .menu-dropdown li a { color: var(--grey-5); font-size: 1.25rem; font-weight: 700; line-height: 130%; width: 100%; padding: 1rem; margin-bottom: 0; } .menu-dropdown li:hover { background-color: var(--greywarm); font-weight: 700; } .menu-dropdown li.active { color: var(--green3); font-weight: 700; } .arrow-link { background: url(../icon/arrows/arrow-right.svg) left 0px center no-repeat; background-size: 8px; padding-left: 1rem; transition: background 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-transition: background 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -moz-transition: background 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -ms-transition: background 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -o-transition: background 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .arrow-link:hover { background: url(../icon/arrows/arrow-right.svg) left 2px center no-repeat; background-size: 8px; } .breadcrumbs { background-color: var(--greywarm); min-height: 50px; padding: 0.5rem 0; height: min-content; grid-column: 1 / -1; display: grid; grid-template-columns: 16px repeat(10, minmax(10px, 1fr)) 16px; align-items: center; line-height: 150%; white-space: nowrap; margin-bottom: 3.5rem; } .active { color: var(--grey4); } .breadcrumbs ul { display: flex; flex-wrap: wrap; grid-column: 2 / 11; color: var(--blue3); font-size: 1rem; } .breadcrumbs a { font-size: 1rem; } .breadcrumbs ul li { margin-right: 0.2rem; } .breadcrumbs ul li:first-of-type { color: var(--blue3); } .breadcrumbs ul li:hover { color: var(--blue4); text-decoration: underline; } .breadcrumbs ul li:last-of-type:hover { color: var(--grey4); text-decoration: unset; } .breadcrumbs ul li::before { content: ""; background: url(../icon/arrows/chevron-right.svg) no-repeat center; background-size: contain; display: inline-flex; width: 1rem; height: 1rem; margin-right: 0.2rem; text-align: center; /* Center horizontally */ vertical-align: middle; /* Center vertically */ } .breadcrumbs ul li:first-of-type::before { display: none; } main { display: grid; grid-template-columns: 16px repeat(10, minmax(10px, 1fr)) 16px; grid-auto-rows: max-content; grid-auto-flow: row; min-height: 100svh; } .background-image { width: 100vw; height: 520px; object-fit: cover; grid-column: 1 / -1; grid-row: 1 / 6; z-index: -9999999; } .text-block { background: url(../facetten-fill/groen.svg) no-repeat; background-size: 100%; -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0); clip-path: polygon(0 0, 0 100%, 100% calc(100% - 12px), 100% 100%, 100% 0); min-height: 300px; height: fit-content; } .text-container { display: flex; padding: 2rem 2rem 3rem 2rem; flex-direction: column; justify-content: space-between; min-height: 300px; } .greenbox { grid-row: 4/ 7; } .homepage-title { margin-top: 3.5rem; } .text-container a { font-family: var(--font-body); color: var(--white); font-size: 1.2rem; margin-bottom: 1.5rem; } .text-container a:first-child { font-size: 2rem; font-weight: 700; margin-bottom: 0; } .search-container { width: 100%; height: 50px; color: var(--grey-3); background-color: var(--white); border: 1px var(--grey3) solid; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; } .search-container:hover { background-color: var(--greywarm); } .search-container form { height: 100%; display: flex; justify-content: space-between; align-items: center; } .search-container form input { border: none; background: none; width: 100%; height: 100%; margin: 1rem; font-size: 1.125rem; } .search-container form input:focus { outline: none; border: none; } .search-container form:focus-within { outline: dashed var(--ocher5) 2px; outline-offset: 1px; border-radius: 3px; } .search-container form button:focus-visible { outline: unset; background-color: var(--ocher4); } .search-container form button:focus-visible .invert { filter: none; -webkit-filter: none; } .search-container form button { border: none; border-radius: 3px; margin: 3px; height: 44px; min-width: 44px; position: relative; right: 0; background-color: var(--ocher3); -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; display: flex; align-items: center; justify-content: center; } .invert { height: 50%; filter: invert(100%); -webkit-filter: invert(100%); } .search-container form button:hover { background-color: var(--ocher4); } .search-container form button:hover .invert { filter: none; -webkit-filter: none; } .container { grid-column: 2 / 12; } .container h1 { margin-bottom: 2rem; } .container h2 { font-weight: unset; font-size: 1.5rem ; margin: 1rem 0; } .delen { color: var(--grey4); outline: var(--grey2) 1px solid; width: fit-content; height: fit-content; font-size: 1.2rem; padding: 0.5rem 0.8rem 0.5rem 0.8rem; margin-top: 0.8rem; margin-bottom: 2rem; display: flex; align-items: center; justify-content: space-between; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; } .nieuws { margin: 4rem 0; } .delen :first-child { margin-right: 0.8rem; filter: var(--filtergrey4); -webkit-filter: var(--filtergrey4); } .container p { max-width: 70ch; } .box-container { grid-column: 2 / 12; padding: 4rem 0; } .map-container-title { grid-column: 2 / 12; margin: 4rem 0 2rem 0; font-weight: 700; font-size: 1.5rem; } .map-container { grid-column: 2 / 12; grid-row: 4 / 9; display: flex; flex-direction: column; align-items: center; margin-bottom: 5rem; } .map-size{ height: 500px; width: 100%; } .map-detail { grid-row: unset; } .map-detail .map { height: 100%; width: 100%; } .map-button-container { width: 100%; } .map #detailmap { width: 100%; height: 100%; } .map-toggle-button { grid-column: 2 / 12; grid-row: 9; position: relative; margin-top: 1rem; display: flex; justify-content: flex-end; font-family: var(--font-body); } .map-detail { display: flex; flex-direction: column; align-items: center; } .map-marker, .map-marker-blue { filter: var(--filterblue3); -webkit-filter: var(--filterblue3); } .map-marker, .map-marker-green { filter: var(--filtergreen3); -webkit-filter: var(--filtergreen3); } .map-marker-detail { filter: var(--filterblue3); -webkit-filter: var(--filterblue3); } .map-marker:hover, .map-marker-blue:hover { filter: var(--filterblue4); -webkit-filter: var(--filterblue4); } .monument-detail { display: flex; flex-direction: column; background-color: var(--white); width: 80%; gap: 1rem; border-bottom: solid var(--grey2) 1px; margin-top: -4.5rem; margin-block-end: 8rem; padding: 2rem; z-index: 9998; } .stadsgezichten-detail{ margin-block-end: 5rem; } .monument-text { display: flex; flex-direction: column; color: var(--grey5); width: 100%; line-height: 150%; } .stadsgezichten-download { display: flex; color: var(--green3); text-decoration: underline; } .stadsgezichten-foto { margin-block-start: 2rem; grid-column: 1 / -1; } .stadsgezichten-download ul { width: max-content; } .stadsgezichten-download li:hover { color: var(--green4); } .stadsgezichten-download li::before { content: ""; background-image: url(../icon/arrows/chevron-right.svg); filter: var(--filtergreen3); background-repeat: no-repeat; background-size: contain; display: inline-flex; width: 1rem; height: 1rem; position: relative; left: 0px; margin-right: 0.2rem; transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -moz-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -ms-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -o-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-filter: var(--filtergreen3); } .image-size { max-height: 500px; width: 100%; overflow: clip; } .image-size img { width: 100%; } .stadsgezichten-download li:hover::before { left: 2px; filter: var(--filtergreen4); -webkit-filter: var(--filtergreen4); } .stadsgezichten-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-block-end: 8rem; } .andere-container p { margin-bottom: 0; } .andere-container h2 { margin-top: 0; } .andere-container ul { color: var(--green3); } .andere-container li::before { content: ""; background-image: url(../icon/arrows/chevron-right.svg); filter: var(--filtergreen3); background-repeat: no-repeat; background-size: contain; display: inline-flex; width: 1rem; height: 1rem; position: relative; left: 0px; margin-right: 0.2rem; transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -moz-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -ms-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -o-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-filter: var(--filtergreen3); } .andere-container li:hover { color: var(--green4); } .andere-container li:hover::before { left: 2px; filter: var(--filtergreen4); -webkit-filter: var(--filtergreen4); } .content-container { grid-column: 1 / -1; } .andere-container { grid-column: 1 / -1; } .monument-text p { margin-bottom: 0; } .monument-text ul li { flex-wrap: wrap; display: flex; flex-direction: column; width: auto; justify-content: space-between; } .monument-image { overflow: hidden; position: relative; max-width: 100%; width: 100%; height: auto; aspect-ratio: 3/2; } .monument-text h2 { font-size: 1.3rem; margin: 0 0 1rem 0 } .monument-text ul p:first-of-type { color: var(--green3); } .box-head { margin-bottom: 1rem; display: flex; flex-direction: column; justify-content: space-between; height: fit-content; color: var(--blue3); } .box-head h2 { margin: 0; color: var(--grey4); margin-bottom: 1rem; font-size: 2rem; } .box-head a { white-space: nowrap; color: var(--blue3); background: url(../icon/arrows/arrow-right.svg) left 0px center no-repeat; font-size: 1.2rem; padding-left: 24px; transition: background 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-transition: background 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -moz-transition: background 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -ms-transition: background 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -o-transition: background 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .box-head a:hover { background: url(../icon/arrows/arrow-right.svg) left 2px center no-repeat; color: var(--blue4); text-decoration: underline; } .box-frame { display: flex; flex-direction: column; gap: 1rem; } .box { display: flex; flex: 0 1 min(100%, 30%); border: var(--grey2) solid 1px; flex-direction: column; padding: 1rem; width: 100%; color: var(--grey4); line-height: 1.5; } .monument-box-title { margin-block-start: 1.75rem; } .box h4 { font-size: 1.25rem; } .box .tile-title-monument { margin-top: 1.75rem; } .box a, .box p { width: auto; font-family: var(--font-body); font-size: 1.125rem; color: var(--grey4); } .box div { height: 5em; } .box .text-green { font-size: 1rem; line-height: 130%; margin: 1.75rem 0 0.5rem 0.75rem; color: var(--green4); text-transform: capitalize; } .box .box-image { overflow: hidden; position: relative; max-width: 100%; width: 100%; height: auto; aspect-ratio: 3/2; } .box .arrow { cursor: pointer; display: block; height: 24px; width: 24px; align-self: flex-end; margin-top: auto; margin-right: 0px; transition: margin-right 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-transition: margin-right 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -moz-transition: margin-right 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -ms-transition: margin-right 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -o-transition: margin-right 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); filter: var(--filterblue3); -webkit-filter: var(--filterblue3); } .box:hover .arrow { margin-right: -2px; filter: var(--filterblue4); -webkit-filter: var(--filterblue4); } .tabs { display: flex; flex-direction: row; width: 100%; font-family: var(--font-body); font-size: 1.125rem; } .tabs button { border-bottom: solid var(--grey2) 2px; padding: 1rem; white-space: nowrap; } .tabs span { width: 100%; border-bottom: solid var(--grey2) 2px; } .tabs button:hover { border-bottom: solid var(--grey3) 2px; color: var(--grey3); } .tabs button.active { color: var(--green3); border-bottom: solid var(--green3) 2px; font-weight: 700; } .tabcontent { display: none; margin-top: 2rem; flex-direction: column; gap: 1rem; color: var(--grey-4, #4B4B4B); font-family: var(--font-body); font-size: 1.125rem; line-height: 130%; } .tabcontent a { color: var(--blue3); } .tabcontent a:hover { color: var(--blue4); text-decoration: underline; } #registerblad { width: 100%; display: flex; } .disabled { display: none; } /* https://www.educative.io/answers/how-to-create-tabs-in-html */ #registerblad > div:first-of-type { margin-bottom: 5rem; } .foto_container { columns: 1; column-gap: 1; } .foto_container img { object-fit: cover; margin-bottom: 0.8rem; } .download-box { border: solid var(--grey3) 1px; margin-bottom: 1rem; color: var(--grey4); display: flex; flex-direction: row; align-items: center; gap: 1rem; width: 100%; min-height: 60px; height: max-content; } .download-box p:first-of-type { white-space: nowrap; overflow:hidden; text-overflow: ellipsis; margin-bottom: 0; color: var(--grey4); } .tabcontent .download-box:hover { text-decoration: none; } .download-box .download-img { overflow: hidden; position: relative; max-width: 100%; width: 20%; height: auto; aspect-ratio: 1/1; } .download-box .download-img img { filter: unset; -webkit-filter: unset; } .tabcontent .download-box div { background-color: var(--grey1); display: flex; align-items: center; justify-content: center; min-height: 3.5rem; min-width: 3.5rem; } .download-box div img { filter: var(--filtergrey4); -webkit-filter: var(--filtergrey4); } .download-box p:last-of-type { color: var(--black); background: url(../icon/functional/download.svg) left 0px center no-repeat; background-size: 1.2rem; font-size: 1.2rem; filter: var(--filterblue3); -webkit-filter: var(--filterblue3); padding-left: 1.5rem; cursor: pointer; margin-right: 1rem; margin-left: auto; margin-bottom: 0; } .download-box:hover p:last-of-type { filter: var(--filterblue4); text-decoration: underline; -webkit-filter: var(--filterblue4); } .faq { width: 100%; margin-top: 0; margin-bottom: 5rem; } .faq h2 { margin: 3rem 0 1rem 0; } .dropdown-button { display: block; width: 100%; background: url(../icon/arrows/chevron-down.svg) right 1rem center no-repeat; color: var(--black); font-family: TheSans; line-height: 150%; filter: var(--filtergrey4); -webkit-filter: var(--filtergrey4); font-size: 1.2rem; cursor: pointer; border: solid var(--grey4) 1px; border-bottom: none; padding: 1rem; padding-right: 3rem; user-select: none; } .faq div details:first-of-type .dropdown-button { border-radius: 3px 3px 0 0; -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; -ms-border-radius: 3px 3px 0 0; -o-border-radius: 3px 3px 0 0; } .faq div details:first-of-type[open] .dropdown-button { border-radius: 3px 3px 0 0; -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; -ms-border-radius: 3px 3px 0 0; -o-border-radius: 3px 3px 0 0; } .faq div details:last-of-type .dropdown-button { border-radius: 0 0 3px 3px; -webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; -ms-border-radius: 0 0 3px 3px; -o-border-radius: 0 0 3px 3px; border-bottom: solid var(--grey4) 1px; } .faq div details:only-child .dropdown-button { border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; } .faq div details[open] .dropdown-button { background: url(../icon/arrows/chevron-up.svg) right 1rem center no-repeat; border-bottom: none; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; } .dropdown { background-color: var(--white); flex-direction: column; border: solid var(--grey3) 1px; border-top: solid var(--grey2) 1px; border-radius: 0 0 3px 3px; -webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; -ms-border-radius: 0 0 3px 3px; -o-border-radius: 0 0 3px 3px; } .dropdown li { padding: 1rem; font-size: 1.2rem; } .footer-container .dropdown-button { font-weight: 700; font-family: var(--font-body); filter: var(--filterocher3); -webkit-filter: var(--filterocher3); border: unset; padding: 1rem 0; } .footer-container details[open] .dropdown-button { background: url(../icon/arrows/chevron-up.svg) right 1rem center no-repeat; } .footer-container .dropdown { background-color: unset; border: unset; margin-bottom: unset; } .footer-container .dropdown li { padding: unset; } .stadsgezicht { display: flex; justify-content: space-between; flex-direction: column; margin-bottom: 10rem; white-space: nowrap; } .stadsgezicht div h3 { margin: 0rem 0 2rem 0; border-bottom: solid var(--grey2) 1px; padding-bottom: 1rem; } .stadsgezicht div:last-of-type h3 { margin: 2rem 0; } .stadsgezicht ul { color: var(--blue3); list-style-type: disc; line-height: 2; margin-left: 1rem; transition: color ease-in-out 0.3s; -webkit-transition: color ease-in-out 0.3s; -moz-transition: color ease-in-out 0.3s; -ms-transition: color ease-in-out 0.3s; -o-transition: color ease-in-out 0.3s; } .stadsgezicht ul li:hover { color: var(--blue4); text-decoration: underline; } footer { display: grid; grid-template-columns: repeat(12, 1fr); } .footer-container { grid-column: 1 / -1; padding: 40px 16px; display: flex; flex-direction: column; justify-content: space-between; color: var(--white); line-height: 150%; } .footer-container div ul{ color: var(--white); } .footer-container div ul li::before { content: ""; background-image: url(../icon/arrows/arrow-right.svg); background-repeat: no-repeat; filter: invert(100%); background-size: contain; display: inline-flex; width: 1rem; height: 1rem; position: relative; left: 0px; margin-right: 0.2rem; -webkit-filter: invert(100%); transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -moz-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -ms-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -o-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .footer-container div ul li:hover:before { left: 2px; } .footer-container div { display: flex; flex-direction: column; } /* .footer-container .container div { margin-bottom: 2rem; } */ .footer-bottom div:nth-child(2) { order: 3; } .footer-container .container .section .social-media { flex-direction: row; justify-content: space-between; max-width: min-content; gap: 15px; margin-bottom: 0; } .footer-container .container .section .button { margin-block-end: 1rem; } .footer-container .social-media div a { height: 2rem; width: 2rem; background-color: white; } .footer-container .social-media div:nth-child(1) a { mask: url(../icon/social/facebook.svg) center no-repeat; -webkit-mask: url(../icon/social/facebook.svg) center no-repeat; } .footer-container .social-media div:nth-child(2) a { mask: url(../icon/social/twitter.svg) center no-repeat; -webkit-mask: url(../icon/social/twitter.svg) center no-repeat; } .footer-container .social-media div:nth-child(3) a { mask: url(../icon/social/linkedin.svg) center no-repeat; -webkit-mask: url(../icon/social/linkedin.svg) center no-repeat; } .footer-container .social-media div:nth-child(4) a { mask: url(../icon/social/instagram.svg) center no-repeat; -webkit-mask: url(../icon/social/instagram.svg) center no-repeat; } .footer-container .social-media div:nth-child(5) a { mask: url(../icon/social/youtube.svg) center no-repeat; -webkit-mask: url(../icon/social/youtube.svg) center no-repeat; } .social-media div a:hover { background-color: var(--grey3); } .social-media div:focus-within { outline: dashed var(--ocher3) 2px; } .social-media p { height: min-content; } .social-media p img { height: 2rem; } .social-media a:hover img { filter: var(--filtergrey4); -webkit-filter: var(--filtergrey4); } .footer-container div > p:first-of-type{ font-size: 1.2rem; color: var(--ocher3); font-weight: 700; margin-block-end: .5rem; } .toggle-checkbox:checked + label + .dropdown { max-height: 100%; opacity: 1; visibility: visible; overflow: auto; } .toggle-checkbox:checked + label { background: url(../icon/arrows/chevron-up.svg) right center no-repeat; } .dropdown li:hover { filter: var(--filtergrey4); -webkit-filter: var(--filtergrey4); } .content { line-height: 130%; margin: 64px 0; } .content-container .content-stadsgezichten { margin: 0; } .content ol { list-style: decimal; padding-left: 2em; } .content ul { list-style-type: disc; padding-left: 2em; } .content blockquote::before, .content blockquote::after { content: '"'; } .content .video-container { position: relative; max-width: 100%; width: 100%; height: auto; aspect-ratio: 16/9; } .content .video-container iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: 0; } .content a:not(.button) { color: var(--blue3); } .content a:is(:hover, :focus) { color: var(--blue4); text-decoration: underline; } .button-content a { color: var(--white); } .container .button-content a:hover { color: var(--white); text-decoration: none; } .page-image { min-width: 100%; height: max-content; } .page-image img { width: 100%; height: auto; object-fit: cover; } .image-left { margin: 16px 0; } .image-right { margin: 16px 0; } .content .image-wide { max-width: unset; width: 100%; max-height: 377.468px; overflow: hidden; margin: 32px 0; float: none; } .footer-container div p:nth-child(2) { margin-bottom: 1rem; } .footer-container li { font-size: 1.1rem; margin-bottom: 1rem; } .footer-container li:hover { filter: var(--filtergrey4); -webkit-filter: var(--filtergrey4); } .footer-top { grid-row-start: 1; background-color: var(--grey5); max-width: 100%; margin-block-start: 2rem; } .footer-bottom { grid-row-start: 2; background-color: var(--grey4); padding: 40px 16px 0px 16px; } .footer-bottom .nieuwsbrief{ max-width: unset; width: unset; } .footer-footer Li:hover { color: var(--grey1); } .button { color: var(--white); display: flex; align-items: center; padding: 0 0.625rem; min-height: 44px; border-radius: 3px; width: fit-content; font-family: var(--font-body); font-size: 1.125rem; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; } .button:hover { cursor: pointer; } .button img { position: relative; left: 0px; transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -moz-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -ms-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -o-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .button:hover img { left: 2px; } .arrow-right { position: relative; right: 0px; transition: right 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-transition: right 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -moz-transition: right 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -ms-transition: right 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -o-transition: right 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } button:hover .arrow-right { right: -2px; } .green { background-color: var(--green3); transition: right 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .green:hover { background-color: var(--green4); } .footer-footer { grid-row-start: 3; background-color: var(--grey4); padding-bottom: 1rem; justify-content: flex-start; align-content: space-between; } .footer-footer .container ul{ display: flex; flex-wrap: wrap; flex-direction: column; height: 16rem; } .footer-footer li { margin-right: 0; margin-bottom: 2rem; white-space: nowrap; } .zoeken-filteren { display: flex; flex-direction: column; width: 100%; } .yellow-stripe { height: 10px; display: flex; } .yellow-stripe img { object-fit: cover; width: 100%; height: 100%; } .filter-container { border: solid var(--grey2) 1px; color: var(--grey4); padding: 2rem; } .filter-container h3 { font-size: 1.2rem; font-weight: 700; margin: 0; margin-top: 1rem; color: var(--grey5); } .filter-container button,.filter-container .input-field label, .filter-container label { margin: 2rem 0 0.8rem 0; display: inline-flex; place-items: center; } .filter-container .button { color: var(--white); } .inloggen-container .button { margin: 1.2rem 0 4rem 0; } .filter-container .button img { filter: invert(100%); -webkit-filter: invert(100%); margin-left: 1rem; } .inloggen-container { grid-column: 2 / 12; max-width: 1024px; width: 100%; place-self: center; } .link { color: var(--blue3); } .link:hover { color: var(--blue4); text-decoration: underline; text-decoration-skip-ink: none; } .grey { background-color: var(--grey1); height: 7px; width: 80%; place-self: center; } .map { height: 700px; flex-direction: column; align-items: flex-end; transition: width 2s; } .stadsgezicht #detailmap { width: 100%; } .stadsgezicht > div + div { width: 100%; } .toggle-button { background: url(../icon/arrows/arrow-right.svg) left 0px center no-repeat; filter: var(--filterblue3); font-size: 1.2rem; padding-left: 24px; cursor: pointer; -webkit-filter: var(--filterblue3); transition: background 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -webkit-transition: background 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -moz-transition: background 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -ms-transition: background 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -o-transition: background 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .toggle-button:hover { background: url(../icon/arrows/arrow-right.svg) left 2px center no-repeat;; } .input-field { position: relative; display: inline-block; width: 100%; } .input-field .custom-input { width: 100%; padding: 0.5rem 0.8rem; height: 50px; border: solid var(--grey3) 1px; color: var(--grey3); font-size: 1.2rem; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; } .input-field .custom-input:hover { background-color: var(--greywarm); } .input-field .suggestions { z-index: 99999999; color: var(--grey3); font-size: 1.2rem; display: none; position: absolute; width: 100%; border: solid var(--green3) 2px; border-top: none; top: calc(100% - 3px); padding-top: 3px; border-radius: 0 0 3px 3px; background-color: var(--white); -webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; -ms-border-radius: 0 0 3px 3px; -o-border-radius: 0 0 3px 3px; max-height: 200px; overflow: scroll; } .svg-hover-green:hover { filter: var(--filtergreen3); -webkit-filter: var(--filtergreen3); cursor: pointer; } .input-field .suggestions li { padding: 0.5rem 0.8rem; cursor: pointer; } .input-field .suggestions li:first-child { border-top: solid var(--grey2) 1px; } .input-field .suggestions li:hover { background-color: var(--greywarm); } .input-field .suggestions li:last-child:hover { border-radius: 0 0 3px 3px; -webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; -ms-border-radius: 0 0 3px 3px; -o-border-radius: 0 0 3px 3px; } .toggle-checkbox { display: none; } #zoeken-filteren { display: flex; } .toggle-checkbox:checked ~ #zoeken-filteren { display: none; } #expand-map { display: none; } .toggle-checkbox:checked ~ .map-button-container #expand-map { display: flex; } .pagination { color: var(--grey4); font-family: var(--font-body); font-size: 1.125rem; margin-block-start: 2rem; display: flex; align-items: center; } .pagination .current { color: var(--green3); font-weight: 700; } .pagination :is(a, span) { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; } .pagination a:is(:hover, :focus) { color: var(--green3); } .pagination .chevron-left { margin-right: 0.8rem; width: unset; height: unset; } .pagination .chevron-right { margin-left: 0.8rem; width: unset; height: unset; } .pagination :is(.chevron-right, .chevron-left) img{ filter: var(--filtergrey4); -webkit-filter: var(--filtergrey4); height: 20px; width: 20px; } .pagination :is(.chevron-right, .chevron-left):hover img{ filter: var(--filtergrey3); -webkit-filter: var(--filtergrey3); } :root input:focus-visible { outline-offset: unset; } @media only screen and (max-width: 600px) { .text-block { background-size: unset; } } @media only screen and (min-width: 768px) { .text-block { max-width: 70%; min-width: 300px; } .box-frame { flex-direction: row; gap: 2rem; flex-wrap: wrap; } .map-container { flex-direction: row; } .map-detail { flex-direction: column; } .map { display: flex; } .download-box { width: 75%; } #expand-map { display: flex; } .toggle-checkbox:checked ~ #expand-map { display: unset; } .stadsgezicht { flex-direction: row; gap: 1rem; } .page-image { min-width: unset; width: 250px; } .content { display: table; width: 100%; } .image-left { margin: 0 32px 32px 0; height: 100%; float: left; } .image-right { margin: 0 0 32px 32px; height: 100%; float: right; } .zoeken-filteren { width: 30%; min-width: 350px } .foto_container { columns: 2; } .stadsgezicht > div + div { overflow: hidden; } .monument-text ul p:first-of-type { min-width: 30%; } .stadsgezichten-detail ul p:first-of-type { min-width: 40%; } .monument-text ul li { flex-wrap: nowrap; display: flex; flex-direction: row; width: 100%; justify-content: unset; gap: 1rem; } .monument-text { white-space: nowrap; } .footer-container { flex-direction: row; justify-content: center; } .footer-container .container { flex-direction: row; justify-content: space-between; width: 100%; } .footer-footer .container ul { display: flex; flex-direction: row; height: fit-content; } .footer-footer .container ul li::before { background-image: unset; } .footer-container div { margin-bottom: 0rem; } .footer-container .section { max-width: 320px; width: 30%; } .footer-bottom div:nth-child(2) { order: unset; } .footer-footer { justify-content: flex-start; flex-wrap: wrap; height: unset; align-content: unset; } .footer-top .container div{ border-bottom: unset; } .footer-footer .container ul{ flex-wrap: wrap; row-gap: 1rem; } .footer-footer li { margin-right: 2rem; margin-bottom: unset; } .footer-container .dropdown-button { background: none; pointer-events: none; } .footer-container .dropdown { pointer-events: all; } .footer-container details[open] .dropdown-button { background: none; } .toggle-checkbox:checked + label + .dropdown { max-height: 100%; opacity: 1; overflow: hidden; } .social-media a img { height: 1.5rem; } #registerblad { width: 75%; } } @media only screen and (min-width: 991px) { .logo { grid-column: 1 / 5; } .menu-list { grid-column: 5 / 8; justify-content: flex-start; flex-direction: row; align-items: flex-start; justify-self: start; } .monument-detail { flex-direction: row; } .stadsgezichten-download { margin-block-start: 2.5rem; width: 100%; justify-content: end; } .menu-list ul li { margin-right: 1rem; display: block; } .menu-list label { display: none; } .menu-dropdown { display: flex; flex-direction: row; visibility: hidden; position: unset; background-color: unset; width: unset; padding: unset; z-index: unset; border: unset; border-radius: unset; -webkit-border-radius: unset; -moz-border-radius: unset; -ms-border-radius: unset; -o-border-radius: unset; transition: unset; -webkit-transition: unset; -moz-transition: unset; -ms-transition: unset; -o-transition: unset; } .content-container { grid-column: 1 / 3; } .andere-container { grid-column: 3 / -1; } .menu-dropdown:first-child { visibility: visible; } .menu-dropdown ul { flex-direction: row; width: unset; } .menu-dropdown ul li { visibility: visible; width: fit-content; margin-bottom: unset; } .menu-dropdown ul li:last-child { margin-bottom: unset; } .menu-dropdown a { width: unset; justify-content: unset; margin-bottom: unset; } .menu-dropdown p { font-size: unset; font-weight: unset; line-height: unset; margin-bottom: unset; } .menu-dropdown .input-field { width: 100%; } .menu-dropdown a img { filter: unset; -webkit-filter: unset; margin-right: unset; position: unset; } .foto_container { columns: 3; } header { font-size: 1.125rem; font-weight: unset; line-height: 150%; } header .container { justify-content: space-between; } .text-block { max-width: 50%; } .box { flex: 0 1 min(100%, 30.5%); } .menu-dropdown li a { font-size: unset; font-weight: unset; line-height: unset; } .menu-dropdown li { padding: unset; width: unset; border-bottom: unset; } .menu-dropdown .mobile { visibility: collapse; position: fixed; } .header-checker-close { opacity: 0; visibility: collapse; } .zoeken-inloggen { grid-column-start: 9; grid-column-end: 11; justify-content: flex-end; } .zoeken-inloggen ul li:first-of-type a:first-of-type { display: block; } .zoeken-inloggen ul li:nth-of-type(2) a:first-of-type { display: block; } .zoeken-inloggen ul li:first-of-type a:nth-of-type(2) { display: none; } .zoeken-inloggen ul li:nth-of-type(2) a:nth-of-type(2) { display: none; } .zoeken-inloggen ul li:first-of-type { flex-direction: row; display: inline-flex; } .zoeken-inloggen ul li:first-of-type a::before { content: ""; background: url(../icon/functional/search.svg) no-repeat center; background-size: contain; display: inline-block; width: 1rem; height: 1rem; position: relative; top: 0.1rem; pointer-events: all; margin-right: 0.2rem; white-space: nowrap; margin-block: auto; } .zoeken-inloggen ul li:first-of-type:hover a::before { filter: var(--filtergreen3); -webkit-filter: var(--filtergreen3); } .menu-dropdown li:hover, .zoeken-inloggen li:hover { background-color: unset; color: var(--green3); } .breadcrumbs ul { grid-column: 2 / 12; max-width: 1024px; width: 100%; place-self: center; } .container { max-width: 1024px; width: 100%; place-self: center; } .box-head { flex-direction: row; align-items: flex-end; } .box-head h2 { margin-bottom: 0; } .box-container { place-self: center; max-width: 1024px; width: 100%; } .map-container { max-width: 1024px; width: 100%; place-self: center; } .map-container-title { max-width: 1024px; width: 100%; place-self: center; } .box .text-green { font-size: 0.875rem; } .map-container-title { grid-column: 2 / 12; } .map-container { grid-column: 2 / 12; } .map-toggle-button { grid-column: 3 / 11; } .footer-container { padding: 40px 16px; justify-content: center; } .footer-container .container { flex-direction: row; justify-content: space-between; } .footer-footer .container ul { display: flex; flex-direction: row; height: fit-content; } .footer-footer .container ul li::before { background-image: unset; } } .leaflet-container a { font-size: 12px; } .leaflet-control-attribution.leaflet-control { width: 100px; }