/* ========================================================================
Event Registration Page — Figma "Form"
(DONI-register-redesign, node IDs 21077:10569 desktop / 21014:39656 mobile
/ 21103:29290 virtual)
Layout: white canvas, 800px max form column centered, generous vertical
rhythm. Absolute-positioned decorations (coral neon piping strips on
left/right + rotated DONI circles quarter anchored bottom-right). All
decorations are desktop-only (>=768px).
Styling targets both the twig shell (.event-register__*) and the Drupal
webform output rendered inside #event-register-form.
======================================================================== */
.event-register {
position: relative;
overflow: hidden;
background-color: var(--color-white);
padding: 60px 120px;
}
#event-register-section {
scroll-margin-top: var(--header-height);
}
.event-register__container {
position: relative;
z-index: 1;
max-width: 800px;
margin: 0 auto;
padding: 0;
display: flex;
flex-direction: column;
/* Figma outer Form (21077:10644) spaces top-level children at 60px,
EXCEPT for the gap between "Required fields." and the form itself,
which compresses to 24px (DONI-411). We switch off the uniform
`gap` and rebuild via per-sibling margin-top so we can selectively
tighten that one boundary without losing the 60px default elsewhere. */
gap: 0;
}
.event-register__container > * + * {
margin-top: 60px;
}
/* Pull the form up under the "Required fields." note (DONI-411). */
.event-register__container > #event-register-form {
margin-top: 24px;
}
/* Groups venue header + description paragraphs with Figma's internal 24px
rhythm, so the parent container can run at 60px between top-level
blocks without the venue line detaching from its supporting paragraphs
(BugHerd DONI-390 round 2, items 1/1a/1b/2). */
.event-register__heading {
display: flex;
flex-direction: column;
gap: 24px;
}
/* ========================================================================
Decorations — piping strips + rotated circles quarter
======================================================================== */
/* Piping strips at the section edges — placed at natural size (127×861).
The asset is a closed vertical capsule with a diagonal glow asymmetry
(bright highlight at top-right + bottom-left of the raw asset), so the
two pipes are HORIZONTAL mirrors of each other so each pipe's brighter
outer edge bleeds off-screen. Per Figma node 21359:48938 the left pipe
composes `scaleY(-1) rotate(180deg)`, which simplifies to `scaleX(-1)`. */
.event-register__piping {
position: absolute;
width: 127px;
height: 861px;
pointer-events: none;
user-select: none;
z-index: 0;
}
.event-register__piping--right {
top: 60px;
right: 0;
}
.event-register__piping--left {
bottom: 60px;
left: 0;
transform: scaleX(-1);
}
/* DONI circles disc — the source asset (doni-circles-register.webp) is
pre-composed with the filled coral disc already positioned at the
bottom-right of its 653×1198 canvas. Pinning it flush to the section's
bottom-right at natural size drops the disc in the right corner exactly
where Figma expects it; the transparent top-left portion of the asset
renders over the form column but is invisible, and the disc itself
bleeds slightly off the right edge (clipped by overflow:hidden). */
.event-register__circles {
position: absolute;
right: 0;
bottom: -600px;
width: 653px;
height: 1198px;
pointer-events: none;
user-select: none;
z-index: 0;
}
/* ========================================================================
Back link — dark-coral Agenda Bold with chevron glyph.
Sits OUTSIDE the 800px form column (direct child of .event-register)
so its left edge aligns with the section's 120px padding — matching the
hero's "Register below" link position (BugHerd DONI-390 item 1). The
40px margin-bottom re-establishes the Figma gap between Back and the
venue header block that was previously provided by the container's
internal flex gap.
======================================================================== */
.event-register__back {
display: inline-flex;
align-items: center;
gap: 8px;
position: relative; /* stack above the z-index:0 decorations */
z-index: 1;
margin-bottom: 40px;
font-family: var(--font-agenda);
font-size: 20px;
font-weight: 700;
color: var(--color-primary-dark);
text-decoration: none;
transition: color var(--transition-fast);
}
.event-register__back:hover,
.event-register__back:focus-visible {
color: var(--color-coral);
}
/* Inline SVG chevron — sized at the asset's natural box. The leftover
font-size/font-weight rules from when this was a `‹` glyph are
removed because the SVG draws its own stroke from the link's
currentColor (DONI-407). */
.event-register__back-arrow {
width: 10px;
height: 16px;
flex-shrink: 0;
}
/* ========================================================================
Venue / Date Header — Tilt Neon coral with 8px coral bullet separators
Desktop: pieces sit inline separated by round bullets.
Mobile: pieces stack vertically; bullets hide.
======================================================================== */
.event-register__venue-header {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
font-family: var(--font-tilt-neon);
font-size: 40px;
font-weight: 400;
line-height: 1.1;
color: var(--color-coral);
margin: 0;
}
.event-register__venue-piece {
display: inline-block;
}
.event-register__venue-bullet {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 999px;
background-color: var(--color-coral);
flex: 0 0 auto;
}
/* Virtual variant — 'Virtual Event:' label in dark-coral, value in coral. */
.event-register__venue-header--virtual .event-register__venue-label {
color: var(--color-primary-dark);
}
/* ========================================================================
Description paragraphs — Agenda 20px charcoal, 24px vertical rhythm
======================================================================== */
.event-register__description {
display: flex;
flex-direction: column;
gap: 24px;
font-family: var(--font-agenda);
font-size: 20px;
font-weight: 400;
/* Figma uses `leading-[normal]` (~1.2) for body copy. 1.3 pushed multi-line
paragraphs visibly taller than Figma (BugHerd DONI-390 item 3). */
line-height: 1.2;
color: var(--color-charcol);
}
.event-register__description p {
margin: 0;
/* Re-declare line-height here because the global `p { line-height: 1.75 }`
rule in base/typography.css sets a value directly on the
element —
that explicit value blocks inheritance from .event-register__description.
Same reason we re-declare on the consent
below. */
line-height: 1.2;
}
/* "Required fields." note — Agenda Bold charcoal with coral asterisk */
.event-register__required-note {
font-family: var(--font-agenda);
font-size: 20px;
font-weight: 400;
line-height: 1.2; /* Figma leading-[normal] — see note on __description. */
color: var(--color-charcol);
/* Continue the 24px rhythm from .event-register__description's flex gap
across the sibling boundary — the description uses `gap` which only
applies inside, so we need an explicit top margin here. */
margin: 24px 0 0;
}
.event-register__required-asterisk {
color: var(--color-primary-dark);
margin-right: 2px;
}
/* ========================================================================
Drupal Webform output — scoped to #event-register-form so the form tokens
(44px inputs / 8px radius / 1px steel border / 20px Agenda labels) don't
leak into other webforms on the site.
Drupal's webform renders:
Radios/checkboxes wrap inside .form-radios / .form-checkboxes fieldsets.
======================================================================== */
.event-register #event-register-form {
max-width: 100%;
margin: 0;
padding: 0;
}
/* Reset Webform's default margin so our explicit gap:24px between items
is the only vertical rhythm. */
.event-register .webform-submission-form .form-item,
.event-register .webform-submission-form .js-form-item,
.event-register .webform-submission-form .webform-section {
margin-top: 0;
margin-bottom: 0;
}
.event-register .webform-submission-form {
display: flex;
flex-direction: column;
/* Only hidden form-build-id / form-token / form-id inputs and the
.event-register-form-wrapper sit as direct children of the form
element, so this gap is effectively cosmetic — the real rhythm is
set on .event-register-form-wrapper below. */
gap: 0;
}
/* Top-level form items (name, email, phone, radios, fieldsets, checkboxes,
actions) are all direct children of .event-register-form-wrapper. Figma
node 21077:10644 spaces these at 60px.
We use `> * + * { margin-top }` instead of `gap` so we can selectively
override the spacing for a sub-range (name/email/phone, see below)
without losing the 60px default for everything else — `gap` is uniform
across the whole flex container and can't be per-child tuned. */
.event-register .event-register-form-wrapper {
display: flex;
flex-direction: column;
/* CRITICAL: the base theme's global `.form-wrapper { gap: 40px }`
(base/webform.css:488) cascades onto this element because the div
also carries the `.form-wrapper` class. Without this explicit
`gap: 0` override, every child pair would get `margin-top + 40px`
(e.g. 100px between top-level sections where we want 60px).
We drive all vertical rhythm via per-child margin-top below so
Figma's 60px default with 24px overrides for name/email/phone
lands exactly. */
gap: 0;
}
/* Higher-specificity selector via `#edit-container` (the id Drupal sets on
.event-register-form-wrapper). Without an ID in the chain our rule lost
to the earlier `.form-item { margin-top: 0 }` reset (both previously at
3-class specificity); adding `#edit-container` bumps us to (1,2,0) so
the 60px margin actually lands on direct children that carry .form-item. */
.event-register .webform-submission-form #edit-container > * + * {
margin-top: 40px;
}
/* Name (first+last row), email, phone, zip sections are grouped in Figma's
"Fields" frame (21077:10652) with a 24px internal gap — they're a
cluster of related single-field entries, not separate questions. The
YAML renders them as four sibling webform_section elements, so we
override the 40px default to 24px on the three that follow #edit-name. */
.event-register .webform-submission-form #edit-container > #edit-email-section,
.event-register .webform-submission-form #edit-container > #edit-phone-section,
.event-register .webform-submission-form #edit-container > #edit-zip-section {
margin-top: 24px;
}
/* Reset browser-default fieldset padding + border so `best_describes` and
`reminder_preference` fieldsets don't add a phantom ~30px (padding + 2px
border) on top of our margin-top rhythm. Min-width reset is a Firefox
quirk — fieldsets default to `min-width: min-content` which can break
flex children sizing. */
.event-register .webform-submission-form fieldset.form-item {
border: 0;
padding: 0;
margin: 0;
min-width: 0;
}
/* Webform section wrappers — flatten so they just provide grouping without
imposing fieldset/legend spacing. */
.event-register .webform-section {
display: flex;
flex-direction: column;
gap: 8px;
border: 0;
padding: 0;
}
.event-register .webform-section > .webform-section-title,
.event-register .webform-section > legend {
display: none; /* titles are 'invisible' per YAML; remove any residual line. */
}
/* First name + Last name side-by-side on desktop (40px gap per Figma).
The YAML puts both inside a webform_section whose wrapper element carries
the .form-header-row class. The base theme's webform.css gives
.webform-section-wrapper its own flex-row layout, but without a width
cap — which lets the inner form-items compute to ~469px each and bleed
178px past the 800px column. We pin the wrapper to the column width
and force the items to share it evenly via flex:1 + min-width:0. */
.event-register .form-header-row {
width: 100%;
}
.event-register .form-header-row > .webform-section-wrapper,
.event-register .form-header-row > div {
display: flex !important;
flex-direction: row !important;
gap: 40px;
align-items: flex-start;
width: 100%;
max-width: 100%;
}
.event-register .form-header-row .form-item {
flex: 1 1 0;
min-width: 0;
max-width: none;
width: auto;
}
.event-register .form-header-row .form-item input {
width: 100%;
max-width: 100%;
}
/* Narrow-width fields — email, phone, zip use 380px on desktop per Figma. */
.event-register .js-form-item-email-address input,
.event-register .js-form-item-phone-number input,
.event-register .js-form-item-zip-code input,
.event-register .form-item-email-address input,
.event-register .form-item-phone-number input,
.event-register .form-item-zip-code input {
max-width: 380px;
}
/* Additional guests — narrow number input (150px per Figma). */
.event-register .js-form-item-additional-guests input,
.event-register .form-item-additional-guests input {
max-width: 150px;
}
/* Zip code field — 150px narrow per Figma. */
.event-register .js-form-item-zip-code input,
.event-register .form-item-zip-code input {
max-width: 150px;
}
/* --- Labels ------------------------------------------------------------ */
.event-register .webform-submission-form label,
.event-register .webform-submission-form .form-item__label,
.event-register .webform-submission-form .fieldset__label {
display: block;
font-family: var(--font-agenda);
font-size: 20px;
font-weight: 400;
line-height: 1.2; /* Figma leading-[normal] — tightens multi-line labels
(e.g. reminder-preference question). */
color: var(--color-steel);
}
/* Bold labels on radio/checkbox question headings and standalone question
labels (e.g. the "How many additional people" number field) — Figma treats
the question text as body-bold charcoal rather than the steel used for
input field labels.
This site's Drupal render wraps legend content in `.fieldset-legend`
(not the stable `.fieldset__label`), so both selectors are included. */
.event-register .webform-submission-form .form-radios > legend .fieldset__label,
.event-register .webform-submission-form .form-checkboxes > legend .fieldset__label,
.event-register .webform-submission-form fieldset > legend .fieldset__label,
.event-register .webform-submission-form .form-radios > legend .fieldset-legend,
.event-register .webform-submission-form .form-checkboxes > legend .fieldset-legend,
.event-register .webform-submission-form fieldset > legend .fieldset-legend,
.event-register .webform-submission-form .form-type-radios > legend,
.event-register .webform-submission-form .form-type-checkboxes > legend,
.event-register .webform-submission-form .form-item-additional-guests > label {
font-weight: 700;
color: var(--color-charcol);
}
/* Drupal marks required fields with .form-required — replace the default
glyph with a coral asterisk to match Figma.
Exclude labels that already embed a manual *
in their title markup (phone_authorization, legal_consent). Those titles
contain complex content — paragraphs, inline links — where the trailing
::after falls onto its own line or doubles up alongside the manual span. */
.event-register .webform-submission-form label.form-required:not(:has(.required-asterisk))::after,
.event-register .webform-submission-form .form-item__label.js-form-required:not(:has(.required-asterisk))::after,
.event-register .webform-submission-form label.js-form-required:not(:has(.required-asterisk))::after {
content: "*";
color: var(--color-primary-dark);
margin-left: 2px;
background-image: none; /* clear Drupal's default asterisk SVG */
}
/* --- Text inputs ------------------------------------------------------- */
.event-register .webform-submission-form input[type="text"],
.event-register .webform-submission-form input[type="email"],
.event-register .webform-submission-form input[type="tel"],
.event-register .webform-submission-form input[type="number"],
.event-register .webform-submission-form input[type="search"],
.event-register .webform-submission-form input[type="url"],
.event-register .webform-submission-form textarea,
.event-register .webform-submission-form select {
width: 100%;
height: 44px;
padding: 12px 16px;
border: 1px solid var(--color-steel);
border-radius: 8px;
background-color: var(--color-white);
font-family: var(--font-agenda);
font-size: 16px;
line-height: 1.25;
color: var(--color-charcol);
box-shadow: none;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.event-register .webform-submission-form textarea {
height: auto;
min-height: 88px;
}
.event-register .webform-submission-form input[type="text"]:focus,
.event-register .webform-submission-form input[type="email"]:focus,
.event-register .webform-submission-form input[type="tel"]:focus,
.event-register .webform-submission-form input[type="number"]:focus,
.event-register .webform-submission-form input[type="search"]:focus,
.event-register .webform-submission-form input[type="url"]:focus,
.event-register .webform-submission-form textarea:focus,
.event-register .webform-submission-form select:focus {
outline: none;
border-color: var(--color-coral);
box-shadow: 0 0 0 2px rgba(241, 107, 80, 0.2);
}
/* --- Radios + checkboxes ----------------------------------------------
Figma node 21077:10660 (describes-you) and 21077:10744 (reminder-pref)
use a uniform 24px vertical gap: 24px between the question legend and
the first option, AND 24px between each option.
CRITICAL: Drupal's webform module renders the inner options wrapper with
class `.js-webform-radios` / `.js-webform-checkboxes`, NOT the core Form
API `.form-radios` class. Targeting only `.form-radios` previously left
radio groups un-styled — the browser's default fieldset spacing kicked
in, which made the question legend sit cramped against the first option
(BugHerd DONI-390 item 2). Both class forms are now covered.
------------------------------------------------------------------- */
.event-register .webform-submission-form .js-webform-radios,
.event-register .webform-submission-form .js-webform-checkboxes,
.event-register .webform-submission-form .form-radios,
.event-register .webform-submission-form .form-checkboxes {
display: flex;
flex-direction: column;
gap: 24px;
border: 0;
padding: 0;
margin: 0;
}
/* Fieldset legend — the legend is anchored to the fieldset's top border
(not a flex child of the options wrapper), so its spacing to the first
option is controlled by margin-bottom here rather than a flex gap. */
.event-register .webform-submission-form fieldset.form-item > legend,
.event-register .webform-submission-form .form-radios legend,
.event-register .webform-submission-form .form-checkboxes legend {
margin: 0 0 24px 0;
padding: 0;
}
/* Fieldset wrapper — Drupal wraps the options in an extra `.fieldset-wrapper`
div between the legend and `.js-webform-radios`. Reset its margins so it
doesn't add to the 24px gap above. */
.event-register .webform-submission-form fieldset > .fieldset-wrapper {
margin: 0;
padding: 0;
}
/* Fieldset description (e.g. text_reminder's "If Yes, Message and data rates
apply…" copy) — when present, the description sits between the legend and
the radio options. Collapse the legend's 24px bottom margin so the
description reads as a continuation of the question, and shift that 24px
gap below the description instead so the options breathe. */
.event-register .webform-submission-form fieldset.form-item:has(> .fieldset-wrapper > .description) > legend {
margin-bottom: 0;
}
.event-register .webform-submission-form fieldset > .fieldset-wrapper > .description {
margin: 0 0 24px 0;
}
/* Match disclaimer copy (the inner .webform-element-description rendered by
Drupal inside .description) to the rest of the form: 20px Agenda charcoal
at line-height 1.2. Without this rule the description falls back to the
global body 16px / line-height 1.5, which read visibly smaller than the
adjacent 20px question legend and option labels (DONI-462 audit). The
nested tags keep their underline + brand color from the .a rule below. */
.event-register .webform-submission-form fieldset > .fieldset-wrapper > .description,
.event-register .webform-submission-form fieldset > .fieldset-wrapper > .description .webform-element-description {
font-family: var(--font-agenda);
font-size: 20px;
font-weight: 400;
line-height: 1.2;
color: var(--color-charcol);
}
.event-register .webform-submission-form fieldset > .fieldset-wrapper > .description p {
margin: 0;
font-size: inherit;
line-height: inherit;
}
/* Grid layout (not flex) so that a child `.form-item--error-message`
rendered by inline_form_errors lands in the SECOND column (under the
label text), not back at column 1 under the glyph. Default auto-placement
puts input → col1/row1, label → col2/row1; forcing the error to
`grid-column: 2` drops it onto row2 in the label column.
BugHerd DONI-390 item 5. */
.event-register .webform-submission-form .form-type-radio,
.event-register .webform-submission-form .form-type-checkbox {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 16px;
row-gap: 4px;
align-items: start;
}
.event-register .webform-submission-form .form-type-radio .form-item--error-message,
.event-register .webform-submission-form .form-type-radio .form-item__error-message,
.event-register .webform-submission-form .form-type-checkbox .form-item--error-message,
.event-register .webform-submission-form .form-type-checkbox .form-item__error-message {
grid-column: 2; /* align error under the label text, not under the glyph */
margin: 0;
}
.event-register .webform-submission-form .form-type-radio input[type="radio"],
.event-register .webform-submission-form .form-type-checkbox input[type="checkbox"] {
flex: 0 0 auto;
width: 20px;
height: 20px;
/* margin-top is tuned so the glyph's vertical center aligns with the
first line of label text (label margin-top:3px + line-height 26px
⇒ text visual center ≈ 16px). For a 20px circle that means
margin-top: 6px. Checkbox override below adjusts for its 24px size. */
margin: 6px 0 0 0;
accent-color: var(--color-coral);
cursor: pointer;
}
.event-register .webform-submission-form .form-type-checkbox input[type="checkbox"] {
width: 24px;
height: 24px;
/* 24px box — center at margin-top + 12 ⇒ margin-top:4px aligns with
first-line text center at y=16. */
margin-top: 4px;
}
.event-register .webform-submission-form .form-type-radio label,
.event-register .webform-submission-form .form-type-checkbox label {
margin: 3px 0 0 0;
font-family: var(--font-agenda);
font-size: 20px;
font-weight: 400;
line-height: 1.2; /* Figma leading-[normal]. Tightens multi-line consent
paragraphs that previously read looser than design. */
color: var(--color-charcol);
cursor: pointer;
}
/* Food restrictions narrow column — Figma constrains the checkbox group
to a short column so the labels sit in a tight vertical stack. */
.event-register .food-restrictions-group .form-checkboxes {
max-width: 200px;
}
/* Consent checkbox paragraphs — the label text contains