/* =========================================
SOFTERFIELDS PRIVATE GUEST LIST
Squarespace Form Block Styling
========================================= */
.sqs-block-form {
--sf-bg: #0a0906;
--sf-text: #eeeae0;
--sf-muted: #a7a198;
--sf-border: rgba(238, 234, 224, 0.28);
--sf-border-active: rgba(238, 234, 224, 0.75);
--sf-field-bg: rgba(255, 255, 255, 0.025);
}
/* Main form container */
.sqs-block-form .form-wrapper {
max-width: 720px;
margin: 0 auto;
padding: 42px 38px;
background: var(--sf-bg);
border: 1px solid var(--sf-border);
}
/* Form field spacing */
.sqs-block-form .field-list .field {
margin-bottom: 28px;
}
/* Labels */
.sqs-block-form .title,
.sqs-block-form .field-list .title {
display: block;
margin-bottom: 10px;
color: var(--sf-text);
font-family: Baskerville, "Times New Roman", serif;
font-size: 16px;
font-weight: 400;
letter-spacing: 0.02em;
line-height: 1.4;
}
/* Required marker */
.sqs-block-form .required {
color: var(--sf-muted);
}
/* Descriptions and captions */
.sqs-block-form .description,
.sqs-block-form .caption-text,
.sqs-block-form .field-element + .description {
color: var(--sf-muted);
font-family: Arial, sans-serif;
font-size: 12px;
line-height: 1.6;
}
/* Text fields */
.sqs-block-form input[type="text"],
.sqs-block-form input[type="email"],
.sqs-block-form input[type="tel"],
.sqs-block-form input[type="number"],
.sqs-block-form textarea,
.sqs-block-form select {
width: 100%;
padding: 15px 14px;
color: var(--sf-text);
background: var(--sf-field-bg);
border: 1px solid var(--sf-border);
border-radius: 0;
box-shadow: none;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.5;
transition:
border-color 180ms ease,
background-color 180ms ease;
}
/* Focus states */
.sqs-block-form input[type="text"]:focus,
.sqs-block-form input[type="email"]:focus,
.sqs-block-form input[type="tel"]:focus,
.sqs-block-form input[type="number"]:focus,
.sqs-block-form textarea:focus,
.sqs-block-form select:focus {
outline: none;
background: rgba(255, 255, 255, 0.045);
border-color: var(--sf-border-active);
}
/* Text area */
.sqs-block-form textarea {
min-height: 140px;
resize: vertical;
}
/* Dropdown options */
.sqs-block-form select option {
color: #111;
background: #fff;
}
/* Checkbox and radio labels */
.sqs-block-form .option {
margin-bottom: 10px;
color: var(--sf-text);
font-family: Arial, sans-serif;
font-size: 13px;
line-height: 1.55;
}
/* Checkbox alignment */
.sqs-block-form .option label {
display: flex;
align-items: flex-start;
gap: 10px;
}
/* Checkbox and radio controls */
.sqs-block-form input[type="checkbox"],
.sqs-block-form input[type="radio"] {
flex: 0 0 auto;
margin-top: 4px;
accent-color: var(--sf-text);
}
/* Submit button container */
.sqs-block-form .form-button-wrapper {
margin-top: 36px;
text-align: left;
}
/* Submit button */
.sqs-block-form .form-button-wrapper .sqs-system-button {
min-width: 220px;
padding: 15px 24px;
color: var(--sf-bg);
background: var(--sf-text);
border: 1px solid var(--sf-text);
border-radius: 0;
font-family: Arial, sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
transition:
color 180ms ease,
background-color 180ms ease;
}
.sqs-block-form .form-button-wrapper .sqs-system-button:hover {
color: var(--sf-text);
background: transparent;
}
/* Error messages */
.sqs-block-form .field-error,
.sqs-block-form .form-item-error {
margin-top: 8px;
color: var(--sf-text);
font-family: Arial, sans-serif;
font-size: 12px;
}
/* Success message */
.sqs-block-form .form-submission-text {
padding: 36px 0;
color: var(--sf-text);
font-family: Baskerville, "Times New Roman", serif;
font-size: 20px;
line-height: 1.55;
}
/* Mobile */
@media screen and (max-width: 640px) {
.sqs-block-form .form-wrapper {
padding: 30px 20px;
}
.sqs-block-form .form-button-wrapper .sqs-system-button {
width: 100%;
}
}