/* submit.css - page-specific styles for /submit/. Assumes base.css already provides: color/font/spacing tokens, body/main resets, .sr-only, .page-title, .page-subtitle, and the default :focus-visible treatment. Nothing here redeclares those. */ html { /* Supports the "jump to submit" link's native fragment navigation (works with zero JS); JS only smooths it further. Scoped here since this rule only matters on this page. */ scroll-behavior: smooth; } .page-intro { color: var(--color-ink-soft); margin: 0 0 var(--space-3); max-width: 56ch; } .page-intro:last-of-type { margin-bottom: var(--space-5); } /* ---- Form error banner ---- Appears above the form when a submission is returned with errors. Uses the ink color rather than a harsh red — serious but consistent with the site's quiet tone. Positioned before the form in the DOM so screen readers encounter it first; JS scrolls it into view on prefilled repopulation. */ .form-error-banner { background: var(--color-ink); color: var(--color-paper); border-radius: 6px; padding: var(--space-3) var(--space-4); margin-bottom: var(--space-5); } .form-error-banner p { margin: 0; font-size: 0.95rem; color: var(--color-paper); } .form-error-banner a { color: var(--color-paper); font-weight: 600; text-decoration: underline; } .form-error-banner a:focus-visible { outline: 2px solid var(--color-paper); outline-offset: 2px; } .hp-field { position: absolute; left: -8979px; width: 1px; height: 1px; overflow: hidden; } /* ---- Thread fields ---- */ .thread-fieldset { border: none; margin: 0; padding: 0; } .thread-fields { list-style: none; margin: 0; position: relative; padding-left: var(--space-4); border-left: 2px solid var(--color-line); margin-bottom: var(--space-4); } .thread-step { margin-left: calc(var(--space-1) * min(var(--step-index, 0), 6)); margin-bottom: var(--space-4); } /* ---- Progressive reveal: height-animated grid-row collapse ---- Only applied once JS is confirmed running (base.css/base.html.j2 removes .no-js from on load, site-wide). Absent JS, none of this applies, and every step/section is simply present at full height and normal spacing from first paint. */ body:not(.no-js) .thread-step, body:not(.no-js) #closing-fields, body:not(.no-js) .submit-ready-banner { display: grid; grid-template-rows: 0fr; margin-bottom: 0; overflow: hidden; visibility: hidden; opacity: 0; transform: translateY(6px); /* visibility is deliberately left out of this list — it should flip instantly the moment reveal begins, not fade, so the field becomes tabbable/announced right away while height, spacing, and appearance continue easing in over 1.5s. */ transition: grid-template-rows 1.5s ease, margin-bottom 1.5s ease, opacity 1.5s ease, transform 1.5s ease; } body:not(.no-js) .thread-step.is-revealed, body:not(.no-js) #closing-fields.is-revealed, body:not(.no-js) .submit-ready-banner.is-revealed { grid-template-rows: 1fr; margin-bottom: var(--space-4); visibility: visible; opacity: 1; transform: translateY(0); } /* Required for the grid-row collapse trick: the direct grid child must be allowed to shrink below its natural content height. Padding/background live on THESE inner wrappers, never on the outer collapsing element — otherwise the outer element's own padding would still render at full size while "collapsed." */ .thread-step-inner, .closing-fields-inner, .submit-ready-banner-inner { min-height: 0; } .thread-label { display: block; min-height: 1.5em; /* reserves the prompt's line so filling it in on focus doesn't shift layout */ font-family: var(--font-serif); font-size: 1.05rem; margin-bottom: var(--space-2); } .prompt-text { display: inline-block; transition: opacity 0.35s ease; } /* Visually blank until focus, ONLY once JS is running. Absent JS, this never applies, and the real static fallback text baked into the template is simply visible immediately. */ body:not(.no-js) .prompt-text.is-pending { opacity: 0; } .thread-input-row { display: flex; align-items: flex-start; gap: var(--space-2); } .thread-step-number { flex: 0 0 auto; width: 1.75rem; height: 1.75rem; margin-top: 3px; border-radius: 50%; border: 1.5px solid var(--color-thread); color: var(--color-thread); font-family: var(--font-sans); font-size: 0.85rem; font-weight: 600; display: flex; align-items: center; justify-content: center; transition: opacity 0.3s ease; } /* Applied at reveal time, removed on first focus — "your next field is here, waiting," without yet looking "answered." */ .thread-step-number.is-waiting { opacity: 0.5; } /* ---- Auto-growing textarea ("grow-wrap" technique) ---- The textarea and an invisible ::after mirror share one grid cell; the mirror's flowing text content drives the cell's height. */ .grow-wrap { flex: 1 1 auto; display: grid; font-family: var(--font-sans); font-size: 1rem; line-height: 1.5; } .grow-wrap::after { content: attr(data-replicated-value) " "; white-space: pre-wrap; visibility: hidden; grid-area: 1 / 1 / 2 / 2; font: inherit; padding: var(--space-2); border: 1px solid transparent; } .thread-input { grid-area: 1 / 1 / 2 / 2; font: inherit; color: var(--color-ink); background: #fff; border: 1px solid var(--color-line); border-radius: 4px; padding: var(--space-2); width: 100%; resize: vertical; overflow: auto; } body:not(.no-js) .thread-input { /* Once JS confirms it's running, the grow-wrap mirror handles sizing, so manual resize/scroll are no longer needed. */ resize: none; overflow: hidden; } /* Overrides base.css's default :focus-visible treatment for fields in this component specifically: every field here sits inside an ancestor with overflow:hidden (needed for the reveal animation above), so any outline drawn OUTSIDE the border box risks being clipped on whichever edge has no surrounding slack. Drawing it just INSIDE the border avoids that regardless of position. */ .thread-input:focus-visible, .field-group input[type="text"]:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; } .consent-label input[type="checkbox"]:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -1px; } /* Prominence, toggled by JS only in response to a real .thread-input receiving focus (not any focusable element nested in a step — see submit.js's focusin handler). */ .thread-step.is-receded { opacity: 0.55; } .thread-step.is-receded .thread-input { font-size: 0.95rem; } .thread-step.is-active .thread-label { color: var(--color-thread); } /* ---- "Need a starting point?" rotating suggestion widget ---- Sits above the static prompt label, set apart with the same warm-neutral panel background already used for .consent-group below — a deliberate reuse of an existing "boxed aside" color. Enhancement-only: has no useful no-JS fallback (arrows would do nothing, there's no baked list to show), so it stays hidden until JS confirms it can run. */ .starter-prompts { display: none; margin-bottom: var(--space-3); } body:not(.no-js) .starter-prompts { display: block; } .starter-prompts-inner { background: var(--color-paper-alt); border-radius: 6px; padding: var(--space-3); } .starter-prompts-heading { font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-soft); margin: 0 0 var(--space-2); } .starter-prompts-row { display: flex; align-items: center; gap: var(--space-2); } .starter-arrow { flex: 0 0 auto; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1.5px solid var(--color-thread); background: transparent; color: var(--color-thread); font-size: 1rem; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .starter-arrow:hover { background: #fff; } .starter-arrow:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; } /* Pulses (scale + background flash) on the "next" arrow each time auto-advance fires on its own — a visual cue for what the arrows do, echoing the action a manual click on the same arrow would perform. Skipped under prefers-reduced-motion (see JS). */ @keyframes starter-arrow-pulse { 0% { transform: scale(1); background-color: transparent; } 30% { transform: scale(1.25); background-color: #fff; } 100% { transform: scale(1); background-color: transparent; } } .starter-arrow-next.is-pulsing { animation: starter-arrow-pulse 0.6s ease; } .starter-prompt-display { flex: 1 1 auto; /* Fixed box, not natural flow: reserves space for ~2 lines so the typewriter effect never shifts surrounding layout as characters are added. */ min-height: 2.8em; display: flex; align-items: center; } .starter-prompt-text { font-family: var(--font-serif); font-style: italic; font-size: 0.95rem; color: var(--color-ink-soft); transition: opacity 0.22s ease; } /* Used only for manual (arrow-click) navigation's full-text fade — distinct from the typewriter effect, which stays reserved for the ambient auto-advance demonstration. */ .starter-prompt-text.is-fading { opacity: 0; } /* ---- Submit-ready banner ---- Same dark clay / white pairing as .submit-button, deliberately reused rather than introduced fresh. Contrast checked at ~4.7:1 (white on #A8632F) — clears WCAG AA for normal text, though not by much; same "not yet formally verified everywhere" caveat that already applies to the rest of the site's palette. */ .submit-ready-banner-inner { background: var(--color-thread); color: #fff; border-radius: 6px; padding: var(--space-3); } .submit-ready-banner-inner p { margin: 0; font-size: 0.95rem; color: #fff; } .jump-to-submit-link { color: #fff; font-weight: 600; text-decoration: underline; } /* --color-focus (dark brown) would be nearly invisible against this banner's dark clay background — overridden here to the pale paper color specifically within this component. */ .submit-ready-banner-inner .jump-to-submit-link:focus-visible { outline: 2px solid var(--color-paper); outline-offset: 2px; } /* ---- Closing fields ---- */ .field-group { margin-bottom: var(--space-3); } .field-group label { display: block; font-size: 0.9rem; margin-bottom: var(--space-1); } .optional-tag { color: var(--color-ink-soft); font-weight: normal; } .field-group input[type="text"] { display: block; width: 100%; font-family: var(--font-sans); font-size: 1rem; border: 1px solid var(--color-line); border-radius: 4px; padding: var(--space-2); background: #fff; } .optional-details { margin-bottom: var(--space-5); } .optional-details-heading { font-family: var(--font-sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-soft); margin: 0 0 var(--space-3); } .consent-and-submit { margin-bottom: var(--space-3); } .ready-to-send-note { font-size: 0.95rem; color: var(--color-ink-soft); margin: 0 0 var(--space-2); } .consent-group { background: var(--color-paper-alt); border-radius: 6px; padding: var(--space-3); margin-bottom: var(--space-3); } .consent-label { display: flex; gap: var(--space-2); font-size: 0.9rem; align-items: flex-start; } .no-email-note { font-size: 0.85rem; color: var(--color-ink-soft); margin: 0 0 var(--space-3); } .submit-button { font-family: var(--font-sans); font-size: 1rem; font-weight: 500; color: #fff; background: var(--color-thread); border: none; border-radius: 4px; padding: var(--space-2) var(--space-4); cursor: pointer; } .submit-button:hover { background: var(--color-thread-light); } .submit-button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }