/* =========================================================================
West Texas Renaissance Festival — Form Theme
Drop-in stylesheet for any HTML form. Link it once and your forms match.
Usage:
Fonts (add to ):
========================================================================= */
/* ---- Design Tokens (Renaissance palette) ---- */
:root {
/* Surfaces */
--wtrf-background: oklch(0.96 0.02 75); /* warm parchment cream */
--wtrf-foreground: oklch(0.22 0.03 50); /* deep ink brown */
--wtrf-card: oklch(0.94 0.025 70); /* aged parchment */
--wtrf-muted: oklch(0.9 0.02 70);
--wtrf-muted-foreground: oklch(0.5 0.03 55); /* faded ink */
/* Brand */
--wtrf-primary: oklch(0.42 0.09 35); /* deep burgundy / oxblood */
--wtrf-primary-foreground: oklch(0.96 0.02 75);
--wtrf-secondary: oklch(0.88 0.04 60); /* warm stone */
--wtrf-secondary-foreground: oklch(0.28 0.05 40);
--wtrf-accent: oklch(0.62 0.12 70); /* antique gold */
--wtrf-accent-foreground: oklch(0.18 0.03 40);
/* States */
--wtrf-destructive: oklch(0.5 0.2 25); /* heraldic red */
--wtrf-destructive-foreground: oklch(0.96 0.02 75);
--wtrf-border: oklch(0.82 0.04 55);
--wtrf-input: oklch(0.88 0.03 65);
--wtrf-ring: oklch(0.5 0.1 40);
/* Radii & shadows */
--wtrf-radius: 0.375rem;
--wtrf-shadow-card: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
/* Fonts */
--wtrf-font-display: "Cinzel", serif;
--wtrf-font-body: "EB Garamond", serif;
}
/* ---- Base ---- */
.wtrf-form *,
.wtrf-form *::before,
.wtrf-form *::after { box-sizing: border-box; }
.wtrf-form {
font-family: var(--wtrf-font-body);
color: var(--wtrf-foreground);
background-color: var(--wtrf-background);
/* Parchment texture via soft radial glows */
background-image:
radial-gradient(circle at 20% 30%, color-mix(in oklab, var(--wtrf-accent) 8%, transparent) 0%, transparent 40%),
radial-gradient(circle at 80% 70%, color-mix(in oklab, var(--wtrf-primary) 6%, transparent) 0%, transparent 45%);
margin: 0;
padding: 0;
line-height: 1.6;
}
/* ---- Card shell ---- */
.wtrf-card {
max-width: 640px;
margin: 0 auto;
background-color: var(--wtrf-card);
border: 2px solid color-mix(in oklab, var(--wtrf-primary) 30%, transparent);
border-radius: var(--wtrf-radius);
box-shadow: var(--wtrf-shadow-card);
overflow: hidden;
}
/* Ornate gradient top bar */
.wtrf-card::before {
content: "";
display: block;
height: 8px;
background: linear-gradient(to right, var(--wtrf-primary), var(--wtrf-accent), var(--wtrf-primary));
}
.wtrf-card__body { padding: 2.5rem; }
@media (min-width: 640px) { .wtrf-card__body { padding: 2.75rem; } }
/* ---- Headings ---- */
.wtrf-title {
font-family: var(--wtrf-font-display);
color: var(--wtrf-primary);
font-weight: 700;
text-align: center;
margin: 0 0 0.75rem;
}
.wtrf-title--xl { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.15; }
.wtrf-title--lg { font-size: clamp(1.75rem, 4vw, 2.25rem); }
.wtrf-subtitle {
font-family: var(--wtrf-font-body);
color: var(--wtrf-muted-foreground);
text-align: center;
margin: 0 0 2rem;
font-size: 1.05rem;
}
/* ---- Form layout ---- */
.wtrf-form form { display: flex; flex-direction: column; gap: 1.5rem; }
.wtrf-row { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .wtrf-row--2 { grid-template-columns: 1fr 1fr; } }
/* ---- Labels ---- */
.wtrf-label {
display: block;
font-family: var(--wtrf-font-body);
font-weight: 600;
font-size: 0.875rem;
color: var(--wtrf-foreground);
margin-bottom: 0.5rem;
}
/* ---- Inputs / selects / textareas ---- */
.wtrf-input,
.wtrf-select,
.wtrf-textarea {
width: 100%;
font-family: var(--wtrf-font-body);
font-size: 1rem;
color: var(--wtrf-foreground);
background-color: var(--wtrf-background);
border: 1px solid var(--wtrf-input);
border-radius: var(--wtrf-radius);
padding: 0.625rem 1rem;
transition: border-color 0.15s, box-shadow 0.15s;
}
.wtrf-input::placeholder,
.wtrf-textarea::placeholder { color: color-mix(in oklab, var(--wtrf-muted-foreground) 60%, transparent); }
.wtrf-input:focus,
.wtrf-select:focus,
.wtrf-textarea:focus {
outline: none;
border-color: var(--wtrf-accent);
box-shadow: 0 0 0 2px color-mix(in oklab, var(--wtrf-ring) 50%, transparent);
}
.wtrf-textarea { min-height: 6rem; resize: vertical; }
/* ---- Field errors ---- */
.wtrf-error {
font-family: var(--wtrf-font-body);
font-size: 0.875rem;
color: var(--wtrf-destructive);
margin-top: 0.375rem;
}
/* ---- Preference / choice cards ---- */
.wtrf-choices { display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .wtrf-choices { grid-template-columns: 1fr 1fr; } }
.wtrf-choice {
display: flex;
align-items: flex-start;
gap: 0.75rem;
text-align: left;
font-family: var(--wtrf-font-body);
font: inherit;
color: var(--wtrf-foreground);
background-color: var(--wtrf-background);
border: 1px solid var(--wtrf-input);
border-radius: var(--wtrf-radius);
padding: 1rem;
cursor: pointer;
transition: border-color 0.15s, background-color 0.15s;
}
.wtrf-choice:hover { border-color: color-mix(in oklab, var(--wtrf-accent) 50%, transparent); }
.wtrf-choice.is-active {
border-color: var(--wtrf-accent);
background-color: color-mix(in oklab, var(--wtrf-accent) 10%, transparent);
box-shadow: 0 0 0 1px var(--wtrf-accent) inset;
}
.wtrf-choice__icon { flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-top: 0.125rem; color: var(--wtrf-muted-foreground); }
.wtrf-choice.is-active .wtrf-choice__icon { color: var(--wtrf-accent); }
.wtrf-choice__title { font-weight: 600; font-size: 0.875rem; }
.wtrf-choice__desc { font-size: 0.75rem; color: var(--wtrf-muted-foreground); }
/* ---- Primary button ---- */
.wtrf-btn {
width: 100%;
font-family: var(--wtrf-font-display);
font-weight: 600;
font-size: 1.125rem;
letter-spacing: 0.02em;
color: var(--wtrf-primary-foreground);
background-color: var(--wtrf-primary);
border: none;
border-radius: var(--wtrf-radius);
padding: 0.875rem 1.5rem;
cursor: pointer;
box-shadow: 0 10px 20px -8px color-mix(in oklab, var(--wtrf-primary) 60%, transparent);
transition: background-color 0.15s, box-shadow 0.15s, transform 0.05s;
}
.wtrf-btn:hover { background-color: color-mix(in oklab, var(--wtrf-primary) 90%, white); box-shadow: 0 14px 28px -8px color-mix(in oklab, var(--wtrf-primary) 60%, transparent); }
.wtrf-btn:active { transform: scale(0.99); }
/* ---- Consent / helper text ---- */
.wtrf-footnote {
font-family: var(--wtrf-font-body);
font-size: 0.75rem;
color: var(--wtrf-muted-foreground);
text-align: center;
}
/* ---- Success state ---- */
.wtrf-success { text-align: center; padding: 3rem 0; }
.wtrf-success__badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 5rem;
height: 5rem;
border-radius: 9999px;
border: 2px solid var(--wtrf-accent);
background-color: color-mix(in oklab, var(--wtrf-accent) 10%, transparent);
margin-bottom: 1.5rem;
color: var(--wtrf-accent);
}
.wtrf-success__title { font-family: var(--wtrf-font-display); font-size: 1.875rem; font-weight: 600; color: var(--wtrf-primary); margin: 0 0 1rem; }
.wtrf-success__text { font-family: var(--wtrf-font-body); font-style: italic; font-size: 1.125rem; color: var(--wtrf-muted-foreground); max-width: 28rem; margin: 0 auto; }
.wtrf-success__text strong { font-style: normal; font-weight: 600; color: var(--wtrf-foreground); }
.wtrf-link { font-family: var(--wtrf-font-body); font-size: 0.875rem; color: var(--wtrf-accent); background: none; border: none; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; margin-top: 2rem; }