/* ========================================
Contact Page Styles (page-contact.php, #211)
======================================== */
/* ----------------------------------------
Page-level Variables (bg-lines)
---------------------------------------- */
body.page-contact {
/* The front page's line set (functions.php switches the variant), placed
where Figma draws it: 982.5px down the 393 frame and 337px down the 1280
frame. Both frames include the fixed header (60px / 100px), so the offset
is expressed from the header height and the md/lg header difference
follows on its own. */
--bg-lines-top: calc(var(--header-height) + 922.5px);
--bg-lines-width: 100vw;
@media screen and (min-width: 768px) {
--bg-lines-top: calc(var(--header-height) + 237px);
}
}
/* ----------------------------------------
Page shell
---------------------------------------- */
.contact-page {
--max-width: calc(600px + 2 * var(--content-padding));
}
.contact-page__section {
padding: 54px 0 127px;
@media screen and (min-width: 768px) {
padding: 69px 0 216px;
}
}
.contact-page__title {
font-size: 24px;
font-weight: var(--font-weight-medium);
line-height: 1.75;
@media screen and (min-width: 768px) {
font-size: 48px;
font-weight: var(--font-weight-regular);
line-height: 1.6;
text-align: center;
}
}
/* ----------------------------------------
Form shell
---------------------------------------- */
/* Sets the gap between the page title and the lead of whichever step is shown. */
.contact-form {
margin-top: 30px;
@media screen and (min-width: 768px) {
margin-top: 48px;
}
}
/*
The three steps all exist in the markup and main.js toggles [hidden].
The display declaration below would win over the UA's [hidden] rule, so the
attribute selector has to switch it off explicitly.
The gap is the spacing unit the rest of the step is measured from: field to
field is exactly this, and the two larger gaps in the design (lead to first
field, last element to the button row) are this plus a margin on the element
that owns the difference.
*/
.contact-form__step {
display: grid;
gap: 24px;
}
.contact-form__step[hidden] {
display: none;
}
/*
The design shows no step heading, but setStep() focuses one on every step
change — it is what names the step a screen reader has just landed in — so it
is hidden visually rather than removed.
*/
.contact-form__step-title {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: clip;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
/* Focus lands here on every step change; the outline would be noise. */
&:focus {
outline: none;
}
}
.contact-form__step-lead {
font-size: 16px;
font-weight: var(--font-weight-medium);
line-height: 1.65;
color: var(--color-text);
/* + the step gap = 41 to the first field (48 from 768px). */
margin-bottom: 17px;
@media screen and (min-width: 768px) {
text-align: center;
margin-bottom: 24px;
}
}
/* On the last step the lead is followed by the button row, whose own margin
already carries the full distance. */
.contact-form__step--done .contact-form__step-lead {
margin-bottom: 0;
/* At the 600px form width this body wraps to two lines, and Figma sets it
flush left. The input and confirm leads fit on one line and stay centred. */
@media screen and (min-width: 768px) {
text-align: start;
}
}
/* ----------------------------------------
Fields
---------------------------------------- */
.contact-form__field {
display: grid;
gap: 8px;
}
.contact-form__label {
font-size: 16px;
font-weight: var(--font-weight-medium);
line-height: 1.65;
color: var(--color-text);
}
/* Decorative: the control's required attribute is what assistive tech reads. */
.contact-form__required {
color: var(--color-required);
}
/*
Form controls inherit nothing useful by default: the universal reset zeroes
their padding, and the UA stylesheet gives them their own font, so both have
to be restated here. Scoped to .contact-form rather than added to main.css as
element selectors — this is the only form in the theme, and a global rule
would also reshape any future plugin-rendered form.
*/
.contact-form__control {
width: 100%;
height: 48px;
padding: 0 20px;
font-family: inherit;
/* Anything below 16px makes iOS Safari zoom the viewport on focus. */
font-size: 16px;
line-height: 1.65;
color: var(--color-text);
background-color: var(--color-background);
border: 1px solid var(--color-text);
border-radius: 8px;
appearance: none;
&::placeholder {
font-size: 14px;
font-weight: var(--font-weight-medium);
color: var(--color-text-disabled);
}
&[aria-invalid="true"] {
border-color: var(--color-error);
}
}
textarea.contact-form__control {
height: auto;
min-height: 200px;
padding: 12px 20px;
resize: vertical;
}
/*
The theme has no focus styling of its own, so keyboard users get whatever the
browser draws. Scoped to this page: giving the whole site a focus ring is a
worthwhile change but would visibly alter the header, nav and language toggle.
*/
.contact-page :focus-visible {
outline: 2px solid var(--color-text);
outline-offset: 2px;
}
/* ----------------------------------------
Messages
---------------------------------------- */
/* Every message element sits in the DOM, empty, from first paint; collapse them
while empty. */
.contact-form__recaptcha:empty,
.contact-form__recaptcha-status:empty,
.contact-form__alert:empty,
.contact-form__status:empty,
.contact-form__failure:empty,
.contact-form__error:empty {
display: none;
}
/*
The entry-errors summary directly under the input step's lead. It carries no
margin of its own: the lead's margin plus the step gap already make the 41
(48 from 768px) above it, and the step gap alone the 24 below it — which only
holds once the main.css
bottom margin is handed back.
*/
.contact-form__alert {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 0;
font-size: 16px;
font-weight: var(--font-weight-medium);
line-height: 1.65;
color: var(--color-error);
/* The red disc. Figma draws it as an ellipse with the glyph set on top rather
than as a vector icon, so it is built the same way. The second content
declaration gives it empty alternative text so it is not read out; a browser
that lacks that syntax drops the declaration and keeps the first. */
&::before {
content: "！";
content: "！" / "";
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 24px;
height: 24px;
border-radius: 50%;
background-color: var(--color-error);
font-size: 16px;
font-weight: var(--font-weight-medium);
line-height: 1;
color: var(--color-background);
}
@media screen and (min-width: 768px) {
justify-content: center;
}
}
.contact-form__error {
font-size: 14px;
font-weight: var(--font-weight-regular);
line-height: 1.65;
color: var(--color-error);
}
/*
Send progress and send failures, directly above the confirm step's buttons.
The margin plus the step gap puts them 48 below the summary; the rule further
down brings the button row up to 24 below them while either is shown.
*/
.contact-form__status,
.contact-form__failure {
margin-top: 24px;
margin-bottom: 0;
font-size: 16px;
font-weight: var(--font-weight-regular);
line-height: 1.65;
text-align: center;
}
.contact-form__recaptcha {
justify-self: center;
}
.contact-form__recaptcha-status {
margin: 0;
font-size: 16px;
line-height: 1.65;
text-align: center;
}
.contact-form__recaptcha-status,
.contact-form__status {
color: var(--color-text-muted);
}
/* The fixed first line and the reason arrive as one string joined by a newline. */
.contact-form__failure {
color: var(--color-error);
white-space: pre-line;
}
.contact-form__status:not(:empty) ~ .contact-form__actions,
.contact-form__failure:not(:empty) ~ .contact-form__actions {
margin-top: 0;
}
/* Break the two red messages between phrases rather than inside a word: the
summary then wraps where Figma wraps it in the 393 frame, and a failure
reason no longer strands its last few characters on a line of their own.
Engines without auto-phrase keep ordinary wrapping. */
.contact-form__alert,
.contact-form__failure {
word-break: auto-phrase;
}
/* ----------------------------------------
Honeypot
Off-screen instead of display:none, which some bots know to skip.
---------------------------------------- */
.contact-form__decoy {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: clip;
}
/* ----------------------------------------
Privacy notice
---------------------------------------- */
/*
48 below the last field (its margin-top plus the step gap) and 48 above the
button row (the row's own margin plus the gap).
main.css gives every
a 16px bottom margin and takes it back on :last-child.
This one is followed by the button row, so it keeps the margin and would push
the row 16px past the design. Spacing inside the step comes from the grid gap
and the row's own margin, so hand it back here.
*/
.contact-form__privacy {
margin-top: 24px;
margin-bottom: 0;
font-size: 14px;
font-weight: var(--font-weight-medium);
line-height: 1.65;
color: var(--color-text);
@media screen and (min-width: 768px) {
text-align: center;
}
}
.contact-form__privacy-link {
color: inherit;
@media (hover: hover) {
&:hover {
opacity: 0.7;
}
}
}
/* ----------------------------------------
Confirmation summary
---------------------------------------- */
.contact-form__summary {
display: grid;
gap: 24px;
}
/* Label above value, left aligned. */
.contact-form__summary-row {
display: grid;
gap: 8px;
dt {
font-size: 16px;
font-weight: var(--font-weight-medium);
line-height: 1.65;
color: var(--color-text);
}
dd {
font-size: 16px;
font-weight: var(--font-weight-regular);
line-height: 1.65;
color: var(--color-text-secondary);
/* Preserve the line breaks the visitor typed into the message field. */
white-space: pre-wrap;
/* A long unbroken address must wrap rather than widen the row. */
min-width: 0;
overflow-wrap: anywhere;
}
/*
From 768px the pair shares one line with the value pushed right. A message
runs to many lines and reads badly right-aligned, so the multiline rows are
excluded here and keep the stacked shape at every width — excluded rather
than switched back, because justify-content would otherwise survive the
switch and shrink the restored grid column to its content.
*/
@media screen and (min-width: 768px) {
&:not(.contact-form__summary-row--multiline) {
display: flex;
justify-content: space-between;
gap: 24px;
}
/* Without this a long value squeezes the CJK label down to one character
per line, since its min-content width is a single glyph. */
&:not(.contact-form__summary-row--multiline) dt {
flex-shrink: 0;
}
&:not(.contact-form__summary-row--multiline) dd {
text-align: right;
}
}
}
/* ----------------------------------------
Actions
---------------------------------------- */
/* + the step gap = 48 from whatever precedes the button row. */
.contact-form__actions {
display: grid;
gap: 16px;
margin-top: 24px;
}
.contact-form__step--done .contact-form__actions {
@media screen and (min-width: 768px) {
/* + the step gap = 78, the wider run-out the completion screen is drawn with. */
margin-top: 54px;
}
}
/*
Stacked on small screens in DOM order (send on top, edit below, so
assistive tech reaches the primary action first). From 768px they sit side
by side with edit on the left / send on the right per the design, so the
`order` below flips edit ahead of send visually only — keyboard/AT order
still follows the DOM (send first) on desktop too.
*/
.contact-form__actions--pair {
@media screen and (min-width: 768px) {
grid-template-columns: repeat(2, minmax(0, 350px));
justify-content: center;
gap: 24px;
/* The column already caps the width; this keeps that true if the cap moves. */
.contact-form__button {
max-width: none;
}
.contact-form__button--ghost {
order: -1;
}
}
}
/*
The same pill as .more-button in main.css, but the design gives this one a
different desktop width and type size (500px / 18px against 495px / 20px), so
the two stay separate. Carries both the resets a