/* =========================================================
FORM-DARK — shared dark "app-checkout" skin for the site's
public contact forms.
Re-skins the white form.css template (Buy-this-Van, Contact Service,
Service > Contact) AND the legacy .contact__form template (Contact Us)
to match the app-checkout aesthetic: dark glass panel, dark inputs with
the bright top-edge highlight + red focus ring, uppercase muted labels,
titled sections in place of dotted
dividers, and a red cta.css submit.
Scoped to body.form-dark so other forms on the site are untouched.
Loaded AFTER form.css / m072224.css, so these higher-specificity rules win.
========================================================= */
body.form-dark {
/* Mirrors the app-checkout token set (app-checkout.css :root) */
--fd-text: #f5f5f5;
--fd-text-soft: #d6d7dc;
--fd-text-muted: #a6a8b0;
--fd-border: rgba(255, 255, 255, 0.085);
--fd-raised: #202022;
--fd-req: rgba(220, 70, 70, 0.85);
--fd-panel-bg:
linear-gradient(
180deg,
rgba(255, 255, 255, 0.055) 0%,
rgba(255, 255, 255, 0.025) 100%
),
rgba(8, 8, 9, 0.48);
background-color: #050505;
}
/* Section wrappers sit on the dark body; drop any inherited light surface */
body.form-dark .s-form,
body.form-dark .s-contact {
background-color: transparent;
}
/* ── Form container → checkout glass panel ──
.s-form form = form.css template (Buy-this-Van, Contact Service)
.contact__form = legacy Contact Us template */
body.form-dark .s-form form,
body.form-dark .contact__form {
max-width: 46rem;
margin: 2.5rem auto 3.5rem;
padding: 2.5rem 2.5rem 2.75rem;
gap: 1.25rem;
background: var(--fd-panel-bg);
border: 1px solid var(--fd-border);
border-radius: 1.1rem;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 24px 60px rgba(0, 0, 0, 0.5);
backdrop-filter: blur(20px) saturate(135%);
-webkit-backdrop-filter: blur(20px) saturate(135%);
color: var(--fd-text-soft);
}
/* Contact Us inner grid — strip the legacy padding/centering now that the
form element itself is the panel */
body.form-dark .contact__form .form-wrapper {
max-width: none;
margin: 0;
padding: 0;
}
/* ── Copy ── */
/* Top line reads as a descriptive title for the form */
body.form-dark form p.form-lead {
margin: 0 0 0.25rem;
color: var(--fd-text);
font-size: 1.4rem;
font-weight: 600;
line-height: 1.32;
letter-spacing: -0.015em;
}
/* Generic intro/closing copy */
body.form-dark form p {
color: var(--fd-text-muted);
font-size: 0.95rem;
line-height: 1.6;
}
/* Info callout — left-aligned to the form container */
body.form-dark form p.form-note {
display: flex;
align-items: flex-start;
gap: 0.65rem;
margin: 0.5rem 0 0;
max-width: 34rem;
padding: 0.85rem 1rem;
border: 1px solid var(--fd-border);
border-radius: var(--theme-radius-md, 1rem);
background: rgba(255, 255, 255, 0.03);
color: var(--fd-text-muted);
font-size: 0.85rem;
line-height: 1.55;
text-align: left;
}
body.form-dark form p.form-note i {
flex-shrink: 0;
margin-top: 0.05em;
color: var(--fd-text-muted);
font-size: 1rem;
}
/* Emphasis within the note (beats the global * { font-weight: 300 } reset) */
body.form-dark form p.form-note strong {
color: var(--fd-text-soft);
font-weight: 700;
}
/* ── Sectioning — clean titled groups replace the old dotted
dividers,
mirroring the app-checkout form-section header (bold title + hairline rule). */
body.form-dark form fieldset {
gap: 1.05rem 1rem;
}
body.form-dark form .form-section-head {
grid-column: 1 / -1;
display: flex;
align-items: baseline;
margin-top: 1.15rem;
padding-bottom: 0.6rem;
border-bottom: 1px solid var(--fd-border);
}
body.form-dark form .form-section-head:first-child {
margin-top: 0;
}
body.form-dark form .form-section-head span {
color: var(--fd-text);
font-size: 0.98rem;
font-weight: 700;
letter-spacing: -0.01em;
}
/* ── Labels ── */
body.form-dark form label {
margin-bottom: 0.4rem;
color: var(--fd-text-muted);
font-size: 0.68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.07em;
line-height: 1.2;
}
/* Required asterisk — matches the app-checkout .checkout-field-req color */
body.form-dark form label span {
color: var(--fd-req);
font-weight: 700;
}
/* ── Inputs / selects / textarea — match .cart-checkout-grid fields.
.form-control covers the legacy Contact Us inputs too. ── */
body.form-dark form input[type="text"],
body.form-dark form input[type="email"],
body.form-dark form input[type="tel"],
body.form-dark form select,
body.form-dark form textarea,
body.form-dark form .form-control {
width: 100%;
min-height: 48px;
margin-bottom: 0;
padding: 0.8rem 0.95rem;
border: 1px solid rgba(255, 255, 255, 0.05);
/* Match the app-checkout "Email or phone number" field radius
(checkout uses --quote-radius-md → --theme-radius-md = 1rem). */
border-radius: var(--theme-radius-md, 1rem);
background: rgba(255, 255, 255, 0.03);
color: var(--fd-text-soft);
font-size: 0.95rem;
font-family: inherit;
letter-spacing: normal;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.45),
0 1px 2px rgba(0, 0, 0, 0.12);
transition:
border-color 160ms ease,
box-shadow 160ms ease,
background 160ms ease;
}
body.form-dark form textarea {
min-height: 7rem;
resize: vertical;
}
body.form-dark form input::placeholder,
body.form-dark form textarea::placeholder {
color: rgba(255, 255, 255, 0.48);
}
body.form-dark form input[type="text"]:hover,
body.form-dark form input[type="email"]:hover,
body.form-dark form input[type="tel"]:hover,
body.form-dark form select:hover,
body.form-dark form textarea:hover,
body.form-dark form .form-control:hover {
background: rgba(255, 255, 255, 0.15);
}
body.form-dark form input[type="text"]:focus,
body.form-dark form input[type="email"]:focus,
body.form-dark form input[type="tel"]:focus,
body.form-dark form select:focus,
body.form-dark form textarea:focus,
body.form-dark form .form-control:focus {
outline: none;
background: rgba(255, 255, 255, 0.2);
color: #ffffff;
box-shadow:
0 0 0 3px rgba(170, 0, 0, 0.16),
inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
/* Dropdown option list — dark, matching checkout */
body.form-dark form select option,
body.form-dark form select optgroup {
background: var(--fd-raised);
color: var(--fd-text-soft);
}
/* Autofill — keep the dark field instead of the browser's white/yellow fill */
body.form-dark form input:-webkit-autofill,
body.form-dark form input:-webkit-autofill:hover,
body.form-dark form input:-webkit-autofill:focus {
-webkit-text-fill-color: var(--fd-text);
caret-color: var(--fd-text);
-webkit-box-shadow:
inset 0 0 0 1000px var(--fd-raised),
0 0 0 3px rgba(170, 0, 0, 0.12);
box-shadow:
inset 0 0 0 1000px var(--fd-raised),
0 0 0 3px rgba(170, 0, 0, 0.12);
transition: background-color 9999s ease-in-out 0s;
}
/* ── Checkbox group (Contact Service "Type of work wanted") ──
The option rows must read as normal body text, not the uppercase
eyebrow used for field labels. */
body.form-dark form .checkbox-group {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.5rem 1.25rem;
margin-top: 0.25rem;
}
body.form-dark form .checkbox-group br {
display: none;
}
body.form-dark form .checkbox-group label {
display: flex;
align-items: center;
gap: 0.55rem;
margin: 0;
color: var(--fd-text-soft);
font-size: 0.9rem;
font-weight: 400;
text-transform: none;
letter-spacing: normal;
line-height: 1.35;
cursor: pointer;
}
body.form-dark form .checkbox-group input[type="checkbox"] {
width: 1.05rem;
height: 1.05rem;
min-height: 0;
margin: 0;
padding: 0;
flex-shrink: 0;
accent-color: #c21414;
}
/* ── Custom file upload (Contact Service) ── */
body.form-dark form .custom-file-upload {
height: auto;
padding: 0.9rem 1rem;
border: 1px dashed rgba(255, 255, 255, 0.18);
border-radius: var(--theme-radius-md, 1rem);
background: rgba(255, 255, 255, 0.03);
color: var(--fd-text-muted);
font-size: 0.9rem;
text-transform: none;
letter-spacing: normal;
transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}
body.form-dark form .custom-file-upload:hover {
border-color: rgba(255, 255, 255, 0.32);
background: rgba(255, 255, 255, 0.06);
color: var(--fd-text-soft);
}
/* ── Success message (Contact Us) ── */
body.form-dark .contact__msg p {
color: var(--fd-text-soft);
}
/* ── Submit CTA ──
Skin comes from the shared red recipe (cta.css → .tv-cta--red). Left-align
it to the form container for both templates:
- form.css template: the button is a direct grid child of