/* wp-img-auto-sizes-contain-inline-css */ img:is([sizes=auto i],[sizes^="auto," i]){contain-intrinsic-size:3000px 1500px} html{line-height:1.15;-webkit-text-size-adjust:100%}*,:after,:before{box-sizing:border-box}body{background-color:#fff;color:#333;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:1rem;font-weight:400;line-height:1.5;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}h1,h2,h3,h4,h5,h6{color:inherit;font-family:inherit;font-weight:500;line-height:1.2;margin-block-end:1rem;margin-block-start:.5rem}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.75rem}h4{font-size:1.5rem}h5{font-size:1.25rem}h6{font-size:1rem}p{margin-block-end:.9rem;margin-block-start:0}a{background-color:transparent;color:#c36;text-decoration:none}a:active,a:hover{color:#336}a:not([href]):not([tabindex]),a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}b,strong{font-weight:bolder}img{border-style:none;height:auto;max-width:100%}figcaption{color:#333;font-size:16px;font-style:italic;font-weight:400;line-height:1.4}[hidden]{display:none}@media print{*,:after,:before{background:transparent!important;box-shadow:none!important;color:#000!important;text-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}blockquote{-moz-column-break-inside:avoid;border:1px solid #ccc;break-inside:avoid}thead{display:table-header-group}img,tr{-moz-column-break-inside:avoid;break-inside:avoid}h2,h3,p{orphans:3;widows:3}h2,h3{-moz-column-break-after:avoid;break-after:avoid}}label{display:inline-block;line-height:1;vertical-align:middle}button,input,textarea{font-family:inherit;font-size:1rem;line-height:1.5;margin:0}input[type=email],input[type=search],input[type=tel],input[type=text],input[type=url],textarea{border:1px solid #666;border-radius:3px;padding:.5rem 1rem;transition:all .3s;width:100%}input[type=email]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=url]:focus,textarea:focus{border-color:#333}button,input{overflow:visible}button{text-transform:none}[type=button],[type=submit],button{-webkit-appearance:button;width:auto}[type=button],[type=submit],button{background-color:transparent;border:1px solid #c36;border-radius:3px;color:#c36;display:inline-block;font-size:1rem;font-weight:400;padding:.5rem 1rem;text-align:center;transition:all .3s;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}[type=button]:focus,[type=button]:hover,[type=submit]:focus,[type=submit]:hover,button:focus,button:hover{background-color:#c36;color:#fff;text-decoration:none}[type=button]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}textarea{overflow:auto;resize:vertical}[type=checkbox]{box-sizing:border-box;padding:0}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}table{background-color:transparent;border-collapse:collapse;border-spacing:0;font-size:.9em;margin-block-end:15px;width:100%}table td,table th{border:1px solid hsla(0,0%,50%,.502);line-height:1.5;padding:15px;vertical-align:top}table th{font-weight:700}table thead th{font-size:1em}table thead:first-child tr:first-child td,table thead:first-child tr:first-child th{border-block-start:1px solid hsla(0,0%,50%,.502)}table tbody>tr:nth-child(odd)>td,table tbody>tr:nth-child(odd)>th{background-color:hsla(0,0%,50%,.071)}table tbody tr:hover>td,table tbody tr:hover>th{background-color:hsla(0,0%,50%,.102)}table tbody+tbody{border-block-start:2px solid hsla(0,0%,50%,.502)}@media(max-width:767px){table table{font-size:.8em}table table td,table table th{line-height:1.3;padding:7px}table table th{font-weight:400}}li,ul{background:transparent;border:0;font-size:100%;margin-block-end:0;margin-block-start:0;outline:0;vertical-align:baseline}[tabindex]:not([tabindex="-1"]):focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{box-shadow:0 0 0 4px #fff;outline:2px solid #000;outline-offset:2px}[tabindex]:not([tabindex="-1"]):focus:not(:focus-visible),a:focus:not(:focus-visible),button:focus:not(:focus-visible),input:focus:not(:focus-visible),textarea:focus:not(:focus-visible){box-shadow:none;outline:none}.post .wp-post-image{max-height:500px;-o-object-fit:cover;object-fit:cover;width:100%}@media(max-width:991px){.post .wp-post-image{max-height:400px}}@media(max-width:575px){.post .wp-post-image{max-height:300px}}@custom-media --hello-screen-xs-and-below (width < 576px);@custom-media --hello-screen-xs-and-above (width >= 576px);@custom-media --hello-screen-xs-only (0 <= width < 576px);@custom-media --hello-screen-sm-and-below (width < 768px);@custom-media --hello-screen-sm-and-above (width >= 768px);@custom-media --hello-screen-sm-only (576px <= width < 768px);@custom-media --hello-screen-md-and-below (width < 992px);@custom-media --hello-screen-md-and-above (width >= 992px);@custom-media --hello-screen-md-only (768px <= width < 992px);@custom-media --hello-screen-xl-and-below (width < 1200px);@custom-media --hello-screen-xl-and-above (width >= 1200px);@custom-media --hello-screen-xl-only (992px <= width < 1200px); :root{--direction-multiplier:1}.ui *,.ui :after,.ui :before{box-sizing:border-box}.ui a{box-shadow:none;text-decoration:none}.ui img{border:none;border-radius:0;box-shadow:none;height:auto;max-width:100%}.ui .ui-widget:not(.ui-widget-text-editor):not(.ui-widget-theme-post-content) figure{margin:0}.ui iframe,.ui video{border:none;line-height:1;margin:0;max-width:100%;width:100%}.ui-element{--flex-direction:initial;--flex-wrap:initial;--justify-content:initial;--align-items:initial;--align-content:initial;--gap:initial;--flex-basis:initial;--flex-grow:initial;--flex-shrink:initial;--order:initial;--align-self:initial;align-self:var(--align-self);flex-basis:var(--flex-basis);flex-grow:var(--flex-grow);flex-shrink:var(--flex-shrink);order:var(--order)}.ui-element:where(.ui-con-full,.ui-widget){align-content:var(--align-content);align-items:var(--align-items);flex-direction:var(--flex-direction);flex-wrap:var(--flex-wrap);gap:var(--row-gap) var(--column-gap);justify-content:var(--justify-content)}@media (max-width:767px){.ui-mobile-align-center{text-align:center}.ui-mobile-align-center .ui-button{width:auto}}:root{--page-title-display:block}@keyframes eicon-spin{0%{transform:rotate(0deg)}to{transform:rotate(359deg)}}.ui-widget{position:relative}.ui-widget:not(:last-child){margin-block-end:var(--kit-widget-spacing,20px)}.ui-column{display:flex;min-height:1px;position:relative}@media (min-width:768px){.ui-column.ui-col-100{width:100%}}@media (max-width:767px){.ui-column{width:100%}}@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}.ui-con{--border-radius:0;--border-top-width:0px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:0px;--border-style:initial;--border-color:initial;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--content-width:min(100%,var(--container-max-width,1140px));--width:100%;--min-height:initial;--height:auto;--text-align:initial;--margin-top:0px;--margin-right:0px;--margin-bottom:0px;--margin-left:0px;--padding-top:var(--container-default-padding-top,10px);--padding-right:var(--container-default-padding-right,10px);--padding-bottom:var(--container-default-padding-bottom,10px);--padding-left:var(--container-default-padding-left,10px);--position:relative;--z-index:revert;--overflow:visible;--gap:var(--widgets-spacing,20px);--row-gap:var(--widgets-spacing-row,20px);--column-gap:var(--widgets-spacing-column,20px);--overlay-mix-blend-mode:initial;--overlay-opacity:1;--overlay-transition:0.3s;--ui-con-grid-template-columns:repeat(3,1fr);--ui-con-grid-template-rows:repeat(2,1fr);border-radius:var(--border-radius);height:var(--height);min-height:var(--min-height);min-width:0;overflow:var(--overflow);position:var(--position);width:var(--width);z-index:var(--z-index);--flex-wrap-mobile:wrap}.ui-con:where(:not(.ui-div-block-base)){transition:background var(--background-transition,.3s),border var(--border-transition,.3s),box-shadow var(--border-transition,.3s),transform var(--ui-con-transform-transition-duration,.4s)}.ui-con{--margin-block-start:var(--margin-top);--margin-block-end:var(--margin-bottom);--margin-inline-start:var(--margin-left);--margin-inline-end:var(--margin-right);--padding-inline-start:var(--padding-left);--padding-inline-end:var(--padding-right);--padding-block-start:var(--padding-top);--padding-block-end:var(--padding-bottom);--border-block-start-width:var(--border-top-width);--border-block-end-width:var(--border-bottom-width);--border-inline-start-width:var(--border-left-width);--border-inline-end-width:var(--border-right-width)}.ui-con{margin-block-end:var(--margin-block-end);margin-block-start:var(--margin-block-start);margin-inline-end:var(--margin-inline-end);margin-inline-start:var(--margin-inline-start);padding-inline-end:var(--padding-inline-end);padding-inline-start:var(--padding-inline-start)}.ui-con.ui-flex{--flex-direction:column;--flex-basis:auto;--flex-grow:0;--flex-shrink:1;flex:var(--flex-grow) var(--flex-shrink) var(--flex-basis)}.ui-con-full,.ui-con>.ui-con-inner{padding-block-end:var(--padding-block-end);padding-block-start:var(--padding-block-start);text-align:var(--text-align)}.ui-con-full.ui-flex,.ui-con.ui-flex>.ui-con-inner{flex-direction:var(--flex-direction)}.ui-con,.ui-con>.ui-con-inner{display:var(--display)}.ui-con-boxed.ui-flex{align-content:normal;align-items:normal;flex-direction:column;flex-wrap:nowrap;justify-content:normal}.ui-con-boxed{gap:initial;text-align:initial}.ui-con.ui-flex>.ui-con-inner{align-content:var(--align-content);align-items:var(--align-items);align-self:auto;flex-basis:auto;flex-grow:1;flex-shrink:1;flex-wrap:var(--flex-wrap);justify-content:var(--justify-content)}.ui-con>.ui-con-inner{gap:var(--row-gap) var(--column-gap);height:100%;margin:0 auto;max-width:var(--content-width);padding-inline-end:0;padding-inline-start:0;width:100%}:is(.ui-section-wrap,[data-ui-id])>.ui-con{--margin-left:auto;--margin-right:auto;max-width:min(100%,var(--width))}:is([data-widget_type="e-component.default"],[data-widget_type="e-component.default"]>.ui-section-wrap)>.ui-con{--margin-right:0px;--margin-left:0px}.ui-con .ui-widget.ui-widget{margin-block-end:0}.ui-con:before,.ui-con>.ui-background-slideshow:before,.ui-con>.ui-motion-effects-container>.ui-motion-effects-layer:before,:is(.ui-con,.ui-con>.ui-con-inner)>.ui-background-video-container:before{border-block-end-width:var(--border-block-end-width);border-block-start-width:var(--border-block-start-width);border-color:var(--border-color);border-inline-end-width:var(--border-inline-end-width);border-inline-start-width:var(--border-inline-start-width);border-radius:var(--border-radius);border-style:var(--border-style);content:var(--background-overlay);display:block;height:max(100% + var(--border-top-width) + var(--border-bottom-width),100%);left:calc(0px - var(--border-left-width));mix-blend-mode:var(--overlay-mix-blend-mode);opacity:var(--overlay-opacity);position:absolute;top:calc(0px - var(--border-top-width));transition:var(--overlay-transition,.3s);width:max(100% + var(--border-left-width) + var(--border-right-width),100%)}.ui-con:before{transition:background var(--overlay-transition,.3s),border-radius var(--border-transition,.3s),opacity var(--overlay-transition,.3s)}.ui-con>.ui-background-slideshow,:is(.ui-con,.ui-con>.ui-con-inner)>.ui-background-video-container{border-block-end-width:var(--border-block-end-width);border-block-start-width:var(--border-block-start-width);border-color:var(--border-color);border-inline-end-width:var(--border-inline-end-width);border-inline-start-width:var(--border-inline-start-width);border-radius:var(--border-radius);border-style:var(--border-style);height:max(100% + var(--border-top-width) + var(--border-bottom-width),100%);left:calc(0px - var(--border-left-width));top:calc(0px - var(--border-top-width));width:max(100% + var(--border-left-width) + var(--border-right-width),100%)}@media (max-width:767px){:is(.ui-con,.ui-con>.ui-con-inner)>.ui-background-video-container.ui-hidden-mobile{display:none}}:is(.ui-con,.ui-con>.ui-con-inner)>.ui-background-video-container:before{z-index:1}:is(.ui-con,.ui-con>.ui-con-inner)>.ui-background-slideshow:before{z-index:2}.ui-con .ui-widget{min-width:0}.ui-con.ui-con>.ui-con-inner>.ui-widget,.ui.ui .ui-con>.ui-widget{max-width:100%}.ui-con .ui-widget:not(:last-child){--kit-widget-spacing:0px}@media (max-width:767px){.ui-con.ui-flex{--width:100%;--flex-wrap:var(--flex-wrap-mobile)}}.ui-form-fields-wrapper{display:flex;flex-wrap:wrap}.ui-form-fields-wrapper.ui-labels-above .ui-field-group .ui-field-subgroup,.ui-form-fields-wrapper.ui-labels-above .ui-field-group>input,.ui-form-fields-wrapper.ui-labels-above .ui-field-group>textarea{flex-basis:100%;max-width:100%}.ui-field-group{align-items:center;flex-wrap:wrap}.ui-field-group.ui-field-type-submit{align-items:flex-end}.ui-field-group .ui-field-textual{background-color:transparent;border:1px solid #69727d;color:#1f2124;flex-grow:1;max-width:100%;vertical-align:middle;width:100%}.ui-field-group .ui-field-textual:focus{box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);outline:0}.ui-field-group .ui-field-textual::-moz-placeholder{color:inherit;font-family:inherit;opacity:.6}.ui-field-group .ui-field-textual::placeholder{color:inherit;font-family:inherit;opacity:.6}.ui-field-subgroup{display:flex;flex-wrap:wrap}.ui-field-subgroup .ui-field-option label{display:inline-block}.ui-field-subgroup:not(.ui-subgroup-inline) .ui-field-option{flex-basis:100%}.ui-field-type-acceptance .ui-field-subgroup .ui-field-option input,.ui-field-type-acceptance .ui-field-subgroup .ui-field-option label{display:inline}.ui-field-label{cursor:pointer}.ui-mark-required .ui-field-label:after{color:red;content:"*";padding-inline-start:.2em}.ui-field-textual{border-radius:3px;font-size:15px;line-height:1.4;min-height:40px;padding:5px 14px}.ui-button-align-stretch .ui-field-type-submit:not(.ui-form__buttons__wrapper) .ui-button{flex-basis:100%}.ui-message{font-size:1em;line-height:1;margin:10px 0}.ui-message:before{content:"\e90e";display:inline-block;font-family:eicons;font-style:normal;font-weight:400;margin-inline-end:5px;vertical-align:middle}.ui-message.ui-message-danger{color:#d9534f}.ui-message.ui-message-danger:before{content:"\e87f"}.ui-form .ui-button{border:none;padding-block-end:0;padding-block-start:0}.ui-form .ui-button-content-wrapper,.ui-form .ui-button>span{display:flex;flex-direction:row;gap:5px;justify-content:center}.ui-form .ui-button.ui-size-sm{min-height:40px}.ui-element:where(:not(.ui-con)):where(:not(.ui-div-block-base)) .ui-widget-container,.ui-element:where(:not(.ui-con)):where(:not(.ui-div-block-base)):not(:has(.ui-widget-container)){transition:background .3s,border .3s,border-radius .3s,box-shadow .3s,transform var(--ui-transform-transition-duration,.4s)}.ui-heading-title{line-height:1;margin:0;padding:0}.ui-button{background-color:#69727d;border-radius:3px;color:#fff;display:inline-block;fill:#fff;font-size:15px;line-height:1;padding:12px 24px;text-align:center;transition:all .3s}.ui-button:focus,.ui-button:hover,.ui-button:visited{color:#fff}.ui-button-content-wrapper{display:flex;flex-direction:row;gap:5px;justify-content:center}.ui-button-icon{align-items:center;display:flex}.ui-button-icon svg{height:auto;width:1em}.ui-button-icon .ui-font-icon-svg{height:1em}.ui-button-text{display:inline-block}.ui-button span{text-decoration:inherit}.ui-icon{color:#69727d;display:inline-block;font-size:50px;line-height:1;text-align:center;transition:all .3s}.ui-icon:hover{color:#69727d}.ui-icon i,.ui-icon svg{display:block;height:1em;position:relative;width:1em}.ui-icon i:before,.ui-icon svg:before{left:50%;position:absolute;transform:translateX(-50%)}.animated{animation-duration:1.25s}@media (prefers-reduced-motion:reduce){.animated{animation:none!important}html *{transition-delay:0s!important;transition-duration:0s!important}}@media (max-width:767px){.ui .ui-hidden-mobile{display:none}}@media (min-width:768px) and (max-width:1024px){.ui .ui-hidden-tablet{display:none}}@media (min-width:1025px) and (max-width:99999px){.ui .ui-hidden-desktop{display:none}}.ui-edit-mode [data-element_type="e-form-success-message"]:is(.ui-element-editable, :has(.ui-element-editable), :has(> .ui-empty-view)),.ui-edit-mode [data-element_type="e-form-error-message"]:is(.ui-element-editable, :has(.ui-element-editable), :has(> .ui-empty-view)){ display: block; } .ui-site{--ui-color-primary:#014B92;--ui-color-secondary:#54595F;--ui-color-text:#7A7A7A;--ui-color-accent:#FDD341;--ui-color-07c74a0:#EFBD13;--ui-color-f96aac7:#00376D;--ui-color-f75ed86:#EAF3FB;--ui-color-be0b6d3:#16324B;--ui-color-fbda9d3:#60758A;--ui-color-9b8fc81:#F4F7FB;--ui-color-bb4230d:#DCE7F1;--ui-typography-primary-font-family:"Quicksand";--ui-typography-primary-font-weight:600;--ui-typography-secondary-font-family:"Quicksand";--ui-typography-secondary-font-weight:400;--ui-typography-text-font-family:"Quicksand";--ui-typography-text-font-weight:400;--ui-typography-accent-font-family:"Quicksand";--ui-typography-accent-font-weight:500;}.ui-con{--container-max-width:1140px;}.ui-widget:not(:last-child){--kit-widget-spacing:20px;}.ui-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}@media(max-width:1024px){.ui-con{--container-max-width:1024px;}}@media(max-width:767px){.ui-con{--container-max-width:767px;}} /* Start custom CSS *//* ========================================================= 01 · VARIABELEN ========================================================= */ :root { /* Kleuren */ --gog-blue: #014b92; --gog-blue-dark: #00376d; --gog-blue-deep: #002d58; --gog-blue-soft: #eaf3fb; --gog-yellow: #fdd341; --gog-yellow-dark: #efbd13; --gog-yellow-light: #ffe168; --gog-yellow-soft: #fff7d7; --gog-yellow-tint: #fff4c4; --gog-ink: #16324b; --gog-ink-soft: #29465f; --gog-muted: #60758a; --gog-paper: #ffffff; --gog-mist: #f4f7fb; --gog-line: #dce7f1; /* Schaduwen */ --gog-shadow: 0 18px 50px rgba(0, 55, 109, .12); --gog-shadow-card: 0 8px 20px rgba(0, 55, 109, .10), 0 20px 45px rgba(0, 55, 109, .12); --gog-shadow-card-hover: 0 12px 28px rgba(0, 55, 109, .13), 0 28px 60px rgba(0, 55, 109, .18); --gog-shadow-box: 0 20px 50px rgba(0, 55, 109, .16); /* Blauwe overlay over foto's (hero + paginatitel) */ --gog-overlay: linear-gradient( 90deg, rgba(0, 45, 88, .93) 0%, rgba(0, 55, 109, .74) 40%, rgba(0, 55, 109, .18) 74%, rgba(0, 55, 109, .08) 100% ); /* Maten */ --gog-container: 1180px; /* maximale contentbreedte */ --gog-gutter: 48px; /* totale zijmarge (2 × 24) */ --gog-wrap: min( var(--gog-container), calc(100% - var(--gog-gutter)) ); /* breedte van de content */ --gog-font-button: "Quicksand", "Avenir Next", sans-serif; } @media (max-width: 760px) { :root { --gog-gutter: 32px; /* 2 × 16 op mobiel */ } } /* ========================================================= 02 · BASIS ========================================================= */ /* Voorkomt horizontaal scrollen door de 100vw-footer */ body { overflow-x: clip; } [class*="gog-"], [class*="gog-"] *, [class*="gog-"] *::before, [class*="gog-"] *::after { box-sizing: border-box; } /* Duidelijke focusrand voor toetsenbordgebruikers */ .gog-button .ui-button:focus-visible, a.gog-quick-card:focus-visible, .gog-quick-card a:focus-visible, .gog-footer a:focus-visible, .gog-richtext a:focus-visible { outline: 3px solid var(--gog-yellow); outline-offset: 3px; } /* ========================================================= 03 · TYPOGRAFIE ========================================================= */ /* ---------- Eyebrow (klein label boven een titel) ---------- gog-section-eyebrow → blauw, voor lichte achtergrond gog-eyebrow → wit, voor foto / blauwe achtergrond gog-tientje-eyebrow / gog-visit-eyebrow → oude namen */ .gog-eyebrow, .gog-section-eyebrow, .gog-tientje-eyebrow, .gog-visit-eyebrow { margin: 0 0 14px 0 !important; } :is(.gog-eyebrow, .gog-section-eyebrow, .gog-tientje-eyebrow, .gog-visit-eyebrow) .ui-heading-title { margin: 0 !important; display: inline-flex; align-items: center; gap: 9px; color: var(--gog-blue); font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; } :is(.gog-eyebrow, .gog-section-eyebrow, .gog-tientje-eyebrow, .gog-visit-eyebrow) .ui-heading-title::before { content: ""; width: 26px; height: 4px; flex: 0 0 26px; border-radius: 999px; background: var(--gog-yellow); } :is(.gog-eyebrow, .gog-visit-eyebrow) .ui-heading-title { color: #ffffff; } /* ---------- H1 in de hero ---------- */ .gog-hero-title { margin: 0 0 22px 0 !important; } .gog-hero-title .ui-heading-title { margin: 0 !important; color: #ffffff; font-size: clamp(48px, 5.3vw, 78px); font-weight: 700; line-height: 1.12; letter-spacing: -.035em; } /* ---------- H2 sectietitel ---------- */ .gog-section-title, .gog-tientje-title { width: 100% !important; margin: 0 0 20px 0 !important; } .gog-visit-title { margin: 0 0 14px 0 !important; } :is(.gog-section-title, .gog-tientje-title, .gog-visit-title) .ui-heading-title { margin: 0 !important; color: var(--gog-ink); font-size: clamp(36px, 4vw, 54px); font-weight: 700; line-height: 1.12; letter-spacing: -.035em; } .gog-visit-title .ui-heading-title { color: #ffffff; } /* ---------- H3 tussenkop (nieuw) ---------- */ .gog-subtitle { width: 100% !important; margin: 0 0 12px 0 !important; } .gog-subtitle .ui-heading-title { margin: 0 !important; color: var(--gog-ink); font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; } /* ---------- Lopende tekst ---------- gog-text = algemene naam gog-intro-text / gog-tientje-text = oude namen */ .gog-text, .gog-intro-text, .gog-tientje-text { width: 100% !important; margin: 0 0 16px 0 !important; } .gog-tientje-text { max-width: 610px !important; margin-bottom: 32px !important; } :is(.gog-text, .gog-intro-text, .gog-tientje-text) p { margin: 0 0 1em 0 !important; color: var(--gog-muted); font-size: 17px; line-height: 1.65; } :is(.gog-text, .gog-intro-text, .gog-tientje-text) p:last-child { margin-bottom: 0 !important; } :is(.gog-text, .gog-intro-text, .gog-tientje-text) a { color: var(--gog-blue) !important; font-weight: 600; text-decoration: underline; text-decoration-color: var(--gog-yellow); text-decoration-thickness: 2px; text-underline-offset: 3px; } :is(.gog-text, .gog-intro-text, .gog-tientje-text) a:hover { color: var(--gog-blue-dark) !important; } :is(.gog-section-blue, .gog-block-blue) :is(.gog-text, .gog-intro-text, .gog-tientje-text) a { color: var(--gog-yellow) !important; } /* ---------- Grote witte tekst in de hero ---------- */ .gog-hero-text { width: 100% !important; max-width: 650px !important; margin: 0 0 34px 0 !important; } .gog-hero-text p { margin: 0 !important; color: rgba(255, 255, 255, .91); font-size: 20px; line-height: 1.65; } /* ---------- Witte tekst in de bezoek-CTA ---------- */ .gog-visit-text { width: 100% !important; max-width: 650px !important; margin: 0 !important; } .gog-visit-text p { margin: 0 !important; color: rgba(255, 255, 255, .82); font-size: 17px; line-height: 1.65; } /* ---------- Lange tekst met koppen, lijsten en links (nieuw) Zet gog-richtext op een Teksteditor-widget. */ .gog-richtext { width: 100% !important; margin: 0 !important; color: var(--gog-muted); font-size: 17px; line-height: 1.7; } .gog-richtext :is(h2, h3, h4) { margin: 1.6em 0 .5em; color: var(--gog-ink); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; } .gog-richtext h2 { font-size: 30px; } .gog-richtext h3 { font-size: 22px; } .gog-richtext h4 { font-size: 18px; } .gog-richtext :is(h2, h3, h4):first-child { margin-top: 0; } .gog-richtext :is(p, ul, ol) { margin: 0 0 1em; } .gog-richtext :is(ul, ol) { padding-left: 1.3em; } .gog-richtext li { margin: .35em 0; } .gog-richtext li::marker { color: var(--gog-blue); font-weight: 700; } .gog-richtext :is(p, ul, ol):last-child { margin-bottom: 0; } .gog-richtext strong { color: var(--gog-ink); } .gog-richtext a { color: var(--gog-blue); font-weight: 600; text-decoration: underline; text-decoration-color: var(--gog-yellow); text-decoration-thickness: 2px; text-underline-offset: 3px; } .gog-richtext a:hover { color: var(--gog-blue-dark); text-decoration-color: var(--gog-yellow-dark); } .gog-richtext blockquote { margin: 1.5em 0; padding: 18px 24px; border-left: 4px solid var(--gog-yellow); border-radius: 0 16px 16px 0; color: var(--gog-ink); background: var(--gog-mist); } .gog-richtext img { max-width: 100%; height: auto; border-radius: 22px; } /* ========================================================= 04 · KNOPPEN Altijd twee klassen: gog-button + een kleur gog-button-yellow / -blue / -white / -outline ========================================================= */ .gog-button { --width: auto !important; width: auto !important; margin: 0 !important; } .gog-button .ui-button { min-height: 52px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 999px; font-family: var(--gog-font-button); font-size: 15px; font-weight: 700; line-height: 1; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease; } .gog-button .ui-button:hover { transform: translateY(-2px); } .gog-button .ui-button-content-wrapper { display: inline-flex; align-items: center; gap: 10px; } .gog-button .ui-button-icon { display: flex; align-items: center; } .gog-button .ui-button-icon svg { width: 18px; height: 18px; fill: currentColor; } /* Geel */ .gog-button-yellow .ui-button { color: #18324b; background: var(--gog-yellow); box-shadow: 0 10px 25px rgba(239, 189, 19, .24); } .gog-button-yellow .ui-button:hover { color: #18324b; background: var(--gog-yellow-light); } /* Wit */ .gog-button-white .ui-button { color: var(--gog-blue); background: #ffffff; box-shadow: 0 10px 30px rgba(0, 43, 84, .18); } .gog-button-white .ui-button:hover { color: var(--gog-blue); background: #f7f9fc; } /* Blauw */ .gog-button-blue .ui-button { color: #ffffff; background: var(--gog-blue); box-shadow: 0 10px 25px rgba(1, 75, 146, .22); } .gog-button-blue .ui-button:hover { color: #ffffff; background: var(--gog-blue-dark); } /* Omlijnd (nieuw) – rustige tweede knop */ .gog-button-outline .ui-button { color: var(--gog-blue); background: transparent; box-shadow: inset 0 0 0 2px var(--gog-blue); } .gog-button-outline .ui-button:hover { color: #ffffff; background: var(--gog-blue); } /* ---------- Knoppenrij ---------- gog-actions = algemene naam, gog-hero-actions = oude naam */ .gog-actions, .gog-hero-actions { --width: auto !important; width: auto !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: wrap !important; gap: 14px !important; } .gog-actions { margin-top: 16px !important; } @media (max-width: 760px) { .gog-actions, .gog-hero-actions { --width: min(100%, 300px) !important; width: min(100%, 300px) !important; flex-direction: column !important; align-items: stretch !important; } .gog-button { --width: 100% !important; width: 100% !important; } .gog-button .ui-button { width: 100%; } } /* ========================================================= 05 · SECTIES EN KOLOMMEN --------------------------------------------------------- gog-section buitenste container (volle breedte, witruimte) gog-row twee kolommen naast elkaar, max 1180px gog-col-copy tekstkolom (49%) gog-col-media beeldkolom (51%) gog-col gelijke kolom (50%) Oude namen: gog-intro, gog-tientje, gog-intro-row, gog-tientje-row, gog-intro-copy, gog-tientje-copy ========================================================= */ .gog-section, .gog-intro, .gog-tientje { position: relative; width: 100% !important; padding: 112px 0 !important; background-color: var(--gog-paper); } .gog-intro { padding-top: 124px !important; } /* Achtergrondvarianten */ .gog-section-mist { background-color: var(--gog-mist) !important; } .gog-section-blue { color: #ffffff; background-color: var(--gog-blue-dark) !important; } /* Witruimte-varianten */ :is(.gog-section, .gog-intro, .gog-tientje).gog-section-compact { padding-top: 64px !important; padding-bottom: 64px !important; } :is(.gog-section, .gog-intro, .gog-tientje).gog-section-no-top { padding-top: 0 !important; } :is(.gog-section, .gog-intro, .gog-tientje).gog-section-no-bottom { padding-bottom: 0 !important; } /* ---------- Rij met twee kolommen ---------- */ .gog-row, .gog-intro-row, .gog-tientje-row { --width: var(--gog-wrap) !important; width: var(--gog-wrap) !important; max-width: var(--gog-container) !important; margin-left: auto !important; margin-right: auto !important; padding: 0 !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 82px !important; } /* Kolommen bovenaan uitlijnen i.p.v. verticaal centreren */ .gog-row-top { align-items: flex-start !important; } /* ---------- Kolommen ---------- */ .gog-col-copy, .gog-intro-copy, .gog-tientje-copy { --width: calc(49% - 41px) !important; width: calc(49% - 41px) !important; max-width: calc(49% - 41px) !important; flex: 0 0 calc(49% - 41px) !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 0 !important; } .gog-col-media { position: relative !important; --width: calc(51% - 41px) !important; width: calc(51% - 41px) !important; max-width: calc(51% - 41px) !important; flex: 0 0 calc(51% - 41px) !important; overflow: visible !important; } .gog-col { --width: calc(50% - 41px) !important; width: calc(50% - 41px) !important; max-width: calc(50% - 41px) !important; flex: 0 0 calc(50% - 41px) !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 0 !important; } /* ---------- Donkere achtergrond: tekst automatisch wit ---------- */ :is(.gog-section-blue, .gog-block-blue) :is(.gog-section-eyebrow, .gog-tientje-eyebrow, .gog-section-title, .gog-tientje-title, .gog-subtitle) .ui-heading-title { color: #ffffff; } :is(.gog-section-blue, .gog-block-blue) :is(.gog-text, .gog-intro-text, .gog-tientje-text) p, :is(.gog-section-blue, .gog-block-blue) .gog-richtext { color: rgba(255, 255, 255, .82); } :is(.gog-section-blue, .gog-block-blue) .gog-richtext :is(h2, h3, h4, strong) { color: #ffffff; } :is(.gog-section-blue, .gog-block-blue) .gog-richtext a { color: var(--gog-yellow); } :is(.gog-section-blue, .gog-block-blue) .gog-check-list .ui-icon-list-text { color: #ffffff !important; } :is(.gog-section-blue, .gog-block-blue) .gog-check-list .ui-icon-list-icon { color: var(--gog-ink) !important; background: var(--gog-yellow); } :is(.gog-section-blue, .gog-block-blue) .gog-button-outline .ui-button { color: #ffffff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7); } :is(.gog-section-blue, .gog-block-blue) .gog-button-outline .ui-button:hover { color: var(--gog-blue); background: #ffffff; } /* ---------- Responsive ---------- */ @media (max-width: 1080px) { .gog-row, .gog-intro-row, .gog-tientje-row { gap: 48px !important; } } @media (max-width: 760px) { .gog-section, .gog-tientje { padding: 78px 0 !important; } .gog-intro { padding: 86px 0 78px !important; } :is(.gog-section, .gog-intro, .gog-tientje).gog-section-compact { padding-top: 48px !important; padding-bottom: 48px !important; } :is(.gog-section, .gog-intro, .gog-tientje).gog-section-no-top { padding-top: 0 !important; } :is(.gog-section, .gog-intro, .gog-tientje).gog-section-no-bottom { padding-bottom: 0 !important; } .gog-row, .gog-intro-row, .gog-tientje-row { flex-direction: column !important; align-items: stretch !important; gap: 48px !important; } /* Beeld boven tekst op mobiel, als de tekst links staat */ .gog-row-mobile-reverse { flex-direction: column-reverse !important; } .gog-col-copy, .gog-intro-copy, .gog-tientje-copy, .gog-col-media, .gog-col { --width: 100% !important; width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; } } @media (max-width: 460px) { .gog-section, .gog-tientje { padding: 64px 0 !important; } :is(.gog-section, .gog-intro, .gog-tientje).gog-section-no-top { padding-top: 0 !important; } :is(.gog-section, .gog-intro, .gog-tientje).gog-section-no-bottom { padding-bottom: 0 !important; } :is(.gog-section-title, .gog-tientje-title) .ui-heading-title { font-size: 34px; } } /* ========================================================= 06 · EÉN BLOK (nieuw) --------------------------------------------------------- Eén kolom over de breedte van de content. Plaats in een gog-section. gog-block basis (max 1180px, links uitgelijnd) + gog-block-narrow smal leesblok (max 820px) + gog-block-center alles gecentreerd + gog-block-card witte kaart met schaduw + gog-block-blue blauwe kaart, tekst wordt wit ========================================================= */ .gog-block { position: relative; --width: var(--gog-wrap) !important; width: var(--gog-wrap) !important; max-width: var(--gog-container) !important; margin-left: auto !important; margin-right: auto !important; padding: 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 0 !important; } .gog-block > :is(.ui-element, .ui-con) { max-width: 100%; } /* Smal */ .gog-block.gog-block-narrow { --width: min(820px, calc(100% - var(--gog-gutter))) !important; width: min(820px, calc(100% - var(--gog-gutter))) !important; max-width: 820px !important; } /* Gecentreerd */ .gog-block.gog-block-center { align-items: center !important; text-align: center !important; } .gog-block-center > :is(.ui-element, .ui-con) { margin-left: auto !important; margin-right: auto !important; } .gog-block-center .ui-heading-title, .gog-block-center :is(.gog-text, .gog-intro-text, .gog-tientje-text) p { text-align: center; } .gog-block-center :is(.gog-text, .gog-intro-text, .gog-tientje-text) { max-width: 680px !important; } .gog-block-center :is(.gog-actions, .gog-hero-actions) { justify-content: center !important; } /* Witte kaart */ .gog-block.gog-block-card { padding: 64px !important; border: 1px solid rgba(1, 75, 146, .08); border-radius: 34px; background-color: #ffffff !important; box-shadow: var(--gog-shadow-card) !important; } /* Blauwe kaart */ .gog-block.gog-block-blue { padding: 64px !important; border-radius: 34px; color: #ffffff; background-color: var(--gog-blue-dark) !important; background-image: linear-gradient(120deg, var(--gog-blue-dark) 0%, var(--gog-blue) 100%) !important; box-shadow: var(--gog-shadow-box) !important; overflow: hidden; isolation: isolate; } /* Gele ring als decoratie rechtsboven */ .gog-block.gog-block-blue::after { content: ""; position: absolute; top: -90px; right: -90px; z-index: -1; width: 240px; height: 240px; border: 44px solid rgba(253, 211, 65, .16); border-radius: 50%; pointer-events: none; } /* Blok als kolom in een gog-row (bijv. tekst links, blauwe kaart rechts) */ :is(.gog-row, .gog-intro-row, .gog-tientje-row) > .gog-block, :is(.gog-row, .gog-intro-row, .gog-tientje-row) > .ui-con-inner > .gog-block { --width: calc(51% - 41px) !important; width: calc(51% - 41px) !important; max-width: calc(51% - 41px) !important; flex: 0 0 calc(51% - 41px) !important; margin-left: 0 !important; margin-right: 0 !important; } :is(.gog-row, .gog-intro-row, .gog-tientje-row) > :not([class*="gog-"]):has(> :is(.gog-col-copy, .gog-intro-copy, .gog-tientje-copy)) { --width: calc(49% - 41px) !important; width: calc(49% - 41px) !important; max-width: calc(49% - 41px) !important; min-width: 0 !important; flex: 0 0 calc(49% - 41px) !important; } :is(.gog-row, .gog-intro-row, .gog-tientje-row) > :not([class*="gog-"]):has(> :is(.gog-col-media, .gog-photo-collage, .gog-logo-collage, .gog-tientje-media, .gog-block)) { --width: calc(51% - 41px) !important; width: calc(51% - 41px) !important; max-width: calc(51% - 41px) !important; min-width: 0 !important; flex: 0 0 calc(51% - 41px) !important; } :is(.gog-row, .gog-intro-row, .gog-tientje-row) > :not([class*="gog-"]):has(> .gog-col) { --width: calc(50% - 41px) !important; width: calc(50% - 41px) !important; max-width: calc(50% - 41px) !important; min-width: 0 !important; flex: 0 0 calc(50% - 41px) !important; } :is(.gog-row, .gog-intro-row, .gog-tientje-row) > :not([class*="gog-"]) > :is(.gog-col-copy, .gog-intro-copy, .gog-tientje-copy, .gog-col-media, .gog-col, .gog-photo-collage, .gog-logo-collage, .gog-tientje-media, .gog-block) { --width: 100% !important; width: 100% !important; max-width: 100% !important; flex: 1 1 auto !important; margin-left: 0 !important; margin-right: 0 !important; } @media (max-width: 760px) { :is(.gog-row, .gog-intro-row, .gog-tientje-row) > :not([class*="gog-"]):has(> [class*="gog-"]) { --width: 100% !important; width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; } :is(.gog-row, .gog-intro-row, .gog-tientje-row) > .gog-block, :is(.gog-row, .gog-intro-row, .gog-tientje-row) > .ui-con-inner > .gog-block { --width: 100% !important; width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; } .gog-block.gog-block-card, .gog-block.gog-block-blue { padding: 40px 24px !important; border-radius: 28px; } .gog-block-center :is(.gog-actions, .gog-hero-actions) { margin-left: auto !important; margin-right: auto !important; } } @media (max-width: 460px) { .gog-block.gog-block-card, .gog-block.gog-block-blue { padding: 32px 20px !important; } } /* ========================================================= 07 · HERO --------------------------------------------------------- gog-hero > gog-hero-inner > gog-hero-copy > eyebrow / hero-title / hero-text / hero-actions + gog-hero-small lagere hero voor subpagina's (nieuw) ========================================================= */ .gog-hero { position: relative; width: 100% !important; min-height: 690px; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; color: #ffffff; overflow: hidden; isolation: isolate; background-color: var(--gog-blue-dark); background-position: center 43% !important; background-size: cover !important; background-repeat: no-repeat !important; } .gog-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--gog-overlay); pointer-events: none; } .gog-hero.gog-hero-small { min-height: 480px; } .gog-hero-inner { position: relative; z-index: 2; --width: var(--gog-wrap) !important; width: var(--gog-wrap) !important; max-width: var(--gog-container) !important; margin-left: auto !important; margin-right: auto !important; padding: 82px 0 118px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; } .gog-hero-small .gog-hero-inner { padding: 72px 0 80px !important; } .gog-hero-copy { --width: 100% !important; width: 100% !important; max-width: 760px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 0 !important; } @media (max-width: 760px) { .gog-hero { min-height: 630px; background-position: 61% center !important; } .gog-hero.gog-hero-small { min-height: 440px; } .gog-hero-inner { padding: 74px 0 120px !important; } .gog-hero-small .gog-hero-inner { padding: 60px 0 64px !important; } .gog-hero-text p { font-size: 17px; } } /* ========================================================= 08 · QUICKLINKS --------------------------------------------------------- gog-quicklinks > gog-quicklinks-row > 4 × lege container > gog-quick-card > gog-quick-card-top (icoon + pijl) + titel + gog-quicklinks-static zonder overlap met de hero (nieuw) Breedtes: > 1045px 4 naast elkaar 350–1045 2 × 2 < 350 1 per rij ========================================================= */ .gog-quicklinks { position: relative; z-index: 5; width: 100% !important; margin-top: -72px !important; padding: 0 !important; } .gog-quicklinks.gog-quicklinks-static { margin-top: 0 !important; padding: 64px 0 !important; } /* ---------- Rij ---------- */ .gog-quicklinks-row { position: relative; --width: var(--gog-wrap) !important; width: var(--gog-wrap) !important; max-width: var(--gog-container) !important; margin-left: auto !important; margin-right: auto !important; padding: 0 !important; } .gog-quicklinks-row, .gog-quicklinks-row > .ui-con-inner { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; justify-content: flex-start !important; gap: 16px !important; column-gap: 16px !important; row-gap: 16px !important; } .gog-quicklinks-row > .ui-con-inner { width: 100% !important; max-width: 100% !important; } /* De vier lege containers hebben GEEN klasse nodig */ .gog-quicklinks-row > :is(.ui-con, .ui-element), .gog-quicklinks-row > .ui-con-inner > :is(.ui-con, .ui-element) { --width: 0px !important; width: 0 !important; min-width: 0 !important; max-width: none !important; flex: 1 1 0 !important; } /* ---------- Kaart ---------- */ .gog-quick-card { position: relative; --width: 100% !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; min-height: 154px; height: 100%; margin: 0 !important; padding: 27px 25px !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: space-between !important; gap: 0 !important; border: 1px solid rgba(1, 75, 146, .08); border-radius: 22px; color: inherit; background: #ffffff; box-shadow: var(--gog-shadow-card) !important; text-decoration: none !important; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease; } .gog-quick-card:hover { transform: translateY(-8px); box-shadow: var(--gog-shadow-card-hover) !important; } .gog-quick-card-top { --width: 100% !important; width: 100% !important; max-width: 100% !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 18px !important; } /* ---------- Icoon links ---------- */ .gog-quick-icon { --width: auto !important; width: auto !important; flex: 0 0 auto !important; } .gog-quick-icon .ui-icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 16px; color: var(--gog-blue); background: var(--gog-blue-soft); } .gog-quick-icon .ui-icon i { font-size: 25px; } .gog-quick-icon .ui-icon svg { width: 27px; height: 27px; fill: currentColor; } /* Gele variant */ .gog-quick-card-alt .gog-quick-icon .ui-icon { color: var(--gog-ink); background: var(--gog-yellow-soft); } /* ---------- Ronde pijl ---------- */ .gog-round-arrow { --width: auto !important; width: auto !important; flex: 0 0 auto !important; } .gog-round-arrow .ui-icon { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #ffffff; background: var(--gog-blue); } .gog-round-arrow .ui-icon i { font-size: 14px; } .gog-round-arrow .ui-icon svg { width: 15px; height: 15px; fill: currentColor; } /* ---------- Titel ---------- */ .gog-quick-title { --width: 100% !important; width: 100% !important; margin-top: 18px !important; margin-bottom: 0 !important; } .gog-quick-title .ui-heading-title { margin: 0 !important; color: var(--gog-ink); font-size: 20px; font-weight: 700; line-height: 1.12; letter-spacing: -.035em; } /* ---------- Responsive ---------- */ /* 2 × 2 en pijl vast rechtsboven */ @media (max-width: 1045px) { .gog-quicklinks-row, .gog-quicklinks-row > .ui-con-inner { flex-wrap: wrap !important; } .gog-quicklinks-row > :is(.ui-con, .ui-element), .gog-quicklinks-row > .ui-con-inner > :is(.ui-con, .ui-element) { --width: calc(50% - 8px) !important; width: calc(50% - 8px) !important; max-width: calc(50% - 8px) !important; flex: 0 0 calc(50% - 8px) !important; } .gog-quick-card-top { align-items: flex-start !important; justify-content: flex-start !important; } .gog-round-arrow { position: absolute !important; top: 25px !important; right: 25px !important; z-index: 4; margin: 0 !important; } } @media (max-width: 760px) { .gog-quicklinks { margin-top: -76px !important; } .gog-quick-card { min-height: 138px; padding: 20px !important; } .gog-quick-icon .ui-icon { width: 44px; height: 44px; } .gog-quick-icon .ui-icon svg { width: 23px; height: 23px; } .gog-quick-title .ui-heading-title { font-size: 17px; } .gog-round-arrow { top: 20px !important; right: 20px !important; } } @media (max-width: 420px) { .gog-quick-card { min-height: 150px !important; padding: 18px !important; } .gog-round-arrow { top: 18px !important; right: 18px !important; } .gog-quick-title { margin-top: 22px !important; } } /* Onder 350px één kaart per rij */ @media (max-width: 349px) { .gog-quicklinks-row, .gog-quicklinks-row > .ui-con-inner { flex-direction: column !important; flex-wrap: nowrap !important; } .gog-quicklinks-row > :is(.ui-con, .ui-element), .gog-quicklinks-row > .ui-con-inner > :is(.ui-con, .ui-element) { --width: 100% !important; width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; } } /* ========================================================= 09 · FOTO-COLLAGE --------------------------------------------------------- Container gog-photo-collage (is zelf de beeldkolom) met: Afbeelding gog-photo-main, Afbeelding gog-photo-small, Kop gog-photo-badge (optioneel, gele ronde sticker) ========================================================= */ .gog-photo-collage { position: relative !important; --width: calc(51% - 41px) !important; width: calc(51% - 41px) !important; max-width: calc(51% - 41px) !important; min-height: 590px; flex: 0 0 calc(51% - 41px) !important; overflow: visible !important; } /* Grote foto */ .gog-photo-main { position: absolute !important; top: 0; left: 0; right: 84px; bottom: 44px; width: auto !important; margin: 0 !important; } .gog-photo-main .ui-widget-container { width: 100%; height: 100%; } .gog-photo-main img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 40px 40px 120px 40px; box-shadow: var(--gog-shadow); } /* Kleine foto */ .gog-photo-small { position: absolute !important; right: 0; bottom: 0; z-index: 3; width: 224px !important; height: 240px !important; margin: 0 !important; } .gog-photo-small .ui-widget-container { width: 100%; height: 100%; } .gog-photo-small img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border: 10px solid #ffffff; border-radius: 34px; box-shadow: 0 22px 45px rgba(0, 55, 109, .18); } /* Gele sticker */ .gog-photo-badge { position: absolute !important; top: 42px; right: 20px; z-index: 5; --width: 128px !important; width: 128px !important; height: 128px; margin: 0 !important; } .gog-photo-badge .ui-heading-title { width: 128px; height: 128px; margin: 0; padding: 18px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--gog-ink); background: var(--gog-yellow); text-align: center; font-size: 14px; font-weight: 700; line-height: 1.3; transform: rotate(5deg); box-shadow: 0 12px 28px rgba(239, 189, 19, .28); } @media (max-width: 760px) { .gog-photo-collage { --width: 100% !important; width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; min-height: 470px; } .gog-photo-main { right: 45px; bottom: 35px; } .gog-photo-small { width: 166px !important; height: 175px !important; } .gog-photo-small img { border-width: 7px; } .gog-photo-badge { --width: 98px !important; width: 98px !important; height: 98px; right: 4px; } .gog-photo-badge .ui-heading-title { width: 98px; height: 98px; padding: 12px; font-size: 11px; } } @media (max-width: 460px) { .gog-photo-collage { min-height: 390px; } .gog-photo-badge { top: 22px; } } /* ========================================================= 10 · LOGO-COLLAGE (foto met logo-kaartje) --------------------------------------------------------- Nieuw: gog-logo-collage > gog-logo-collage-photo + gog-logo-collage-logo Oud: gog-tientje-media > gog-tientje-image + gog-tientje-logo ========================================================= */ .gog-logo-collage, .gog-tientje-media { position: relative !important; --width: calc(51% - 41px) !important; width: calc(51% - 41px) !important; max-width: calc(51% - 41px) !important; min-height: 500px; flex: 0 0 calc(51% - 41px) !important; display: block !important; overflow: visible !important; isolation: isolate; } /* Subtiele gele ring achter de foto */ :is(.gog-logo-collage, .gog-tientje-media)::before { content: ""; position: absolute; top: 34px; right: 4px; z-index: -1; width: 150px; height: 150px; border: 30px solid rgba(253, 211, 65, .35); border-radius: 50%; } /* Grote foto */ .gog-logo-collage-photo, .gog-tientje-image { position: absolute !important; inset: 0 44px 34px 0; width: auto !important; margin: 0 !important; } :is(.gog-logo-collage-photo, .gog-tientje-image) .ui-widget-container { width: 100%; height: 100%; } :is(.gog-logo-collage-photo, .gog-tientje-image) img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 40px 40px 40px 120px; box-shadow: var(--gog-shadow); } .gog-logo-collage-logo, .gog-tientje-logo { position: absolute !important; right: 0; bottom: 0; z-index: 5; --width: 190px !important; width: 190px !important; min-height: 150px; margin: 0 !important; padding: 24px !important; display: flex !important; align-items: center !important; justify-content: center !important; border: 8px solid #ffffff; border-radius: 28px; background: var(--gog-yellow-soft); box-shadow: 0 18px 40px rgba(0, 55, 109, .16); } :is(.gog-logo-collage-logo, .gog-tientje-logo) .ui-widget-container { width: 100%; display: flex; align-items: center; justify-content: center; } :is(.gog-logo-collage-logo, .gog-tientje-logo) img { display: block; width: 100%; max-width: 145px; height: auto; max-height: 105px; object-fit: contain; } /* Knop in de tekstkolom (oude naam) */ .gog-tientje-button { --width: auto !important; width: auto !important; margin: 0 !important; } @media (max-width: 900px) { :is(.gog-logo-collage, .gog-tientje-media) { min-height: 440px; } :is(.gog-logo-collage-logo, .gog-tientje-logo) { --width: 165px !important; width: 165px !important; } } @media (max-width: 760px) { :is(.gog-logo-collage, .gog-tientje-media) { --width: 100% !important; width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; min-height: 430px; } :is(.gog-logo-collage-photo, .gog-tientje-image) { inset: 0 36px 30px 0; } :is(.gog-logo-collage-logo, .gog-tientje-logo) { --width: 155px !important; width: 155px !important; min-height: 125px; padding: 20px !important; border-width: 6px; } } @media (max-width: 460px) { :is(.gog-logo-collage, .gog-tientje-media) { min-height: 350px; } :is(.gog-logo-collage-photo, .gog-tientje-image) { inset: 0 28px 28px 0; } :is(.gog-logo-collage-photo, .gog-tientje-image) img { border-radius: 28px 28px 28px 80px; } :is(.gog-logo-collage-logo, .gog-tientje-logo) { --width: 135px !important; width: 135px !important; min-height: 110px; padding: 16px !important; } .gog-tientje-button { --width: 100% !important; width: 100% !important; } .gog-tientje-button .ui-button { width: 100%; justify-content: center; } } /* ========================================================= 11 · AFGERONDE AFBEELDING (nieuw) Eén losse foto in de huisstijl. Zet op een Afbeelding-widget. gog-image grote ronding rechtsonder + gog-image-alt grote ronding linksonder ========================================================= */ .gog-image { width: 100% !important; margin: 0 !important; } .gog-image img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: 40px 40px 120px 40px; box-shadow: var(--gog-shadow); } .gog-image-alt img { border-radius: 40px 40px 40px 120px; } @media (max-width: 460px) { .gog-image img { border-radius: 28px 28px 80px 28px; } .gog-image-alt img { border-radius: 28px 28px 28px 80px; } } /* ========================================================= 12 · VINKJESLIJST (Pictogramlijst-widget) ========================================================= */ .gog-check-list { width: 100% !important; margin: 12px 0 34px !important; } .gog-check-list .ui-icon-list-items { display: flex !important; flex-direction: column; gap: 14px; margin: 0 !important; padding: 0 !important; list-style: none; } .gog-check-list .ui-icon-list-item { display: flex; align-items: center; gap: 12px; margin: 0 !important; padding: 0 !important; } .gog-check-list .ui-icon-list-icon { width: 27px; height: 27px; flex: 0 0 27px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--gog-blue) !important; background: var(--gog-yellow-tint); } .gog-check-list .ui-icon-list-icon svg { width: 13px !important; height: 13px !important; fill: currentColor !important; } .gog-check-list .ui-icon-list-text { color: var(--gog-ink-soft) !important; font-size: 16px; font-weight: 600; } .gog-form { width: 100% !important; margin: 8px 0 0 !important; } .gog-form .ui-form-fields-wrapper { row-gap: 16px; } .gog-form .ui-field-group { margin-bottom: 0 !important; } .gog-form .ui-field-label { margin-bottom: 6px; color: var(--gog-ink); font-size: 14px; font-weight: 700; } .gog-form .ui-field-textual, .gog-form .ui-field-group .ui-field:not(.ui-select-wrapper):not([type="checkbox"]):not([type="radio"]) { width: 100%; min-height: 50px; padding: 12px 16px !important; border: 1px solid var(--gog-line) !important; border-radius: 14px !important; color: var(--gog-ink) !important; background: #ffffff !important; box-shadow: none !important; font-family: inherit; font-size: 16px !important; line-height: 1.4 !important; transition: border-color .18s ease, box-shadow .18s ease; } .gog-form textarea.ui-field { min-height: 140px; resize: vertical; } .gog-form .ui-field::placeholder { color: #8a9bb0; } .gog-form .ui-field:focus { outline: 0 !important; border-color: var(--gog-blue) !important; box-shadow: 0 0 0 3px rgba(253, 211, 65, .55) !important; } /* Verzendknop: zelfde vorm als gog-button */ .gog-form .ui-button { min-height: 52px; padding: 0 26px !important; border: 0 !important; border-radius: 999px !important; color: #ffffff !important; background: var(--gog-blue) !important; box-shadow: 0 10px 25px rgba(1, 75, 146, .22); font-family: var(--gog-font-button); font-size: 15px !important; font-weight: 700 !important; transition: transform .2s ease, background .2s ease; } .gog-form .ui-button:hover { transform: translateY(-2px); background: var(--gog-blue-dark) !important; } /* Akkoordvakje, selectievakjes en keuzerondjes */ .gog-form .ui-field-subgroup { display: flex; flex-direction: column; gap: 8px; } .gog-form .ui-field-option { display: flex !important; align-items: flex-start; gap: 10px; margin: 0 !important; } .gog-form .ui-field-option input[type="checkbox"], .gog-form .ui-field-option input[type="radio"] { flex: 0 0 20px; width: 20px !important; height: 20px !important; min-height: 0 !important; margin: 3px 0 0 !important; padding: 0 !important; accent-color: var(--gog-blue); cursor: pointer; } .gog-form .ui-field-option label { margin: 0 !important; color: var(--gog-ink); font-size: 14px; line-height: 1.5; cursor: pointer; } .gog-form .ui-field-option label a { color: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: var(--gog-yellow); text-underline-offset: 3px; } :is(.gog-block-blue, .gog-section-blue) .gog-form .ui-field-option input[type="checkbox"], :is(.gog-block-blue, .gog-section-blue) .gog-form .ui-field-option input[type="radio"] { accent-color: var(--gog-yellow); } .gog-form .ui-message { margin-top: 12px; font-size: 15px; } /* In blauw: witte labels, gele knop */ :is(.gog-block-blue, .gog-section-blue) .gog-form .ui-field-label, :is(.gog-block-blue, .gog-section-blue) .gog-form .ui-field-option label, :is(.gog-block-blue, .gog-section-blue) .gog-form .ui-message { color: #ffffff !important; } :is(.gog-block-blue, .gog-section-blue) .gog-form .ui-field-textual, :is(.gog-block-blue, .gog-section-blue) .gog-form .ui-field-group .ui-field:not(.ui-select-wrapper):not([type="checkbox"]):not([type="radio"]) { border-color: transparent !important; } :is(.gog-block-blue, .gog-section-blue) .gog-form .ui-button { color: #18324b !important; background: var(--gog-yellow) !important; box-shadow: 0 10px 25px rgba(239, 189, 19, .24); } :is(.gog-block-blue, .gog-section-blue) .gog-form .ui-button:hover { background: var(--gog-yellow-light) !important; } @media (max-width: 760px) { .gog-form .ui-field-type-submit, .gog-form .ui-button { width: 100% !important; } } /* ========================================================= 13 · BEZOEK-CTA (brede blauwe balk met foto) --------------------------------------------------------- gog-visit-cta > gog-visit-box (achtergrondfoto) > gog-visit-copy (eyebrow, titel, tekst) + gog-visit-button ========================================================= */ .gog-visit-cta { position: relative; --width: 100% !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 50px 0 !important; background: #ffffff; overflow: visible; } .gog-visit-box { position: relative; isolation: isolate; --width: min(1400px, calc(100% - 64px)) !important; width: min(1400px, calc(100% - 64px)) !important; max-width: 1400px !important; min-height: 360px; margin: 0 auto !important; padding: 64px !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 60px !important; border-radius: 34px; color: #ffffff; background-color: var(--gog-blue-dark); background-position: center !important; background-size: cover !important; background-repeat: no-repeat !important; overflow: hidden; box-shadow: var(--gog-shadow-box); } .gog-visit-box::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient( 90deg, rgba(0, 55, 109, .94) 0%, rgba(0, 55, 109, .88) 38%, rgba(0, 55, 109, .68) 70%, rgba(0, 55, 109, .58) 100% ); pointer-events: none; } .gog-visit-copy { position: relative; z-index: 2; --width: auto !important; width: auto !important; max-width: 690px !important; margin: 0 !important; flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 0 !important; text-align: left !important; } .gog-visit-copy > :is(.ui-element, .ui-con) { margin-left: 0 !important; margin-right: 0 !important; } .gog-visit-button { position: relative; z-index: 2; --width: auto !important; width: auto !important; flex: 0 0 auto !important; margin: 0 !important; } .gog-visit-button .ui-button { white-space: nowrap; } @media (max-width: 900px) { .gog-visit-box { padding: 52px 42px !important; gap: 30px !important; } } @media (max-width: 760px) { .gog-visit-cta { padding: 48px 0 !important; } .gog-visit-box { --width: calc(100% - 32px) !important; width: calc(100% - 32px) !important; max-width: none !important; min-height: 420px; padding: 42px 28px !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-end !important; gap: 28px !important; border-radius: 28px; } .gog-visit-box::before { background: linear-gradient( 180deg, rgba(0, 55, 109, .35) 0%, rgba(0, 55, 109, .66) 45%, rgba(0, 55, 109, .96) 100% ); } .gog-visit-copy { --width: 100% !important; width: 100% !important; max-width: 100% !important; } /* Knop blijft hier smal (overschrijft gog-button 100%) */ .gog-visit-button.gog-visit-button { --width: auto !important; width: auto !important; } .gog-visit-button .ui-button { width: auto; } } @media (max-width: 460px) { .gog-visit-box { min-height: 460px; padding: 34px 24px !important; } .gog-visit-title .ui-heading-title { font-size: 34px; } .gog-visit-button.gog-visit-button { --width: 100% !important; width: 100% !important; } .gog-visit-button .ui-button { width: 100%; justify-content: center; } } /* ========================================================= 14 · VIDEOHEADER --------------------------------------------------------- Container gog-video-header (oud: video-header) met als EERSTE element een HTML-widget met de