/* ============================================================ * FORMULIEREN * Sitebreed, niet blokgebonden: elk formulier op de site volgt * dezelfde regels als de rest. Vierkant, haarlijn, Archivo, labels * in meta-kapitalen. Kleuren komen uit --bg/--fg, dus een formulier * in een donker blok keert vanzelf mee om. * * Gravity Forms zet haar eigen stijlen ná de onze in de en zet er * op sommige plekken zelf !important op. Daarom staat alles hieronder op * !important: de opmaak van de site wint hier altijd van die van de * plugin. Wil je een veld ergens anders afwijkend maken, dan heb je ook * !important nodig — de tokens bovenaan (--field-*) staan bewust vrij, * dus die kun je wel gewoon per blok overschrijven. * ============================================================ */ :root{ /* Velden hebben een eigen lijnkleur. --lijn is bedoeld voor rustige scheidingen tussen inhoud; een rand waar je in moet typen mag steviger staan. */ --field-line: var(--lijn); --field-fill: transparent; --field-error: #c02b0a; } .bg-dark{ /* Op zwart is --lijn (#2e2e2e) niet te zien. Een veld moet je kunnen vinden voor je erin klikt, dus hier een toon die wel leest. */ --field-line: var(--fg-quiet); --field-error: #ff7a5e; } /* VELDEN Alles behalve knoppen en aankruisvakjes. De :is()-lijst tilt de specificiteit boven die van de plugin uit; de :where() eromheen telt niet mee en houdt de regel weg van bijvoorbeeld de cookiemelding. */ :where(main, .site-footer, .gform_wrapper) :is(input:not([type='submit']):not([type='button']):not([type='checkbox']):not([type='radio']):not([type='file']), select, textarea){ box-sizing: border-box !important; width: 100% !important; padding: 0.9em 1em !important; border: 1px solid var(--field-line) !important; border-radius: var(--border-radius-medium) !important; background-color: var(--field-fill) !important; color: var(--fg) !important; font-family: var(--font-text) !important; font-size: var(--p-size) !important; font-variation-settings: var(--vf-text) !important; line-height: 1.4 !important; transition: border-color var(--transition-fast) var(--ease) !important; } :where(main, .site-footer, .gform_wrapper) :is(input, select, textarea):focus{ outline: none !important; border-color: var(--fg) !important; } :where(main, .site-footer, .gform_wrapper) :is(input, textarea)::placeholder{ color: var(--fg-quiet) !important; opacity: 1 !important; } :where(main, .site-footer, .gform_wrapper) textarea{ min-height: 8rem !important; resize: vertical !important; } /* GRAVITY FORMS De plugin brengt haar eigen opmaak mee. Hieronder alleen wat afwijkt van de site; de rest van haar CSS (kolommen, states) blijft staan. */ .gform_wrapper.gform_wrapper.gravity-theme .gfield_label, .gform_wrapper.gform_wrapper.gravity-theme .gform-field-label{ margin-bottom: 0.6rem !important; font-size: var(--meta-size-small) !important; font-variation-settings: var(--vf-meta) !important; font-weight: normal !important; letter-spacing: 0.1em !important; line-height: 1.4 !important; text-transform: uppercase !important; color: var(--fg-quiet) !important; } /* "* Verplichte velden" boven het formulier: weg uit beeld, maar wel leesbaar voor een schermlezer. */ .gform_wrapper.gform_wrapper.gravity-theme .gform_required_legend{ position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } .gform_wrapper.gform_wrapper.gravity-theme .gfield_required{ color: var(--field-error) !important; font-size: inherit !important; } .gform_wrapper.gform_wrapper.gravity-theme .gform_fields{ row-gap: var(--gallery-gap) !important; } .gform_wrapper.gform_wrapper.gravity-theme .gfield_checkbox label, .gform_wrapper.gform_wrapper.gravity-theme .gfield_radio label, .gform_wrapper.gform_wrapper.gravity-theme .gchoice label{ font-size: var(--p-size) !important; color: var(--fg) !important; } .gform_wrapper.gform_wrapper.gravity-theme .gform_footer{ margin-top: var(--padding) !important; padding: 0 !important; } /* De knop erft de themastijl van button/input[type=submit] uit default.css; de plugin zet er alleen een hoogte en radius overheen. */ .gform_wrapper.gform_wrapper.gravity-theme .gform_footer button, .gform_wrapper.gform_wrapper.gravity-theme .gform_footer input[type='submit'], .gform_wrapper.gform_wrapper.gravity-theme .gform-button{ width: fit-content !important; height: auto !important; border-radius: var(--border-radius-medium) !important; } /* FOUTMELDINGEN — de plugin zet hier lichte vlakken met rode randen neer. Op een donkere achtergrond blijft daar niets van over, dus hier een variant die op beide achtergronden leest. */ .gform_wrapper.gform_wrapper.gravity-theme .gform_validation_errors, .gform_wrapper.gform_wrapper.gravity-theme .gfield_validation_message, .gform_wrapper.gform_wrapper.gravity-theme .validation_message{ box-shadow: none !important; border: 1px solid var(--field-error) !important; border-radius: var(--border-radius-medium) !important; background-color: transparent !important; color: var(--field-error) !important; font-size: var(--meta-size) !important; padding: 0.8em 1em !important; } .gform_wrapper.gform_wrapper.gravity-theme .gform_validation_errors > h2, .gform_wrapper.gform_wrapper.gravity-theme .gform_validation_errors > ol li, .gform_wrapper.gform_wrapper.gravity-theme .gform_validation_errors > ol a{ color: var(--field-error) !important; font-size: var(--meta-size) !important; } .gform_wrapper.gform_wrapper.gravity-theme .gfield_error :is(input, select, textarea){ border-color: var(--field-error) !important; } /* Bevestiging na verzenden. */ .gform_confirmation_message{ border: var(--hairline) !important; padding: var(--padding) !important; color: var(--fg) !important; } /* EIGEN AANKRUISVAKJE Het vakje van het besturingssysteem past nergens bij: afgeronde hoeken, een eigen blauw, en het negeert de achtergrond van het blok. Hieronder een vierkant met haarlijn dat aangevinkt vol loopt in de voorgrondkleur, met een vinkje in de achtergrondkleur. Zo klopt het op wit en op zwart. Valt het vinkje ooit weg, dan blijft het gevulde vlak de aangevinkte staat aangeven. */ :where(main, .site-footer, .gform_wrapper) :is(input[type='checkbox'], input[type='radio']){ appearance: none !important; -webkit-appearance: none !important; position: relative !important; flex: none !important; box-sizing: border-box !important; width: 1.15em !important; height: 1.15em !important; margin: 0 0.6em 0 0 !important; padding: 0 !important; border: 1px solid var(--field-line) !important; background-color: transparent !important; cursor: pointer !important; transition: background-color var(--transition-fast) var(--ease), border-color var(--transition-fast) var(--ease) !important; } :where(main, .site-footer, .gform_wrapper) input[type='checkbox']{ border-radius: var(--border-radius-small) !important; } /* Keuzerondjes blijven rond — dat is hun betekenis. */ :where(main, .site-footer, .gform_wrapper) input[type='radio']{ border-radius: 50% !important; } :where(main, .site-footer, .gform_wrapper) :is(input[type='checkbox'], input[type='radio']):hover{ border-color: var(--fg) !important; } :where(main, .site-footer, .gform_wrapper) :is(input[type='checkbox'], input[type='radio']):checked{ border-color: var(--fg) !important; background-color: var(--fg) !important; } :where(main, .site-footer, .gform_wrapper) :is(input[type='checkbox'], input[type='radio']):focus-visible{ outline: 1px solid var(--fg) !important; outline-offset: 2px !important; } /* Het vinkje: twee randen van een rechthoekje, een kwartslag gedraaid. Het pseudo-element bestaat alleen in aangevinkte staat — dat scheelt een opacity-schakelaar, en een lopende overgang kan de kleur dan niet meer vasthouden. */ :where(main, .site-footer, .gform_wrapper) input[type='checkbox']:checked::after{ content: '' !important; position: absolute !important; inset: 0 !important; margin: auto !important; width: 0.3em !important; height: 0.58em !important; border: solid var(--bg) !important; border-width: 0 1.5px 1.5px 0 !important; transform: translateY(-0.07em) rotate(45deg) !important; } /* De stip in het keuzerondje. */ :where(main, .site-footer, .gform_wrapper) input[type='radio']:checked::after{ content: '' !important; position: absolute !important; inset: 0 !important; margin: auto !important; width: 0.4em !important; height: 0.4em !important; border-radius: 50% !important; background-color: var(--bg) !important; } /* Het bijhorende label staat naast het vakje, niet eronder. */ .gform_wrapper.gform_wrapper.gravity-theme .gchoice{ display: flex !important; align-items: center !important; }