/* ============================================================
Sitizy Forms — public stylesheet
------------------------------------------------------------
Styles the markup emitted by forms_render(). Page-agnostic:
inherits the host page's background and base font where it can.
Link it once in your :
============================================================ */
form.sitizy-form {
--sf-ink: #16243D;
--sf-ink-soft: #4A5A78;
--sf-rule: #C9C1AE;
--sf-rule-soft: #DDD6C5;
--sf-accent: #7aa079;
--sf-accent-dk: #477246;
--sf-success: #3F6B4A;
--sf-error: #8E2929;
color: var(--sf-ink);
font-family: Arial, "Helvetica Neue", sans-serif;
font-size: 14px;
line-height: 18px;
display: flex;
flex-wrap: wrap;
width: 100%;
gap: 1rem 1rem;
}
/* ----- Form name & description: full-width flex items ----- */
.sitizy-form .sitizy-form-name,
.sitizy-form .sitizy-form-description {
flex: 1 1 100%;
margin: 0;
}
/* ----- Field wrapper: defaults to a full-width flex item ----- */
.sitizy-form .sitizy-field {
flex: 1 1 100%;
min-width: 0; /* allow inputs to shrink without overflow */
margin: 0; /* spacing now handled by parent's gap */
}
/* ----- Width utilities: opt-in via CSS classes per field ----- */
.sitizy-form .sitizy-field.half { flex: 1 1 calc(50% - 0.5rem); }
.sitizy-form .sitizy-field.third { flex: 1 1 calc(33.333% - 0.667rem); }
.sitizy-form .sitizy-field.quarter { flex: 1 1 calc(25% - 0.75rem); }
/* Force full width regardless of any width utility */
.sitizy-form .sitizy-field.full { flex: 1 1 100%; }
/* Collapse multi-column fields on narrow screens */
@media (max-width: 600px) {
.sitizy-form .sitizy-field.half,
.sitizy-form .sitizy-field.third,
.sitizy-form .sitizy-field.quarter {
flex: 1 1 100%;
}
}
/* ----- Labels: small, tracked, uppercase — like form letterhead ----- */
.sitizy-form .sitizy-field > label {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--sf-ink-soft);
}
.sitizy-form .sitizy-required {
color: var(--sf-accent);
font-weight: 700;
margin-left: 2px;
}
/* ----- Inputs: writing-line aesthetic — bottom rule only ----- */
.sitizy-form input[type="text"],
.sitizy-form input[type="email"],
.sitizy-form input[type="number"],
.sitizy-form input[type="date"],
.sitizy-form input[type="time"],
.sitizy-form input[type="datetime-local"],
.sitizy-form select,
.sitizy-form textarea {
width: 100%;
min-width: 0; /* allow shrinking inside .half / .third flex items */
box-sizing: border-box;
background: transparent;
border: none;
border-bottom: 1px solid var(--sf-rule);
border-radius: 0;
/*padding: 0.5rem 0;*/
font: inherit;
color: var(--sf-ink);
transition: border-color 120ms ease;
}
/* Remove native chrome only where we fully control the rendering.
date / time / datetime-local keep appearance: auto so the browser
can render its picker trigger — stripping it causes min-width issues
and hides the calendar / clock icon. */
.sitizy-form input[type="text"],
.sitizy-form input[type="email"],
.sitizy-form input[type="number"],
.sitizy-form select {
appearance: none;
-webkit-appearance: none;
}
.sitizy-form input[type="text"]:hover,
.sitizy-form input[type="email"]:hover,
.sitizy-form input[type="number"]:hover,
.sitizy-form input[type="date"]:hover,
.sitizy-form input[type="time"]:hover,
.sitizy-form input[type="datetime-local"]:hover,
.sitizy-form select:hover,
.sitizy-form textarea:hover {
border-bottom-color: var(--sf-ink-soft);
}
.sitizy-form input[type="text"]:focus,
.sitizy-form input[type="email"]:focus,
.sitizy-form input[type="number"]:focus,
.sitizy-form input[type="date"]:focus,
.sitizy-form input[type="time"]:focus,
.sitizy-form input[type="datetime-local"]:focus,
.sitizy-form select:focus,
.sitizy-form textarea:focus {
outline: none;
border-bottom-color: var(--sf-accent);
box-shadow: 0 1px 0 0 var(--sf-accent);
}
.sitizy-form input::placeholder,
.sitizy-form textarea::placeholder {
color: #A89F8C;
font-style: italic;
}
/* ----- Select: custom chevron, no system arrow ----- */
.sitizy-form select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0.25rem center;
padding-right: 1.5rem;
cursor: pointer;
}
/* ----- Textarea: ruled paper, the signature element ----- */
.sitizy-form textarea {
min-height: 9.6em; /* ~5 ruled lines */
line-height: 1.6em;
resize: vertical;
padding-top: 0;
padding-bottom: 0.5rem;
background-image: repeating-linear-gradient(
to bottom,
transparent 0,
transparent calc(1.6em - 1px),
var(--sf-rule-soft) calc(1.6em - 1px),
var(--sf-rule-soft) 1.6em
);
background-attachment: local; /* rules scroll with text */
border-bottom: 1px solid var(--sf-rule);
}
.sitizy-form textarea:focus {
box-shadow: none; /* the ruled lines already carry visual weight */
}
/* ----- Radio group ----- */
.sitizy-form .sitizy-radio-group {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.25rem;
padding-top: 0.25rem;
}
.sitizy-form .sitizy-radio {
display: inline-flex;
align-items: center;
gap: 0.45rem;
text-transform: none;
letter-spacing: 0;
font-size: 1rem;
color: var(--sf-ink);
font-weight: 400;
margin: 0;
}
.sitizy-form input[type="radio"],
.sitizy-form input[type="checkbox"] {
accent-color: var(--sf-accent);
width: 1rem;
height: 1rem;
margin: 0;
}
/* ----- Checkbox row (single boolean field) ----- */
.sitizy-form .sitizy-field-checkbox > label {
display: inline-flex;
align-items: center;
gap: 0.6rem;
text-transform: none;
letter-spacing: 0;
font-size: 1rem;
font-weight: 400;
color: var(--sf-ink);
}
/* ----- Help text ----- */
.sitizy-form .sitizy-help {
font-size: 0.85rem;
color: var(--sf-ink-soft);
margin: 0.4rem 0 0 0;
font-style: italic;
}
/* ----- GDPR block ----- */
.sitizy-form .sitizy-field-gdpr {
padding: 1rem 0 0 0;
border-top: 1px solid var(--sf-rule-soft);
}
.sitizy-form .sitizy-field-gdpr > label {
display: flex;
align-items: flex-start;
gap: 0.6rem;
text-transform: none;
letter-spacing: 0;
font-size: 0.92rem;
font-weight: 400;
color: var(--sf-ink);
}
.sitizy-form .sitizy-legal {
font-size: 0.78rem;
color: var(--sf-ink-soft);
margin: 0.65rem 0 0 1.6rem;
line-height: 1.5;
}
/* ----- Errors (inline + global) ----- */
.sitizy-form .sitizy-error {
color: var(--sf-error);
font-size: 0.82rem;
margin: 0.35rem 0 0 0;
min-height: 1em;
letter-spacing: 0;
text-transform: none;
}
.sitizy-form .sitizy-error:empty {
margin: 0;
min-height: 0;
}
/* ----- Separator ----- */
.sitizy-form .sitizy-field-separator hr {
border: none;
border-bottom: 1px solid var(--sf-rule);
margin: 0;
}
.sitizy-form .sitizy-separator-label {
display: block;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sf-ink-soft);
margin-bottom: 0.5rem;
}
/* ----- Submit ----- */
.sitizy-form .sitizy-field-submit {
margin-top: 2rem;
}
.sitizy-form button[type="submit"] {
background: var(--sf-accent);
color: #FDFBF4;
border: none;
padding: 0.50rem 1.6rem;
font: inherit;
font-weight: 600;
letter-spacing: 0.04em;
cursor: pointer;
transition: background-color 120ms ease, transform 80ms ease;
border-radius: 1px;
}
.sitizy-form button[type="submit"]:hover {
background: var(--sf-accent-dk);
}
.sitizy-form button[type="submit"]:active {
transform: translateY(1px);
}
.sitizy-form button[type="submit"]:focus-visible {
outline: 2px solid var(--sf-ink);
outline-offset: 3px;
}
.sitizy-form button[type="submit"]:disabled {
opacity: 0.55;
cursor: wait;
}
/* ----- Submission feedback ----- */
.sitizy-form .sitizy-form-feedback {
margin-top: 1.25rem;
font-size: 0.95rem;
min-height: 1.25rem;
}
.sitizy-form .sitizy-form-feedback.sitizy-success {
color: var(--sf-success);
}
.sitizy-form .sitizy-form-feedback.sitizy-success::before {
content: "✓ ";
font-weight: 700;
}
.sitizy-form .sitizy-form-feedback.sitizy-error-global {
color: var(--sf-error);
}
/* ----- Reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
.sitizy-form * {
transition: none !important;
}
}