.kg-formulier {
max-width: 46rem;
}
.kg-formulier__velden {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
gap: var(--wp--preset--spacing--30);
}
.kg-veld {
display: flex;
flex-direction: column;
gap: 0.4rem;
margin: 0;
}
.kg-formulier__velden .kg-veld {
margin: 0;
}
.kg-veld--breed {
grid-column: 1 / -1;
}
.kg-veld label {
font-family: var(--wp--preset--font-family--display);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--kg-zacht);
}
.kg-veld label span {
text-transform: none;
letter-spacing: 0;
opacity: 0.7;
}
.kg-veld input,
.kg-veld select,
.kg-veld textarea {
padding: 1rem 1.1rem;
border: 1px solid var(--kg-rand);
border-radius: 0;
background: var(--kg-vlak);
color: var(--kg-tekst);
font: inherit;
font-size: 1.0625rem;
transition: border-color 0.15s ease, background-color 0.15s ease;
}
.kg-veld input:hover,
.kg-veld select:hover,
.kg-veld textarea:hover {
border-color: var(--kg-tekst);
}
.kg-veld input:focus,
.kg-veld select:focus,
.kg-veld textarea:focus {
border-color: var(--wp--preset--color--accent);
outline: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent) 22%, transparent);
}
.kg-veld select {
-webkit-appearance: none;
appearance: none;
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: right 1.35rem center, right 1.1rem center;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
padding-right: 2.6rem;
}
.kg-veld textarea {
resize: vertical;
min-height: 6rem;
}
.kg-veld--akkoord {
margin-top: 0.25rem;
padding: 0.9rem 1.1rem;
background: var(--kg-vlak-op);
}
.kg-veld--akkoord label {
flex-direction: row;
align-items: baseline;
gap: 0.6rem;
font-family: var(--wp--preset--font-family--body);
font-size: 0.9375rem;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
color: var(--kg-zacht);
display: flex;
}
.kg-veld--akkoord a {
color: var(--kg-rood);
}
.kg-veld--akkoord input {
width: auto;
padding: 0;
border: 0;
accent-color: var(--wp--preset--color--accent);
inline-size: 1.15rem;
block-size: 1.15rem;
}
.kg-honeypot {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.kg-formulier__velden button {
align-self: flex-start;
border: 0;
cursor: pointer;
font: inherit;
font-size: 1rem;
}
.kg-melding {
margin: 0 0 var(--wp--preset--spacing--40);
padding: 0.9rem 1.1rem;
border-left: 4px solid;
background: var(--kg-vlak-op);
font-size: var(--wp--preset--font-size--large);
}
.kg-melding.is-goed {
border-color: #3fa45b;
}
.kg-melding.is-fout {
border-color: var(--wp--preset--color--accent);
}
.kg-melding.is-fout::before {
content: "Let op: ";
font-weight: 700;
}
.kg-veld input[aria-invalid="true"],
.kg-veld select[aria-invalid="true"],
.kg-veld textarea[aria-invalid="true"] {
border-color: var(--wp--preset--color--accent);
}
.kg-veld__fout {
font-size: 0.9375rem;
line-height: 1.45;
color: var(--kg-tekst);
border-left: 3px solid var(--wp--preset--color--accent);
padding-left: 0.7rem;
}
.kg-veld--akkoord .kg-veld__fout {
display: block;
margin-top: 0.6rem;
}
.kg-veld__fout.is-tip {
border-left-color: var(--kg-rand);
color: var(--kg-zacht);
}