/* Gravity Forms in de Falqon-huisstijl. De eigen stylesheet van Gravity Forms staat uit (Forms -> Settings -> Output CSS), dus dit is de volledige opmaak. De opmaak hangt onder .gform_wrapper, het element dat Gravity Forms zelf om ieder formulier zet. Daardoor werkt het met de gewone shortcode van de plugin, [gravityform id="3"], en hoeft de redactie niets van het thema te weten. Maakt de klant een nieuw formulier aan, dan staat het meteen goed. Het werkt daarmee ook nog steeds onder [fq_form slot="..."], want daar zit dezelfde .gform_wrapper in. Die schil is nu een keuze, geen voorwaarde. Bij het aanpassen: de weging van de selectors is met opzet gelijk gehouden aan de vorige versie (.gform_wrapper was een klasse, .gform_wrapper is dat ook), zodat dezelfde regels blijven winnen van Gravity Forms zelf. */ .gform_wrapper.gform_wrapper{font-family:Inter,sans-serif;color:#F6F3EC} .gform_wrapper form{margin:0} .gform_wrapper .gform_fields{list-style:none;margin:0;padding:0;display:block} .gform_wrapper .gfield{margin:0 0 24px;padding:0;border:0;min-width:0} .gform_wrapper .gform_fields>.gfield:last-child{margin-bottom:0} .gform_wrapper .gfield_visibility_hidden, .gform_wrapper .gform_hidden, .gform_wrapper .gfield--type-honeypot, .gform_wrapper .gform_validation_container{display:none!important} /* labels */ .gform_wrapper .gfield_label{display:block;font-family:Inter,sans-serif;font-size:14px;line-height:20px;font-weight:300;letter-spacing:.75px;text-transform:uppercase;color:#F6F3EC;margin:0 0 8px;padding:0} .gform_wrapper legend.gfield_label{width:100%} /* de paginakleur voor label won van de eigen kleur */ .gform_wrapper.gform_wrapper .gfield>.gfield_label, .gform_wrapper.gform_wrapper .gfield>.gfield_label .gform-field-label__text{color:#F6F3EC!important} .gform_wrapper .hidden_label>.gfield_label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .gform_wrapper .gfield_required_text{font-size:0;line-height:0} .gform_wrapper .gfield_required_text::after{content:"*";font-size:14px;line-height:20px;color:rgba(255,0,0,.64)} /* velden */ .gform_wrapper input[type=text], .gform_wrapper input[type=email], .gform_wrapper input[type=tel], .gform_wrapper input[type=url], .gform_wrapper input[type=number], .gform_wrapper select, .gform_wrapper textarea{display:block;box-sizing:border-box;width:100%;max-width:100%;height:48px;min-height:48px;padding:11px 16px;font-family:Inter,sans-serif;font-size:16px;line-height:24px;font-weight:400;color:#F6F3EC;background-color:rgba(246,243,236,.08);background-image:none;border:1px solid rgba(246,243,236,.08);border-radius:8px;margin:0;box-shadow:none;outline:none;transition:border-color .2s ease} .gform_wrapper textarea{height:104px;min-height:104px;resize:none;padding-top:12px} .gform_wrapper input:focus, .gform_wrapper select:focus, .gform_wrapper textarea:focus{border-color:rgba(25,231,156,.64)} .gform_wrapper ::placeholder{color:rgba(246,243,236,.4);opacity:1} .gform_wrapper select{-webkit-appearance:none;appearance:none;padding-right:48px} .gform_wrapper select:invalid, .gform_wrapper select:has(option.gf_placeholder:checked){color:rgba(246,243,236,.48)} .gform_wrapper select option{background:#060830;color:#F6F3EC} .gform_wrapper .ginput_container_select{position:relative} .gform_wrapper .ginput_container_select::after{content:"";position:absolute;right:19px;bottom:19px;width:9px;height:9px;border-right:1.5px solid #19E79C;border-bottom:1.5px solid #19E79C;transform:rotate(45deg);pointer-events:none} .gform_wrapper .ginput_container_fileupload input[type=file]{display:block;width:100%;box-sizing:border-box;padding:11px 16px;font-family:Inter,sans-serif;font-size:14px;line-height:24px;color:rgba(246,243,236,.72);background:rgba(246,243,236,.08);border:1px dashed rgba(246,243,236,.24);border-radius:8px} .gform_wrapper .ginput_container_fileupload input[type=file]::file-selector-button{margin-right:12px;padding:6px 12px;border:0;border-radius:6px;background:rgba(246,243,236,.16);color:#F6F3EC;font-family:Inter,sans-serif;font-size:14px;cursor:pointer} .gform_wrapper .gform_fileupload_rules, .gform_wrapper .gfield_description{font-family:Inter,sans-serif;font-size:14px;line-height:20px;color:rgba(246,243,236,.64);margin:8px 0 0;padding:0} /* aanvinkvakjes */ .gform_wrapper .gfield_checkbox, .gform_wrapper .gfield_radio{margin:0;padding:0;list-style:none} .gform_wrapper .gchoice{display:flex;align-items:flex-start;gap:12px;margin:0 0 12px;padding:0} .gform_wrapper .gchoice:last-child{margin-bottom:0} .gform_wrapper .gfield--type-checkbox{margin-bottom:16px} .gform_wrapper input[type=checkbox], .gform_wrapper input[type=radio]{-webkit-appearance:none;appearance:none;flex:0 0 20px;width:20px;height:20px;margin:2px 0 0;padding:0;border-radius:6px;background:rgba(246,243,236,.08);border:1px solid rgba(246,243,236,.08);position:relative;cursor:pointer;transition:background-color .15s ease,border-color .15s ease} .gform_wrapper input[type=radio]{border-radius:50%} .gform_wrapper input[type=checkbox]:checked, .gform_wrapper input[type=radio]:checked{background:#19E79C;border-color:#19E79C} .gform_wrapper input[type=checkbox]:checked::after{content:"";position:absolute;left:6.5px;top:3px;width:5px;height:9px;border:solid #01021E;border-width:0 2px 2px 0;transform:rotate(45deg)} .gform_wrapper input[type=radio]:checked::after{content:"";position:absolute;left:6px;top:6px;width:6px;height:6px;border-radius:50%;background:#01021E} .gform_wrapper input[type=checkbox]:hover, .gform_wrapper input[type=radio]:hover{border-color:rgba(246,243,236,.32)} .gform_wrapper input[type=checkbox]:focus-visible, .gform_wrapper input[type=radio]:focus-visible{outline:2px solid #19E79C;outline-offset:2px} .gform_wrapper .gchoice label{font-family:Inter,sans-serif;font-size:16px;line-height:24px;font-weight:400;letter-spacing:0;text-transform:none;color:#F6F3EC;margin:0;padding:0} .gform_wrapper .gchoice label a{color:inherit;text-decoration:underline} /* verzendknop */ .gform_wrapper .gform_footer{margin:32px 0 0;padding:0} .gform_wrapper .gform_button{display:inline-flex;align-items:center;gap:8px;height:40px;padding:8px 16px;font-family:Inter,sans-serif;font-size:14px;line-height:24px;font-weight:500;background:#F6F3EC;color:#01021E;border:0;border-radius:8px;box-shadow:inset 0 1px 0 rgba(246,243,236,.16),inset 0 -1px 0 rgba(246,243,236,.08);cursor:pointer;transition:background-color .2s ease,color .2s ease,transform .2s ease} .gform_wrapper .gform_button::before{content:"";width:18px;height:8px;flex:0 0 18px;background:url("https://falqon.tp-dev.nl/wp-content/uploads/2026/08/tag-wave-icon.svg") center/contain no-repeat} .gform_wrapper .gform_button.gform_button.gform_button.gform_button:hover, .gform_wrapper .gform_button.gform_button.gform_button.gform_button:focus{background:#19E79C;color:#01021E;transform:translateY(-1px)} .gform_wrapper .gform_button [data-button-animate-chars]{line-height:1.3;white-space:nowrap} .gform_wrapper .gform_ajax_spinner{margin-left:12px;width:20px;height:20px;vertical-align:middle} /* foutmeldingen */ .gform_wrapper .gfield_error input, .gform_wrapper .gfield_error select, .gform_wrapper .gfield_error textarea{border-color:rgba(242,86,91,.72)} .gform_wrapper .validation_message, .gform_wrapper .gfield_validation_message{font-family:Inter,sans-serif;font-size:14px;line-height:20px;color:#F2565B;margin:8px 0 0;padding:0;background:none;border:0} .gform_wrapper .gform_validation_errors{margin:0 0 24px;padding:16px;border:1px solid rgba(242,86,91,.32);border-radius:8px;background:rgba(242,86,91,.12)} .gform_wrapper .gform_validation_errors h2, .gform_wrapper .gform_validation_errors .gform_submission_error{font-family:Inter,sans-serif;font-size:16px;line-height:24px;font-weight:400;color:#F2565B;margin:0} .gform_wrapper .gform_validation_errors ol{margin:8px 0 0;padding-left:20px} .gform_wrapper .gform_validation_errors a{color:#F2565B} /* bevestiging na verzenden - stond donker op donker */ .gform_wrapper .gform_confirmation_wrapper{margin:0} .gform_wrapper .gform_confirmation_message, .gform_wrapper .gform_confirmation_message p, .gform_wrapper .gform_confirmation_message li{font-family:Inter,sans-serif;font-size:16px;line-height:24px;color:#F6F3EC} .gform_wrapper .gform_confirmation_message{display:flex;align-items:flex-start;gap:12px;margin:0;padding:20px 24px;border-radius:8px;background:rgba(25,231,156,.10);box-shadow:inset 0 0 0 1px rgba(25,231,156,.32)} .gform_wrapper .gform_confirmation_message::before{content:"";flex:0 0 18px;width:18px;height:8px;margin-top:8px;background:url("https://falqon.tp-dev.nl/wp-content/uploads/2026/08/tag-wave-icon.svg") center/contain no-repeat} .gform_wrapper .gform_confirmation_message p{margin:0} .gform_wrapper .gform_confirmation_message a{color:#19E79C} /* in de lade staat de knop over de volle breedte */ .fq-drawer .fq-form, .fq-drawer .gform_wrapper{width:100%} .fq-drawer .gform_wrapper .gform_footer{margin:32px 0 0;width:100%} .fq-drawer .gform_wrapper .gform_button{width:100%;justify-content:center} .fq-drawer .gform_wrapper .gform_title, .fq-drawer .gform_wrapper .gform_description{display:none} .fq-drawer .gform_wrapper .gform_confirmation_message{padding:16px} /* uploadveld: de knop 'Select files' kwam ongestyled uit hello-elementor en stond daardoor in het roze van de themareset. Nu dezelfde secundaire knop als elders. */ .gform_wrapper .gform_drop_area{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:16px;border:1px dashed rgba(246,243,236,.24);border-radius:8px;background:rgba(246,243,236,.04);font-family:Inter,sans-serif;font-size:14px;line-height:20px;color:#F6F3ECA3} .gform_wrapper .gform_button_select_files{background:rgba(246,243,236,.08)!important;color:#F6F3EC!important;border:1px solid rgba(246,243,236,.16)!important;border-radius:8px!important;padding:8px 16px!important;font-family:Inter,sans-serif!important;font-size:14px!important;line-height:20px!important;font-weight:500!important;cursor:pointer;transition:background .2s ease,border-color .2s ease} .gform_wrapper .gform_button_select_files:hover, .gform_wrapper .gform_button_select_files:focus{background:rgba(246,243,236,.16)!important;color:#F6F3EC!important;border-color:rgba(246,243,236,.24)!important} .gform_wrapper .gform_fileupload_rules, .gform_wrapper .gform_delete_file{font-family:Inter,sans-serif;font-size:13px;line-height:18px;color:#F6F3EC80} .gform_wrapper .gfield_required{color:#19E79C} /* ── veldtypen die nog niet in de huisstijl stonden ───────────────────────── De opmaak hierboven dekt de velden die in formulier 1 tot en met 4 zitten. Maakt de redactie een nieuw formulier met een ander veldtype, dan viel dat terug op de standaard van de browser, omdat de eigen stylesheet van Gravity Forms uit staat. Hieronder de types die daarbij het meest opvallen. */ /* Multi Select. Gravity Forms rendert