/** * Royal Palace expo 2026 — webform "paleis_expo_palais" styling. * * Restyles the Drupal webform so the share-iframe embed on * paleisexpo.fedcanvas.be visually matches the static Eleventy site. * * WHERE THIS GOES * forms.belgium.be → /nl/admin/webform/manage/paleis_expo_palais * → Settings tab → "Assets" (or directly /settings/assets) * → paste the whole file into the "CSS" textarea → Save. * * The webform module stores this in the form's `css:` config property and * injects it into every render of the form, including the * /webform/paleis_expo_palais/share/iframe-resizer/* page the static site * embeds. No theme changes needed. * * Design tokens are copied verbatim from * royal-expo/src/assets/css/styles.css (@theme block) * so the embedded form and the host page stay in sync. * * !important is used on a few visual properties because the share iframe is * rendered in forms.belgium.be's own admin/federal theme, whose form styles * would otherwise win the cascade. */ /* ────────────────────────────────────────────────────────────────────────── Design tokens ────────────────────────────────────────────────────────────────────────── */ .webform-submission-form { --palace-100: #f3e2f4; --palace-200: #e6c5e7; --palace-300: #d2a4d4; --palace-500: #9c5b9e; --palace-600: #7f1e80; /* primary purple */ --palace-700: #66166a; /* primary purple — hover */ --ink-900: #15110b; /* primary text */ --ink-700: #3a3328; /* secondary text */ --ink-500: #6b6356; /* descriptions */ --ink-300: #b1aa9b; /* input borders */ --ink-100: #ebe7df; /* hairlines */ --cream-50: #fdfaf3; /* page background */ } /* ────────────────────────────────────────────────────────────────────────── Font — Roboto Condensed, self-hosted by the static site. Loaded cross-origin from the expo domain (mirrors styles.css). If the CDN blocks cross-origin font requests, the system fallback stack below still gives a condensed-ish sans, so the form never breaks. ────────────────────────────────────────────────────────────────────────── */ @font-face { font-family: "Roboto Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("https://paleisexpo.fedcanvas.be/assets/fonts/roboto-condensed-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Roboto Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("https://paleisexpo.fedcanvas.be/assets/fonts/roboto-condensed-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ────────────────────────────────────────────────────────────────────────── Page background — kill the federal/admin theme's dark page background so the iframe is transparent and the cream section of the embedding host page (paleisexpo.fedcanvas.be) shows through. The iframe in contact-form.njk already sets allowtransparency="true". If the host theme paints its background on a wrapper rather than , the extra selectors below catch the usual Drupal region/block wrappers too. ────────────────────────────────────────────────────────────────────────── */ html.webform-share-page-html, body.webform-share-page-body, body.webform-share-page-body .layout-container, body.webform-share-page-body .dialog-off-canvas-main-canvas, body.webform-share-page-body main, body.webform-share-page-body .region, body.webform-share-page-body .region-content, body.webform-share-page-body .block, body.webform-share-page-body .block-system-main-block, body.webform-share-page-body .content, body.webform-share-page-body .page-content { background-color: transparent !important; background-image: none !important; box-shadow: none !important; } /* ────────────────────────────────────────────────────────────────────────── Form shell ────────────────────────────────────────────────────────────────────────── */ .webform-submission-form, .webform-submission-form input, .webform-submission-form textarea, .webform-submission-form select, .webform-submission-form button { font-family: "Roboto Condensed", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } .webform-submission-form { color: var(--ink-900); font-size: 16px; line-height: 1.6; max-width: 48rem; /* matches the host page's max-w-3xl section */ margin-inline: auto; } /* Page title shown on the standalone share page */ body.webform-share-page-body .page-title { font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem); font-weight: 700; line-height: 1.15; color: var(--ink-900); } /* ────────────────────────────────────────────────────────────────────────── Field rows ────────────────────────────────────────────────────────────────────────── */ .webform-submission-form .js-form-item, .webform-submission-form .form-item { margin-block: 1.25rem; } /* Labels — webform/Claro use .form-item__label, older themes use plain label */ .webform-submission-form label, .webform-submission-form .form-item__label, .webform-submission-form .fieldset__label { display: block; font-weight: 600; color: var(--ink-900); margin-bottom: 0.35rem; } /* Required marker — purple asterisk. Themes render the marker either as a ::after pseudo-element or as a real /, so all variants are covered. !important beats the theme's red default. */ .webform-submission-form .form-required::after, .webform-submission-form label.js-form-required::after, .webform-submission-form .form-item__label.js-form-required::after, .webform-submission-form .form-item__label::after, .webform-submission-form .js-form-required::after, .webform-submission-form .marker, .webform-submission-form abbr.required, .webform-submission-form abbr.form-required { color: var(--palace-600) !important; } /* Element descriptions / help text */ .webform-submission-form .description, .webform-submission-form .form-item__description, .webform-submission-form .webform-element-description { color: var(--ink-500); font-size: 0.875rem; margin-top: 0.3rem; } /* ────────────────────────────────────────────────────────────────────────── Text inputs, textareas, selects ────────────────────────────────────────────────────────────────────────── */ .webform-submission-form input[type="text"], .webform-submission-form input[type="email"], .webform-submission-form input[type="tel"], .webform-submission-form input[type="url"], .webform-submission-form input[type="number"], .webform-submission-form input[type="search"], .webform-submission-form input[type="password"], .webform-submission-form input[type="date"], .webform-submission-form input[type="time"], .webform-submission-form input[type="datetime-local"], .webform-submission-form textarea, .webform-submission-form select { width: 100%; box-sizing: border-box; padding: 0.625rem 0.75rem !important; font-size: 1rem; color: var(--ink-900); background-color: #ffffff !important; border: 1px solid var(--ink-300) !important; border-radius: 0.25rem !important; box-shadow: none !important; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .webform-submission-form textarea { min-height: 7rem; resize: vertical; } .webform-submission-form input::placeholder, .webform-submission-form textarea::placeholder { color: var(--ink-300); } /* Focus — purple ring, mirrors styles.css :focus-visible */ .webform-submission-form input:focus, .webform-submission-form textarea:focus, .webform-submission-form select:focus { outline: 2px solid var(--palace-500) !important; outline-offset: 1px; border-color: var(--palace-500) !important; } /* Invalid fields */ .webform-submission-form input.error, .webform-submission-form textarea.error, .webform-submission-form select.error, .webform-submission-form .form-item--error input, .webform-submission-form input[aria-invalid="true"], .webform-submission-form textarea[aria-invalid="true"] { border-color: #b3261e !important; } /* ────────────────────────────────────────────────────────────────────────── Checkboxes & radios ────────────────────────────────────────────────────────────────────────── */ .webform-submission-form input[type="checkbox"], .webform-submission-form input[type="radio"] { accent-color: var(--palace-600); width: 1.05rem; height: 1.05rem; } .webform-submission-form .form-checkboxes .form-item, .webform-submission-form .form-radios .form-item, .webform-submission-form .form-type-checkbox, .webform-submission-form .form-type-radio { margin-block: 0.4rem; } /* The label next to a checkbox/radio should read as body text, not a heading */ .webform-submission-form .form-type-checkbox label, .webform-submission-form .form-type-radio label, .webform-submission-form .form-checkbox + label, .webform-submission-form .form-radio + label { display: inline; font-weight: 400; color: var(--ink-700); } /* ────────────────────────────────────────────────────────────────────────── Fieldsets ────────────────────────────────────────────────────────────────────────── */ /* No visible box — a fieldset should read as a plain field group, so the legend lines up with the other labels and the control sits flush left like every other input. */ .webform-submission-form fieldset, .webform-submission-form .fieldset { border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin-block: 1.25rem; background-color: transparent !important; box-shadow: none !important; } /* The fieldset's inner wrapper also carries padding in some themes. */ .webform-submission-form .fieldset__wrapper, .webform-submission-form .fieldset-wrapper { padding: 0 !important; } /* Tighten the gap between the legend and the field directly under it so it behaves like a label, not a section heading. */ .webform-submission-form legend + *, .webform-submission-form .fieldset__legend + * { margin-top: 0.35rem; } /* Legend reads as a normal field label, not a bold purple heading — same weight/size/colour as the other element labels above. */ .webform-submission-form legend, .webform-submission-form .fieldset__legend { font-size: 1rem !important; font-weight: 600 !important; color: var(--ink-900) !important; padding-inline: 0.25rem; } /* ────────────────────────────────────────────────────────────────────────── Sections / headings inside the form ────────────────────────────────────────────────────────────────────────── */ .webform-submission-form h2, .webform-submission-form h3, .webform-submission-form .webform-section__title { color: var(--palace-700); font-weight: 700; line-height: 1.2; } .webform-submission-form a { color: var(--palace-700); text-decoration: underline; } .webform-submission-form a:hover { color: var(--palace-600); } /* ────────────────────────────────────────────────────────────────────────── Buttons — primary CTA mirrors the host site's rounded-full purple button (royal-expo index.md hero CTA, inverted: purple fill + cream text). ────────────────────────────────────────────────────────────────────────── */ .webform-submission-form .form-actions { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 0.75rem; } .webform-submission-form .button, .webform-submission-form input[type="submit"], .webform-submission-form button[type="submit"], .webform-submission-form .webform-button--submit { display: inline-block; padding: 0.85rem 2rem !important; font-size: 1rem; font-weight: 600; line-height: 1.2; border: 0 !important; border-radius: 9999px !important; /* rounded-full */ cursor: pointer; background-color: var(--palace-600) !important; color: var(--cream-50) !important; box-shadow: none !important; transition: background-color 0.15s ease; } .webform-submission-form .button:hover, .webform-submission-form input[type="submit"]:hover, .webform-submission-form button[type="submit"]:hover, .webform-submission-form .webform-button--submit:hover { background-color: var(--palace-700) !important; } .webform-submission-form .button:focus-visible, .webform-submission-form input[type="submit"]:focus-visible, .webform-submission-form button[type="submit"]:focus-visible, .webform-submission-form .webform-button--submit:focus-visible { outline: 2px solid var(--palace-500) !important; outline-offset: 2px; } /* Secondary buttons — "Previous page" on multi-step forms, reset, etc. */ .webform-submission-form .webform-button--previous, .webform-submission-form .button--secondary, .webform-submission-form input[type="submit"].button--secondary { background-color: transparent !important; color: var(--palace-700) !important; border: 1px solid var(--palace-300) !important; } .webform-submission-form .webform-button--previous:hover, .webform-submission-form .button--secondary:hover { background-color: var(--palace-100) !important; } /* ────────────────────────────────────────────────────────────────────────── Progress bar (multi-step forms) ────────────────────────────────────────────────────────────────────────── */ .webform-submission-form .progress__bar, .webform-submission-form .webform-progress-bar__page--current .webform-progress-bar__page-marker { background-color: var(--palace-600); } .webform-submission-form .webform-progress-bar__page--completed .webform-progress-bar__page-marker { background-color: var(--palace-300); } /* ────────────────────────────────────────────────────────────────────────── Status / validation messages ────────────────────────────────────────────────────────────────────────── */ .webform-share-page-body .messages, .webform-submission-form .messages { border-radius: 0.25rem; } .webform-share-page-body .messages--status, .webform-submission-form .messages--status { border-inline-start: 4px solid var(--palace-600); }