/* ===================================================================== pages/contact.css: Contact page blocks (/contact) --------------------------------------------------------------------- Loaded on contact.html only, AFTER the shared design system: Same conventions as pds.css: every class starts "pds-", tokens come from pds.css section 1, no inline styles, no url() images. Contact-only classes start "pds-contact-". Breakpoints match pds.css: 1180, 1023 (tablet), 640, 500 (phone). Shared components, reused unchanged: page header .pds-page-head (6.20; was C1 here until Pricing) equal tiles .pds-tiles / .pds-tile + .pds-icon-tile (6.18, 6.1) text links .pds-textlink--wrap (6.2) FAQ .pds-faq, .pds-acc, links in answers (6.14, 8.10) final CTA .pds-cta-band--pets (6.15) Behaviour: pds.js section 8 (the form) and 9 (the tile link that opens FAQ 2). What lives here (in page order): C2 How to contact: route tiles .pds-route, .pds-tile__links (SHARED CANDIDATE) C3 Send us a message: the form .pds-form-card, .pds-form, .pds-field (SHARED CANDIDATE) C4 The note under the form .pds-contact-note "SHARED CANDIDATE" blocks are written generically, so they can move into pds.css (section 6) as soon as a second page needs them. ===================================================================== */ /* C1 (the centred page header) moved to pds.css 6.20 when Pricing became the second page to use it. */ /* --------------------------------------------------------------------- C2. How to contact Petcademy: four route tiles (SHARED CANDIDATE) The shared equal tiles (pds.css 6.18: 4 across from 1024px, an even 2 × 2 on tablets, stacked on phones), each with a small line icon in place of an illustration, then the H3 title, one line and its link(s). The links sit at the bottom of every tile (margin-top: auto), so they line up across the row; tile 4 has two, stacked. The tile's background starts purple 50, so its icon disc is white with a soft lift (--pds-tint), never purple 50 on purple 50. Phones: each tile is a row (icon on the left, everything else beside it), so the four routes stay short. --------------------------------------------------------------------- */ .pds-route { --pds-tint: #fff; } .pds-route .pds-tile__icon { box-shadow: var(--pds-shadow-sm); } .pds-tile__links { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: auto; padding-top: 20px; } @media (max-width: 500px) { .pds-routes { grid-auto-rows: auto; } /* stacked: each tile as tall as its content (as .pds-tiles--3 does), so tiles 1–3 don't take tile 4's two-link height */ .pds-route { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-content: start; padding: 20px 20px 22px 16px; } .pds-route .pds-tile__icon { grid-row: 1 / span 3; margin-bottom: 0; } /* the 40px phone tile: pds.css 6.1 */ .pds-route .pds-tile__title { font-size: 1.125rem; } .pds-route .pds-tile__text { margin-top: 4px; font-size: var(--pds-fs-meta); line-height: 1.5; } .pds-tile__links { padding-top: 12px; } } /* --------------------------------------------------------------------- C3. Send us a message: the form (A12; SHARED CANDIDATE) One column in a white card up to 640px wide, on a purple 50 band, under a centred section header. Behaviour: pds.js section 8. - Fields: label above, then the control, then its error line, then its helper text. No placeholder text inside fields (spec A12). Optional fields say "(optional)" in the label; the rest are required (no asterisks). Controls are 16px text (iOS doesn't zoom), at least 52px tall, with a 3.5:1 border (--pds-field-line, WCAG 1.4.11) that turns purple 700 on focus, plus the site's focus ring. - Errors: --pds-error (7.3:1 on white), never colour alone: a red disc with a white "!" (drawn with gradients, so screen readers skip it), the message, a thicker border and aria-invalid. An empty error line takes no space (:empty). - The select is styled like the text fields, with the shared chevron icon (pointer-events: none) instead of the browser's arrow. While it's still on "Choose one" its text is muted. - Sending: the button shows a small ring while the form is aria-busy (spinning only when motion is allowed; pds.css section 10 cuts every animation to .01ms under reduced motion, which would make an endless spin flicker). A failed send fills .pds-form__alert (role="alert"). - Success: .pds-form__done replaces the form in the same card. - .pds-form__trap: the invisible spam check (a honeypot field). Off screen, hidden from screen readers and out of the tab order; people never see it, so a filled-in value marks a bot (the server drops it). --------------------------------------------------------------------- */ .pds-contact-form .pds-sec-head .pds-lede { text-wrap: balance; } /* no "business days." alone on the last line */ .pds-form-card { position: relative; max-width: 640px; margin: 0 auto; padding: clamp(24px, 4vw, 44px); background: #fff; border: 1px solid var(--pds-line); border-radius: var(--pds-r-card); box-shadow: var(--pds-shadow-md); } .pds-form { display: grid; gap: 26px; } .pds-field { display: grid; gap: 8px; } .pds-field__label { font-size: 1rem; font-weight: 700; line-height: 1.4; color: var(--pds-deep); } .pds-field__opt { font-weight: 400; color: var(--pds-muted); } .pds-field__control { display: block; width: 100%; min-height: 52px; margin: 0; padding: 12px 16px; font: 400 1rem/1.5 var(--pds-font); color: var(--pds-deep); background: #fff; border: 1.5px solid var(--pds-field-line); border-radius: var(--pds-r-chip); transition: border-color .18s ease, box-shadow .18s ease; } .pds-field__control:hover { border-color: var(--pds-deep); } .pds-field__control:focus { border-color: var(--pds-action); } .pds .pds-field__control:focus-visible { outline-offset: 2px; } .pds-field__control[aria-invalid="true"] { border-color: var(--pds-error); box-shadow: inset 0 0 0 1px var(--pds-error); } textarea.pds-field__control { min-height: 168px; resize: vertical; } .pds-field__select { position: relative; } .pds-field__select .pds-field__control { -webkit-appearance: none; appearance: none; padding-right: 48px; cursor: pointer; } .pds-field__select .pds-field__control:invalid { color: var(--pds-muted); } /* still on "Choose one" */ .pds-field__select option { color: var(--pds-deep); } .pds-field__select .pds-i { position: absolute; top: 50%; right: 16px; width: 20px; height: 20px; margin-top: -10px; color: var(--pds-deep); pointer-events: none; } .pds-field__help { font-size: var(--pds-fs-meta); line-height: 1.5; color: var(--pds-muted); } .pds-field__error, .pds-form__alert { display: flex; align-items: flex-start; gap: 8px; font-size: var(--pds-fs-meta); font-weight: 500; line-height: 1.45; color: var(--pds-error); } .pds-field__error:empty { display: none; } .pds-field__error::before, .pds-form__alert::before { /* a red disc with a white "!" */ content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: linear-gradient(#fff, #fff) 50% 4px / 2px 6.5px no-repeat, linear-gradient(#fff, #fff) 50% 12px / 2px 2px no-repeat, var(--pds-error); } /* Privacy line, button, then the send-failure alert. The alert (role="alert") stays in the accessibility tree while it's empty, so screen readers announce the message when pds.js writes it; empty, it takes no space. */ .pds-form__actions { display: flex; flex-direction: column; align-items: flex-start; margin-top: 4px; } .pds-form__privacy { margin-bottom: 18px; font-size: var(--pds-fs-meta); line-height: 1.5; color: var(--pds-muted); } .pds-form__alert { align-self: stretch; gap: 10px; margin-top: 18px; padding: 14px 16px; border: 1.5px solid var(--pds-error); border-radius: var(--pds-r-chip); background: rgba(176, 0, 32, .04); } .pds-form__alert:empty { margin: 0; padding: 0; border: 0; } .pds-form__alert:empty::before { content: none; } .pds-form[aria-busy="true"] .pds-form__submit { cursor: progress; } .pds-form[aria-busy="true"] .pds-form__submit::after { /* the sending ring */ content: ""; width: 18px; height: 18px; margin-right: -6px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; } @media (prefers-reduced-motion: no-preference) { .pds-form[aria-busy="true"] .pds-form__submit::after { animation: pds-spin .8s linear infinite; } } @keyframes pds-spin { to { transform: rotate(360deg); } } .pds-form__trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* Success: replaces the form, in the same card. Focus moves here (tabindex="-1"). */ .pds-form__done { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: clamp(16px, 3vw, 36px) 8px; border-radius: var(--pds-r-md); text-align: center; } .pds-form__done-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--pds-accent); color: #fff; } .pds-form__done-icon .pds-i { width: 28px; height: 28px; stroke-width: 2.4; } .pds-form__done p { max-width: 32ch; font-size: clamp(1.125rem, 1.04rem + .3vw, 1.3125rem); font-weight: 500; line-height: 1.45; letter-spacing: -.01em; color: var(--pds-deep); text-wrap: balance; } @media (max-width: 500px) { .pds-form-card { padding: 22px 18px 24px; border-radius: var(--pds-r-card); } .pds-form { gap: 22px; } .pds-form__actions { align-items: stretch; } .pds-form__submit { width: 100%; } } /* --------------------------------------------------------------------- C4. The note under the form: where to log in instead (both log-ins) Centred small text under the card. --------------------------------------------------------------------- */ .pds-contact-note { max-width: 640px; margin: 24px auto 0; text-align: center; font-size: var(--pds-fs-meta); line-height: 1.6; color: var(--pds-muted); } .pds-contact-note a { white-space: nowrap; } /* "Pet parent log in" never breaks across lines on phones */ .pds-contact-note__sep { margin: 0 6px; }