/* Page group "forms": contact.html and quote.html.
Layout only; every component (masthead, form fields, chips, status
panels, FAQ, map, form index) comes from css/style.css. */
@layer pages {
/* ------------------------------------------------ shared */
.form-note {
margin: 0 0 var(--space-5);
font-size: var(--step--1);
color: var(--color-text-muted);
}
.contact-page .form-card__head .form-note { margin: var(--space-3) 0 0; }
/* Mobile first: with no card chrome below 40em, a ruled top edge keeps the
form visibly separate from the content above it. From 40em the card
has its own border, so the rule is reset. */
.contact-layout > .form-card {
border-top: 2px solid var(--color-rule-strong);
padding-top: var(--space-5);
}
.quote-form-container .success-message { padding: var(--space-6) var(--space-5); }
@media (min-width: 40em) {
.contact-layout > .form-card { border-top: revert-layer; padding-top: revert-layer; }
.quote-form-container .success-message { padding: revert-layer; }
}
/* ------------------------------------------------ contact.html */
.contact-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
row-gap: var(--space-8);
}
.form-card__head { margin-bottom: var(--space-6); }
.form-card__head h2 { font-size: var(--step-3); }
.contact-page .form-card__head p:not(.form-note) {
margin: var(--space-2) 0 0;
color: var(--color-text-muted);
}
.contact-page .contact-form .form-submit { margin-bottom: 0; }
.map-block { margin-top: var(--space-8); }
.map-block__head {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0 var(--space-5);
margin-bottom: var(--space-3);
}
.map-block__head .eyebrow { margin: 0; }
/* The embed paints over this; if it cannot load (offline, third-party
content blocked) the box still shows where we are and how to get there.
aria-hidden: the address and the open-in-Maps link are already above. */
.contact-page .map { position: relative; }
.contact-page .map iframe { position: relative; z-index: 1; }
.map__fallback {
position: absolute;
inset: 0;
display: grid;
place-content: center;
justify-items: center;
gap: var(--space-2);
padding: var(--space-5);
text-align: center;
color: var(--color-text-muted);
}
.map__fallback i { font-size: 1.5rem; color: var(--color-marker); }
.map__fallback p { margin: 0; color: var(--color-text); text-wrap: balance; }
@media (min-width: 64em) {
.contact-layout {
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--space-5);
align-items: start;
}
.contact-layout > .contact-info {
grid-column: 1 / span 5;
position: sticky;
top: calc(var(--header-h) + var(--space-6));
}
.contact-layout > .form-card { grid-column: 7 / -1; }
/* Short fields pair up so the form is about as tall as the info
column beside it; the date, message, submit and status rows keep
the full width. */
.contact-page .contact-form {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--space-5);
align-items: start;
}
.contact-page .contact-form > :nth-child(n + 7) { grid-column: 1 / -1; }
.map-block { margin-top: var(--space-9); }
}
/* ------------------------------------------------ quote.html */
.quote-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
row-gap: var(--space-7);
}
/* Mobile: the form comes first, the help block after it. */
.quote-layout > .form-aside { order: 2; }
.quote-layout > .form-aside .form-help {
margin-top: 0;
padding-top: var(--space-4);
border-top: 2px solid var(--color-rule-strong);
}
.quote-layout .form-help .eyebrow { margin-bottom: var(--space-2); }
/* Paired fields: a hint under one field must not stretch its neighbour. */
.quote-form .form-row { align-items: start; }
/* 活動地點: three short chips on one row, the "其他" chip (with its inline
text input) on its own full-width row. */
.quote-form .checkbox-group:not(.multi-column) {
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: start;
}
.quote-form .checkbox-group label:has(.inline-input) {
grid-column: 1 / -1;
flex-wrap: nowrap;
white-space: nowrap;
}
.quote-form .checkbox-group label:has(.inline-input) .inline-input { flex: 1 1 0; min-width: 0; }
/* 需要 / 不需要: always a pair. */
.quote-form .radio-group {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 28rem;
}
/* Each numbered part is its own .form-section, and the section (not its
h3) carries the id the index links to. The sections stack with no gap
(padding, not margin; flow-root stops child margins collapsing out),
so the IntersectionObserver in js/main.js always has exactly one
section under its reading band (30%-40% of the viewport) and the
highlight is right in both scroll directions. */
.quote-form .form-section { display: flow-root; }
.quote-form .form-section + .form-section { padding-top: var(--space-7); }
.quote-form .form-navigation { padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
/* After a successful submit the form is hidden by the page script, so the
section index would point at nothing. */
.quote-layout:has(#quoteForm[style*="none"]) .form-index { display: none; }
.quote-layout:has(#quoteForm[style*="none"]) .form-help { margin-top: 0; }
/* The success panel is its own surface; drop the card chrome around it so
it is not a box inside a box. */
.quote-form-container:has(> #quoteForm[style*="none"]) {
padding: 0;
border-color: transparent;
background: none;
box-shadow: none;
}
@media (min-width: 64em) {
.quote-layout {
grid-template-columns: repeat(12, minmax(0, 1fr));
column-gap: var(--space-5);
align-items: start;
}
.quote-layout > .form-aside {
order: 0;
grid-column: 1 / span 3;
}
.quote-layout > .form-aside .form-help {
margin-top: var(--space-7);
padding-top: var(--space-4);
}
.quote-layout > .form-card { grid-column: 4 / -1; }
/* An index jump lands the section top just above the reading band
(29% of the viewport, below the sticky header's scroll-padding), so
the section jumped to is the one highlighted, also on instant jumps
and when jumping back up. Only where the index is shown. */
.quote-form .form-section {
scroll-margin-top: calc(29vh - var(--header-h) - var(--space-4));
}
}
}