/* ============================================================================
MetanousUmbracoForms — default theme ("Crisp")
A clean, brand-neutral default. Everything is tokenised: override the
custom properties on `.mform` (or a wrapper) to retheme in one place, e.g.
.mform { --accent: #0ea5e9; --radius: 6px; }
All tokens are scoped to `.mform` so the package never pollutes the host
site's global custom-property namespace.
CASCADE: every rule below lives in the `mform` cascade layer. Unlayered CSS
always wins over a layer, so anything you write in your own (unlayered)
stylesheet overrides these defaults regardless of load order, source order,
or specificity — no `!important` and no higher-specificity selector needed.
This means your overrides work even though this file is injected after the
host's stylesheets.
DESIGN SOURCE: the visual design lives in a Claude Design project for this
package and covers every field type (incl. ones not yet built: password,
number stepper, range, rating, dropzone, etc.). When adding or restyling a
field type, check there for the intended look before inventing new styles.
(No URL here — handoff links are regenerated and go stale; ask the team for
the current one.)
============================================================================ */
@layer mform {
.mform {
/* — Accent (single hue; the rest derive from it via color-mix) — */
--accent: #4f46e5;
--accent-hover: color-mix(in srgb, var(--accent) 88%, #000);
--accent-press: color-mix(in srgb, var(--accent) 76%, #000);
--accent-soft: color-mix(in srgb, var(--accent) 16%, transparent); /* focus ring */
--accent-ghost: color-mix(in srgb, var(--accent) 8%, transparent); /* subtle fills */
/* — Neutrals (cool slate) — */
--ink: #181b23; /* labels / strong text */
--text: #3f4654; /* body */
--muted: #6b7385; /* help / secondary */
--faint: #9aa1b1; /* placeholders / disabled text */
--line: #d9dde6; /* default borders */
--line-strong: #bfc5d2; /* hover borders / checkbox outline */
--field-bg: #ffffff;
--field-fill: #f3f5f9; /* disabled field bg */
/* — Semantic — */
--error: #c8341b;
--error-soft: rgba(200, 52, 27, 0.10);
--error-line: #e0a99e;
--success: #167c4a;
--success-soft: rgba(22, 124, 74, 0.10);
--success-line: #9bc9ad;
/* — Geometry — */
--radius: 10px; /* fields & buttons */
--radius-sm: 7px;
--field-h: 48px;
--field-px: 14px;
--field-fs: 16px;
--gap: 22px; /* between rows (and the vertical gap if a row wraps) */
--col-gap: var(--gap); /* between columns within a row */
--label-gap: 8px; /* label → control */
/* — Motion — */
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--dur: 0.16s;
/* — Type (system stack; host typography wins) — */
--font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
/* — Inline icons (recoloured via mask) — */
--ic-alert: url('data:image/svg+xml;utf8,');
--ic-chevron: url('data:image/svg+xml;utf8,');
--ic-tick: url('data:image/svg+xml;utf8,');
/* — Form shell — */
display: flex;
flex-direction: column;
gap: var(--gap);
max-width: 40rem;
font-family: var(--font);
color: var(--text);
font-size: var(--field-fs);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.mform,
.mform *,
.mform *::before,
.mform *::after { box-sizing: border-box; }
/* ============================================================================
LAYOUT ROWS · COLUMNS
Each row is a 12-column grid; a field spans `--mf-col-span` columns (set inline
per field, default 12 = full width). Editors author rows + per-field widths in
the backoffice, so no host CSS is needed for multi-column layouts. Rows stack
vertically via the form's flex column; the column gap is themeable (`--col-gap`).
============================================================================ */
.mform-row {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--gap) var(--col-gap);
align-items: start;
}
/* ============================================================================
FIELD CLUSTER · LABELS · HELP · ERRORS
============================================================================ */
.mform-field {
display: flex;
flex-direction: column;
gap: var(--label-gap);
min-width: 0;
/* Column span within its row. Full width (12) is the default, so a field with no
inline `--mf-col-span` (and any field outside a row, e.g. the submit wrapper)
spans the whole row — preserving the single-column look. */
grid-column: span var(--mf-col-span, 12);
}
/* reCAPTCHA v3 is invisible — its field renders no markup (only Google's floating
badge, which is fixed-position on ). Collapse the empty wrapper, and any row
whose only field is the reCAPTCHA, so neither adds a stray gap to the layout. */
.mform-field--recaptcha { display: none; }
.mform-row:has(> .mform-field--recaptcha:only-child) { display: none; }
.mform-label {
font-size: 14px;
font-weight: 600;
color: var(--ink);
display: inline-flex;
align-items: center;
gap: 6px;
}
/* Required indicator */
.mform-required {
color: var(--error);
font-weight: 700;
line-height: 1;
}
/* Tooltip / help text */
.mform-tooltip {
font-size: 13px;
color: var(--muted);
margin: -2px 0 0;
}
/* Per-field validation error (emitted client-side; styled and ready) */
.mform-error {
font-size: 13px;
color: var(--error);
margin: 2px 0 0;
display: flex;
align-items: center;
gap: 6px;
font-weight: 500;
}
.mform-error::before {
content: "";
flex: 0 0 auto;
width: 14px;
height: 14px;
background: var(--error);
-webkit-mask: var(--ic-alert) center / contain no-repeat;
mask: var(--ic-alert) center / contain no-repeat;
}
/* ============================================================================
TEXT-LIKE CONTROLS (text, date, textarea, select)
============================================================================ */
.mform-input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
textarea.mform-input,
select.mform-input {
-webkit-appearance: none;
appearance: none;
width: 100%;
min-height: var(--field-h);
padding: calc(var(--field-px) / 2) var(--field-px);
font-family: var(--font);
font-size: var(--field-fs);
color: var(--ink);
/* background-COLOR, not the background shorthand: this rule's selector outweighs the
select chevron rule, and the shorthand would reset its background-image to none. */
background-color: var(--field-bg);
border: 1px solid var(--line);
border-radius: var(--radius);
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
outline: none;
}
textarea.mform-input {
min-height: 120px;
padding: 12px var(--field-px);
line-height: 1.55;
resize: vertical;
}
.mform-input::placeholder,
textarea.mform-input::placeholder { color: var(--faint); }
/* Hover */
.mform-input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover:not(:disabled):not(:read-only),
select.mform-input:hover:not(:disabled),
textarea.mform-input:hover:not(:disabled):not(:read-only) { border-color: var(--line-strong); }
/* Focus */
.mform-input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
select.mform-input:focus,
textarea.mform-input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
/* ============================================================================
SELECT (custom chevron)
============================================================================ */
select.mform-input:not([multiple]) {
padding-right: 40px;
background-image: var(--ic-chevron);
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 18px;
cursor: pointer;
}
/* Multi-select listbox (MultipleChoice rendered as a dropdown): drop the single-
select chevron and the fixed 48px height, let it grow with its rows, and turn
each option into a padded, rounded row that fills with the accent when selected
(the linear-gradient is the cross-browser way to force the option background). */
select.mform-input[multiple] {
min-height: auto;
padding: 6px;
background-image: none;
}
select.mform-input[multiple] option {
padding: 8px 10px;
border-radius: var(--radius-sm);
}
select.mform-input[multiple] option:checked {
background: var(--accent) linear-gradient(0deg, var(--accent), var(--accent));
color: #fff;
}
/* ============================================================================
FILE UPLOAD
Deliberately excluded from the text-control rules above, so the input keeps
its native, *box-less* look — no border, fill or padding around it. We only
restyle the native ::file-selector-button as a quiet secondary button that
lifts to the accent on hover (the "no file chosen" text sits beside it). No
JS, fully overridable. A richer drag-and-drop dropzone is a possible future
field type (see the design source in the file header).
============================================================================ */
input.mform-input[type="file"] {
width: 100%;
color: var(--muted);
font-size: 14px;
cursor: pointer;
}
input.mform-input[type="file"]::file-selector-button {
padding: 8px 16px;
margin-right: 12px;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
color: var(--ink);
font-family: var(--font);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
input.mform-input[type="file"]::file-selector-button:hover {
background: var(--accent-ghost);
border-color: var(--accent);
color: var(--accent);
}
/* No box around the input, so drop its native focus outline; surface keyboard
focus on the button instead (mouse clicks don't trigger :focus-visible). */
input.mform-input[type="file"]:focus { outline: none; }
input.mform-input[type="file"]:focus-visible::file-selector-button {
border-color: var(--accent);
}
input.mform-input[type="file"]:disabled { cursor: not-allowed; }
input.mform-input[type="file"]:disabled::file-selector-button { opacity: 0.5; cursor: not-allowed; }
/* ============================================================================
CHECKBOX & RADIO (custom-drawn on the native input)
============================================================================ */
.mform-input[type="checkbox"],
.mform-input[type="radio"] {
-webkit-appearance: none;
appearance: none;
flex: 0 0 auto;
width: 20px;
height: 20px;
margin: 0;
border: 1.5px solid var(--line-strong);
background: var(--field-bg);
cursor: pointer;
transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
display: inline-grid;
place-content: center;
/* Suppress the native focus outline; the :focus-visible box-shadow below is the
focus ring, matching the text controls (which also reset outline). */
outline: none;
}
.mform-input[type="checkbox"] { border-radius: 6px; }
.mform-input[type="radio"] { border-radius: 50%; }
.mform-input[type="checkbox"]:hover,
.mform-input[type="radio"]:hover { border-color: var(--accent); }
.mform-input[type="checkbox"]:checked,
.mform-input[type="radio"]:checked { background: var(--accent); border-color: var(--accent); }
.mform-input[type="checkbox"]:checked {
background-image: var(--ic-tick);
background-size: 13px;
background-position: center;
background-repeat: no-repeat;
}
.mform-input[type="radio"]:checked::after {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: #fff;
}
.mform-input[type="checkbox"]:focus-visible,
.mform-input[type="radio"]:focus-visible { box-shadow: 0 0 0 3px var(--accent-soft); }
.mform-input[type="checkbox"]:disabled,
.mform-input[type="radio"]:disabled { opacity: 0.5; cursor: not-allowed; background: var(--field-fill); }
/* A single checkable row:
align-self:start stops the parent flex column (align-items:stretch) from widening the
label to the full field, so only the box + text are clickable — not the empty space beside. */
.mform-label:has(> .mform-input[type="checkbox"]),
.mform-label:has(> .mform-input[type="radio"]) {
font-weight: 500;
color: var(--text);
cursor: pointer;
align-self: start;
}
/* ============================================================================
CHOICE GROUP (fieldset of radios/checkboxes — MultipleChoice)
============================================================================ */
.mform fieldset {
border: 0;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.mform fieldset > legend.mform-label,
.mform fieldset > .mform-label { margin-bottom: 2px; }
.mform fieldset label {
display: flex;
align-items: center;
gap: 10px;
font-size: 15px;
font-weight: 500;
color: var(--text);
cursor: pointer;
/* Same as the single checkable row: don't stretch to the fieldset width, so clicking
beside an option's text doesn't toggle it. */
align-self: start;
}
/* ============================================================================
VALIDATION ERROR STATE (mform.js sets aria-invalid on the failing control)
============================================================================ */
.mform-input[aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select.mform-input[aria-invalid="true"],
textarea.mform-input[aria-invalid="true"] { border-color: var(--error); }
.mform-input[aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
select.mform-input[aria-invalid="true"]:focus,
textarea.mform-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--error-soft); }
.mform-input[type="checkbox"][aria-invalid="true"],
.mform-input[type="radio"][aria-invalid="true"] { border-color: var(--error); }
/* ============================================================================
DISABLED / READ-ONLY
============================================================================ */
.mform-input:disabled:not([type="file"]),
select.mform-input:disabled,
textarea.mform-input:disabled {
background: var(--field-fill);
color: var(--faint);
cursor: not-allowed;
border-color: var(--line);
}
/* Scoped to (not the .mform-input class): a