/* * All of Maple Forms' default styling lives in the `maple-forms` cascade * layer. Any UNLAYERED CSS a theme, a Site Kit pattern, or a site owner's * Custom CSS writes therefore wins over these defaults WITHOUT needing * !important — layered styles always lose to unlayered ones, regardless of * specificity. The per-form theme block (ThemeStyles) joins this same layer, * so an admin's saved theme still beats these file defaults (higher * specificity within the layer) while staying overridable from outside. * Note: this also means a theme's bare-element rules (e.g. `input { ... }`) * now reach form fields — intended, so forms can inherit the site's look. */ @layer maple-forms { /* box-sizing: scoped so inputs/buttons with horizontal padding stay inside the form's content box. Without this, `width: 100%` + padding on `.maple-form__input` overflows the parent column/group. */ .maple-form, .maple-form *, .maple-form *::before, .maple-form *::after { box-sizing: border-box; } .maple-form { max-width: 640px; margin: 0 auto; padding: 1.25rem 1.5rem; } /* Gutenberg block alignment: when the block is inserted with align=wide / align=full, the Form Renderer appends the alignwide / alignfull class to the .maple-form wrapper. Relax the default 640px cap so the form actually fills the available width. FSE themes set --wp--style--global--wide-size (~1200px on TT4 / TT5); the fallback covers Classic themes. */ .maple-form.alignwide { max-width: var(--wp--style--global--wide-size, 1200px); } .maple-form.alignfull { max-width: 100%; } @media (max-width: 480px) { .maple-form { padding: 1rem; } } .maple-form__field { margin-bottom: 1rem; } .maple-form__label { display: block; margin-bottom: 0.5rem; font-weight: 700; font-size: 1.25rem; color: #1d2327; line-height: 1.3; } .maple-form__required { color: #b32d2e; margin-left: 0.125rem; } .maple-form__input { width: 100%; padding: 0.875rem 1rem; border: 1px solid #555; border-radius: 6px; font-size: 1.25rem; line-height: 1.4; color: #1d2327; background: #fff; } .maple-form__input:focus { border-color: #066aab; outline: 2px solid #066aab; outline-offset: 1px; box-shadow: 0 0 0 2px rgba(6,106,171,0.2); } .maple-form__field--has-error .maple-form__input { border-color: #b32d2e; } .maple-form__field-error { display: block; margin-top: 0.25rem; color: #b32d2e; font-size: 1.0625rem; } .maple-form__field-error::before { content: "\26A0 "; } .maple-form__submit { margin-top: 1.75rem; text-align: center; } .maple-form__button { padding: 0.875rem 2rem; background: #066aab; color: #fff; border: none; border-radius: 6px; font-size: 1.25rem; font-weight: 700; line-height: 1.3; cursor: pointer; } .maple-form__button:hover { background: #055a8a; } .maple-form__button:focus { outline: 2px solid #066aab; outline-offset: 2px; } .maple-form__errors { border: 1px solid #b32d2e; background: #fbeaea; color: #1d2327; padding: 0.875rem 1.125rem; margin-bottom: 1rem; border-radius: 4px; font-size: 1.125rem; } .maple-form__errors ul { margin: 0; padding-left: 1.25rem; } .maple-form__confirmation { border: 1px solid #2a6f40; background: #eaf6ed; color: #1d2327; padding: 0.875rem 1.125rem; margin-bottom: 1rem; border-radius: 4px; font-size: 1.125rem; } .maple-form__info-heading { margin: 0 0 0.5rem; font-size: 1.5rem; font-weight: 700; color: #1d2327; } .maple-form__info-paragraph { color: #1d2327; font-size: 1.1875rem; line-height: 1.55; } .maple-form__info-paragraph p { margin: 0 0 0.75rem; } .maple-form__info-paragraph p:last-child { margin-bottom: 0; } .maple-form__image { margin: 0 0 1rem; } .maple-form__image img { max-width: 100%; height: auto; display: block; border-radius: 6px; } .maple-form__image figcaption { margin-top: 0.375rem; font-size: 1rem; color: #50575e; } .maple-form__external-url-wrap { text-align: center; margin: 0.5rem 0; } .maple-form__button--external { display: inline-flex; align-items: center; gap: 0.375rem; text-decoration: none; } .maple-form__agreement { gap: 0.5rem; } .maple-form__agreement-item { padding: 0.375rem 0; } .maple-form__confirmation p { margin: 0 0 0.5rem; } .maple-form__entry-preview { width: 100%; margin-top: 0.75rem; border-collapse: collapse; background: rgba(255,255,255,0.6); border-radius: 4px; overflow: hidden; } .maple-form__entry-preview th, .maple-form__entry-preview td { padding: 0.625rem 0.875rem; text-align: left; border-bottom: 1px solid #d9ead3; font-size: 1.125rem; } .maple-form__entry-preview th { font-weight: 700; width: 35%; vertical-align: top; } .maple-form__entry-preview tr:last-child th, .maple-form__entry-preview tr:last-child td { border-bottom: none; } .maple-form__input--textarea { min-height: 9rem; font-family: inherit; } .maple-form__input--select { appearance: auto; } .maple-form__input--range { padding: 0; } .maple-form__input--file { padding: 0.5rem; background: #fff; } .maple-form__choices { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.25rem 0; } .maple-form__choice { display: flex; align-items: center; gap: 0.625rem; color: #1d2327; cursor: pointer; font-weight: 400; font-size: 1.1875rem; line-height: 1.4; } .maple-form__choice input { margin: 0; width: 1.125rem; height: 1.125rem; } .maple-form__stub { display: flex; align-items: center; gap: 0.5rem; padding: 0.875rem 1.125rem; background: #f5f7fa; border: 1px dashed #8c8f94; border-radius: 4px; color: #50575e; font-size: 1.125rem; } .maple-form__stub-icon { color: #2271b1; } .maple-form__stub-note { flex: 1; } .maple-form__divider-label { margin: 0 0 0.25rem; font-size: 1.375rem; color: #1d2327; } .maple-form__divider-line { border: 0; border-top: 1px solid #c3c4c7; margin: 0.5rem 0; } .maple-form__description { display: block; margin-top: 0.25rem; color: #50575e; font-size: 1rem; line-height: 1.45; } .maple-form__field--size-small .maple-form__input { max-width: 14rem; } .maple-form__field--size-medium .maple-form__input { max-width: 100%; } .maple-form__field--size-large .maple-form__input { max-width: 100%; padding: 1rem 1.125rem; font-size: 1.375rem; } .maple-form__field--hidden-by-logic { display: none !important; } .maple-form__name { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .maple-form__name-part { display: flex; flex-direction: column; } .maple-form__name-sublabel { margin-top: 0.25rem; font-size: 1rem; color: #50575e; } /* Page break marker — visible in the admin preview only. */ .maple-form__pagebreak-marker { display: flex; align-items: center; gap: 0.75rem; margin: 1rem 0; } .maple-form__pagebreak-line { flex: 1; height: 1px; background: #c3c4c7; } .maple-form__pagebreak-text { font-size: 0.9375rem; color: #50575e; font-style: italic; white-space: nowrap; } /* ── Multi-step (Page Break) ───────────────────────────────── Pages render stacked; JS hides everything but the active one. Without JS, all pages stay visible and only the Submit button is reachable (Next/Prev are useless without state). */ .maple-form__page { display: block; } .maple-form__page-title { margin: 0 0 1rem; font-size: 1.5rem; font-weight: 700; color: #1d2327; } .maple-form__page[hidden] { display: none; } /* JS-on default: hide pages 2+ until JS toggles them. */ .maple-form__form--multi-step .maple-form__page--hidden-by-default { display: none; } .maple-form__nav { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin-top: 1.75rem; flex-wrap: wrap; } .maple-form__nav .maple-form__button { margin: 0; } .maple-form__nav-prev { margin-right: auto; } .maple-form__nav-submit { margin-left: auto; } .maple-form__button--secondary { background: transparent; color: #066aab; border: 2px solid #066aab; } .maple-form__button--secondary:hover { background: #eef6fc; } .maple-form__progress { margin-bottom: 1.5rem; } .maple-form__progress-track { width: 100%; height: 8px; background: #e5e7eb; border-radius: 4px; overflow: hidden; } .maple-form__progress-fill { height: 100%; background: #066aab; transition: width 0.25s ease; } .maple-form__progress-label { margin-top: 0.5rem; font-size: 1rem; color: #50575e; text-align: right; } /* No-JS fallback: show every page and the Submit button so the form is at least submittable, then hide the wizard chrome since it can't function without state. */ .maple-form__form--multi-step:not([data-mf-js-ready]) { /* hook for future detection */ } /* ── NPS (Net Promoter Score) ──────────────────────────────── Standard 0–10 scale with the canonical colour bands: red 0–6 (detractors), yellow 7–8 (passives), green 9–10 (promoters). The radios are visually hidden; their labels become the clickable colour-coded buttons. */ .maple-form__nps { padding: 0.5rem 0; } .maple-form__nps-scale { display: flex; gap: 0.375rem; flex-wrap: wrap; justify-content: center; } .maple-form__nps-input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .maple-form__nps-button { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; height: 2.75rem; padding: 0 0.5rem; border-radius: 6px; font-weight: 700; font-size: 1.125rem; cursor: pointer; color: #1d2327; border: 2px solid transparent; transition: transform 0.1s ease, box-shadow 0.1s ease; user-select: none; } .maple-form__nps-button:hover { transform: translateY(-1px); } .maple-form__nps-button--detractor { background: #fbeaea; } .maple-form__nps-button--passive { background: #fef6e4; } .maple-form__nps-button--promoter { background: #eaf6ed; } .maple-form__nps-input:checked + .maple-form__nps-button--detractor { background: #b32d2e; color: #fff; border-color: #1d2327; } .maple-form__nps-input:checked + .maple-form__nps-button--passive { background: #b88a00; color: #fff; border-color: #1d2327; } .maple-form__nps-input:checked + .maple-form__nps-button--promoter { background: #2a6f40; color: #fff; border-color: #1d2327; } /* WCAG 1.4.1: don't rely on colour alone for the selected state. A high-contrast border + a small checkmark badge identify the picked value even for colour-blind / monochrome viewers. */ .maple-form__nps-input:checked + .maple-form__nps-button::after { content: "✓"; position: absolute; top: -0.375rem; right: -0.375rem; width: 1.125rem; height: 1.125rem; background: #1d2327; color: #fff; border-radius: 50%; font-size: 0.75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; } .maple-form__nps-input:focus-visible + .maple-form__nps-button { outline: 2px solid #066aab; outline-offset: 2px; } .maple-form__nps-labels { display: flex; justify-content: space-between; margin-top: 0.5rem; font-size: 0.9375rem; color: #50575e; } /* ── Likert matrix ─────────────────────────────────────────── Statements in rows, scale points in columns. End columns get the configured "Strongly Disagree / Strongly Agree" labels; middle columns just show the number. On narrow screens the table allows horizontal scrolling rather than collapsing. */ .maple-form__likert { overflow-x: auto; } .maple-form__likert-table { width: 100%; border-collapse: collapse; min-width: 30rem; } .maple-form__likert-corner { background: transparent; border: none; } .maple-form__likert-col-head { padding: 0.5rem 0.375rem; vertical-align: bottom; text-align: center; font-weight: 400; } .maple-form__likert-col-num { display: block; font-weight: 700; font-size: 1rem; color: #1d2327; } .maple-form__likert-col-label { display: block; margin-top: 0.25rem; font-size: 0.875rem; color: #50575e; line-height: 1.3; } .maple-form__likert-row-head { padding: 0.75rem 0.875rem 0.75rem 0; text-align: left; font-weight: 600; color: #1d2327; font-size: 1.0625rem; vertical-align: middle; width: 40%; } .maple-form__likert-cell { padding: 0.5rem 0.375rem; text-align: center; vertical-align: middle; } .maple-form__likert-cell input[type="radio"] { width: 1.25rem; height: 1.25rem; cursor: pointer; } .maple-form__likert-table tbody tr:nth-child(even) { background: #f6f7f7; } /* ── Entry Preview ─────────────────────────────────────────── "Review your answers" block, ideally placed on the last page of a multi-step form. Renders as a labelled
that live-updates from every other field's current value. */ .maple-form__entrypreview { padding: 1rem 1.25rem; background: #f6f7f7; border: 1px solid #e5e7eb; border-radius: 6px; } .maple-form__entrypreview-heading { margin: 0 0 0.75rem; font-size: 1.25rem; font-weight: 700; color: #1d2327; } .maple-form__entrypreview-list { margin: 0; padding: 0; display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: 0.375rem 1rem; } .maple-form__entrypreview-label { margin: 0; font-weight: 700; color: #1d2327; font-size: 1rem; } .maple-form__entrypreview-value { margin: 0; color: #1d2327; font-size: 1rem; word-break: break-word; } .maple-form__entrypreview-empty { grid-column: 1 / -1; margin: 0; color: #50575e; font-style: italic; font-size: 1rem; } /* ── Camera capture ────────────────────────────────────────── The trigger is a labelled button that proxies the hidden file input. After capture we show a thumbnail preview and a Remove button, and the data URL lives in the hidden input behind it. */ .maple-form__camera { display: flex; flex-direction: column; gap: 0.625rem; } .maple-form__camera-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem 1.25rem; background: #066aab; color: #fff; border-radius: 6px; font-size: 1.125rem; font-weight: 700; cursor: pointer; transition: background 0.15s ease; } .maple-form__camera-trigger:hover { background: #055a8a; } .maple-form__camera-trigger .dashicons { font-size: 1.5rem; width: 1.5rem; height: 1.5rem; } .maple-form__camera-trigger:focus-within { outline: 2px solid #066aab; outline-offset: 2px; } .maple-form__camera-file { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .maple-form__camera-preview { display: block; max-width: 100%; } .maple-form__camera-preview img { max-width: 100%; max-height: 320px; height: auto; display: block; border-radius: 6px; border: 1px solid #c3c4c7; } .maple-form__camera-clear { background: transparent; border: none; padding: 0.25rem 0.625rem; color: #b32d2e; font-size: 1rem; cursor: pointer; text-decoration: underline; align-self: flex-start; } .maple-form__camera-clear:hover { color: #8a1622; } /* ── Rich Text editor ──────────────────────────────────────── contenteditable + a thin toolbar of formatting buttons. The editor is sized to the configured min-height; placeholder shows via :empty + ::before only when the visitor hasn't typed anything yet (the JS toggles a `--empty` class to keep the rule predictable across browsers). */ .maple-form__richtext { display: flex; flex-direction: column; border: 1px solid #555; border-radius: 6px; background: #fff; overflow: hidden; } .maple-form__richtext-toolbar { display: flex; align-items: center; gap: 0.125rem; padding: 0.375rem 0.5rem; background: #fafbfc; border-bottom: 1px solid #e5e7eb; flex-wrap: wrap; } .maple-form__richtext-btn { background: transparent; border: 1px solid transparent; border-radius: 4px; padding: 0.25rem 0.5rem; font-size: 1rem; line-height: 1; cursor: pointer; color: #1d2327; min-width: 1.875rem; } .maple-form__richtext-btn:hover { background: #ffffff; border-color: #c3c4c7; } .maple-form__richtext-btn:active { background: #eef6fc; } .maple-form__richtext-btn:focus-visible { outline: 2px solid #066aab; outline-offset: 1px; } .maple-form__richtext-sep { width: 1px; height: 1.25rem; background: #c3c4c7; margin: 0 0.25rem; } .maple-form__richtext-editor { padding: 0.875rem 1rem; font-size: 1.125rem; line-height: 1.55; color: #1d2327; outline: none; } .maple-form__richtext-editor:focus { outline: none; box-shadow: inset 0 0 0 2px rgba(6,106,171,0.2); } .maple-form__richtext-editor p { margin: 0 0 0.75rem; } .maple-form__richtext-editor p:last-child { margin-bottom: 0; } .maple-form__richtext-editor ul, .maple-form__richtext-editor ol { margin: 0 0 0.75rem 1.5rem; } .maple-form__richtext-editor a { color: #066aab; } .maple-form__richtext--empty .maple-form__richtext-editor::before { content: attr(data-rt-placeholder); color: #8c8f94; pointer-events: none; } /* ── Repeater field ────────────────────────────────────────── A list of rows; each row hosts the configured sub-fields and gets its own Remove button. The Add button below the list appends a fresh row by cloning the template. */ .maple-form__repeater { display: flex; flex-direction: column; gap: 0.75rem; } .maple-form__repeater-rows { display: flex; flex-direction: column; gap: 0.75rem; } .maple-form__repeater-row { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem; background: #fafbfc; border: 1px solid #e5e7eb; border-radius: 6px; } .maple-form__repeater-row-fields { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; } .maple-form__repeater-cell { display: flex; flex-direction: column; } .maple-form__repeater-sublabel { display: block; margin-bottom: 0.25rem; font-size: 1rem; font-weight: 600; color: #1d2327; } .maple-form__repeater-remove { background: transparent; border: 1px solid transparent; color: #b32d2e; padding: 0.5rem 0.75rem; cursor: pointer; font-size: 1rem; border-radius: 4px; align-self: flex-start; } .maple-form__repeater-remove:hover:not(:disabled) { background: #fbeaea; } .maple-form__repeater-remove:disabled { opacity: 0.4; cursor: not-allowed; color: #50575e; border: 1px dashed #c3c4c7; background: transparent; } .maple-form__repeater-add { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.625rem 1rem; background: transparent; border: 1px dashed #066aab; color: #066aab; border-radius: 6px; cursor: pointer; font-size: 1.0625rem; font-weight: 700; align-self: flex-start; } .maple-form__repeater-add:hover:not(:disabled) { background: #eef6fc; } .maple-form__repeater-add:disabled { opacity: 0.5; cursor: not-allowed; } .maple-form__repeater-add span[aria-hidden] { font-size: 1.25rem; line-height: 1; } /* ── Signature pad ─────────────────────────────────────────── Canvas with a thin border that doubles as a "draw inside this box" affordance. Touch-action: none lets pointer events fire without the browser scrolling the page when the visitor drags. */ .maple-form__signature { display: flex; flex-direction: column; gap: 0.5rem; } .maple-form__signature-pad { width: 100%; border: 1px solid #555; border-radius: 6px; background: #fff; cursor: crosshair; touch-action: none; } .maple-form__signature-controls { display: flex; justify-content: flex-end; } .maple-form__signature-clear { background: transparent; border: none; padding: 0.25rem 0.625rem; color: #50575e; font-size: 0.9375rem; cursor: pointer; text-decoration: underline; } .maple-form__signature-clear:hover { color: #b32d2e; } /* ── Address field ─────────────────────────────────────────── Composite of 6 inputs in a 4-row grid: street1, street2, then city/region split, then postcode/country split. Single column on narrow screens. */ .maple-form__address { display: flex; flex-direction: column; gap: 0.75rem; } .maple-form__address-row { display: grid; grid-template-columns: 1fr; gap: 0.75rem; } .maple-form__address-row--split { grid-template-columns: 1fr 1fr; } .maple-form__address-part { display: flex; flex-direction: column; } .maple-form__address-sublabel { display: block; margin-bottom: 0.25rem; font-size: 1rem; color: #50575e; } @media (max-width: 480px) { .maple-form__address-row--split { grid-template-columns: 1fr; } } /* ── Rating field ──────────────────────────────────────────── Stars are radio buttons styled via labels. DOM is in natural order (1..N); the highlight-up-to-N visual is done with CSS `:has()` so a star is filled when either its own input is checked OR a later sibling input is checked. Same trick for hover, using `:has()` to look forward at a hovered star. */ .maple-form__rating { display: inline-flex; gap: 0.125rem; padding: 0.25rem 0; } .maple-form__rating-input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .maple-form__rating-star { font-size: 2rem; color: #c3c4c7; cursor: pointer; line-height: 1; transition: color 0.1s ease; } .maple-form__rating-star::before { content: "\2605"; } /* Selected: the star immediately after the checked input + every earlier star (matched by "has a checked input as a later sibling"). */ .maple-form__rating-input:checked + .maple-form__rating-star, .maple-form__rating-star:has(~ .maple-form__rating-input:checked) { color: #dba617; } /* Hover overrides selected so the visitor previews their pick. */ .maple-form__rating:hover .maple-form__rating-input:checked + .maple-form__rating-star, .maple-form__rating:hover .maple-form__rating-star:has(~ .maple-form__rating-input:checked) { color: #c3c4c7; } .maple-form__rating-star:hover, .maple-form__rating-star:has(~ .maple-form__rating-star:hover) { color: #f0b849; } .maple-form__rating-input:focus-visible + .maple-form__rating-star { outline: 2px solid #066aab; outline-offset: 2px; border-radius: 2px; } /* Phone field — flag + dial code prefix pill pressed against the input. Pill shares the input's border colour so it reads as one unit; the input gets its left border-radius zeroed. Min-width:0 on the input lets flex shrink it on narrow viewports without clipping the pill. */ .maple-form__tel { display: flex; align-items: stretch; gap: 0; } .maple-form__tel-prefix { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0 0.75rem; background: #f0f1f5; border: 1px solid #555; border-right: none; border-radius: 6px 0 0 6px; color: #1d2327; line-height: 1; white-space: nowrap; } .maple-form__tel-flag { font-size: 1.25rem; } .maple-form__tel-dial { font-variant-numeric: tabular-nums; font-size: 1rem; } .maple-form__input--tel { border-top-left-radius: 0; border-bottom-left-radius: 0; flex: 1; min-width: 0; } .maple-form__field--has-error .maple-form__tel-prefix { border-color: #b32d2e; } /* Success-confirmation modal (0.8.6+). Triggered by the JS-driven AJAX submit path; auto-dismisses after 2s. Backdrop click / close-X / ESC also dismiss. The modal is appended directly to so it overlays everything regardless of the form's stacking context. Inline-styled so it works even when the theme's CSS doesn't load. */ .maple-form__modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 200ms ease; } .maple-form__modal.is-visible { opacity: 1; pointer-events: auto; } .maple-form__modal.is-closing { opacity: 0; } .maple-form__modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); cursor: pointer; } .maple-form__modal-card { position: relative; background: #ffffff; border-radius: 16px; box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.25), 0 8px 16px -4px rgba(0, 0, 0, 0.1); padding: 2.5rem 2rem 2rem; max-width: 28rem; width: calc(100% - 2rem); text-align: center; transform: scale(0.92) translateY(8px); transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1); } .maple-form__modal.is-visible .maple-form__modal-card { transform: scale(1) translateY(0); } .maple-form__modal-card:focus { outline: none; } .maple-form__modal-close { position: absolute; top: 0.75rem; right: 0.75rem; width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; border-radius: 50%; color: #64748b; cursor: pointer; transition: background-color 150ms ease, color 150ms ease; } .maple-form__modal-close:hover { background: #f1f5f9; color: #0f172a; } .maple-form__modal-close:focus-visible { outline: 2px solid #066aab; outline-offset: 2px; } .maple-form__modal-icon { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem; animation: maple-form-modal-pop 400ms cubic-bezier(0.34, 1.56, 0.64, 1) both; } @keyframes maple-form-modal-pop { 0% { transform: scale(0); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } } .maple-form__modal-title { margin: 0 0 0.5rem; padding: 0; font-size: 1.5rem; font-weight: 700; color: #0f172a; line-height: 1.2; } .maple-form__modal-message { margin: 0; padding: 0; font-size: 1rem; color: #475569; line-height: 1.5; } /* Reduced motion — drop the pop / scale animations but keep the fade. */ @media (prefers-reduced-motion: reduce) { .maple-form__modal-card { transform: none; transition: none; } .maple-form__modal-icon { animation: none; } } /* Mobile sizing — slightly tighter padding on small viewports. */ @media (max-width: 480px) { .maple-form__modal-card { padding: 2rem 1.25rem 1.5rem; border-radius: 12px; } .maple-form__modal-title { font-size: 1.25rem; } .maple-form__modal-message { font-size: 0.9375rem; } } /* Dancing Script @font-face declarations live in `assets/css/signature-type.css` (0.8.11+: split out so the ~73 KB woff2 subsets only load on pages whose forms actually use signature Type-mode). FormRenderer::maybe_enqueue_assets conditionally enqueues that file when it detects a signature field with `signatureAllowType=true` in any rendered form. */ /* Signature Draw / Type tabs (0.8.9+). Only emitted when admin enables `signatureAllowType`; the existing draw-only signature shape is unchanged below the tabs are rendered. */ .maple-form__signature-tabs { display: inline-flex; gap: 0.25rem; margin-bottom: 0.5rem; background: #f0f1f5; border-radius: 6px; padding: 0.25rem; } .maple-form__signature-tab { padding: 0.375rem 1rem; font-size: 0.9375rem; font-weight: 500; color: #475569; background: transparent; border: none; border-radius: 4px; cursor: pointer; transition: background-color 150ms ease, color 150ms ease; } .maple-form__signature-tab:hover { color: #0f172a; } .maple-form__signature-tab--active { background: #ffffff; color: #0f172a; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); } /* Type mode: a text input above + a Dancing Script preview below. Preview height matches the configured pad height so swapping modes doesn't jump the form vertically. */ .maple-form__signature-mode--type { display: flex; flex-direction: column; gap: 0.5rem; } .maple-form__signature-type-input { width: 100%; padding: 0.75rem 0.875rem; font-size: 1.0625rem; border: 1px solid #555; border-radius: 6px; } .maple-form__signature-type-preview { display: flex; align-items: center; width: 100%; padding: 0 1rem; font-family: 'Dancing Script', cursive; font-size: 2.5rem; line-height: 1; border: 1px dashed #b5b9c0; border-radius: 6px; background: #fafafa; overflow: hidden; white-space: nowrap; } @media (max-width: 480px) { .maple-form__name { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .maple-form * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } } /* @layer maple-forms */ /* ── STRUCTURAL GUARD — deliberately UNLAYERED ─────────────────────── Everything above lives in @layer maple-forms so a theme / Site Kit pattern / site Custom CSS can restyle the form's *appearance* (colour, border, font) without !important. But a cascade layer also loses to a generic UNLAYERED element reset — e.g. a theme, a CSS reset, or another form plugin shipping `label { display: none }` or `input { display:none }` — and that breaks the form's *structure*, not just its looks. (Regression seen in 1.5.0: a stray, leftover `label{display:none}` from a removed third-party plugin hid every field label, because our `.maple-form__label{display:block}` was layered and therefore lost.) These rules re-assert ONLY the display / width of the bare HTML elements we render (the ones a site is realistically likely to reset globally: