/** * Founding Client Program page styles (/founding-client). * Loaded only on founding-client.php — page-specific styles that do not belong in site.css. * * Design source of truth: the 01-prd-founding-client-offer.md prototype Artifact (§ 6 Design Considerations) — * the site's design family deliberately dialed up. Every color consumes site.css * role tokens (--text, --text-muted, --text-accent, --surface-*, --tint-primary-*); * no literal brand hex. * * Reuses site.css block classes: the section system (.section, .section--dark, * .section--light, .section__container, .section__heading), .btn / .btn--primary / * .btn__text, the .expandable accordion family (FAQ), the form primitives * (.form-group, .form-label, .form-input, .form-select, .form-textarea, .form-hint, * .form-error, .form-error-summary), .link-body, .visually-hidden, and .skip-link. * * Motion gates: JS-dependent initial states sit behind the root .js class (never on * base selectors — no-JS visitors see finished states, FR 4); every transition and * animation of 200ms or longer is disabled under the root .motion-reduce class, * rendering finished states (FR 11). The wavy dividers are the baseline .wave * (site.css) over the shared filter defs in includes/svg-defs.php, which the * page emits first in (FR 10, promoted by 01-prd-marketing-restyle.md FR 8). * * Responsive Breakpoints (Desktop-First): * - Desktop: 1025px+ (base styles, no media query) * - Laptop: max-width: 1024px * - Tablet: max-width: 768px * - Mobile: max-width: 480px */ /* ========================================================================== Page-Wide Editorial Register ========================================================================== */ /* Groups a section's eyebrow + heading (+ lead) and spaces the block from the section body beneath it. */ .fc-section__intro-group { margin-bottom: var(--space-xl); } /* The mono meta line under CTAs is the baseline .meta-line (site.css; promoted from here by 01-prd-marketing-restyle.md FR 7). */ /* ========================================================================== Cosmic Backdrops & Shared Treatments — starscape tile, brand washes, glow CTAs ========================================================================== */ /* The starscape tile on the dark sections is the baseline .starscape (site.css, promoted from here by 01-prd-marketing-restyle.md FR 9); the .fc-apply glow bookend below layers the same --stars token under its gradient. */ /* Faint asymmetric brand washes — quiet depth on the big light flats. */ .fc-wash-a { background-image: radial-gradient(circle 50rem at 85% 0%, var(--tint-primary-faint), transparent 70%); } .fc-wash-b { background-image: radial-gradient(circle 46rem at 8% 30%, var(--tint-primary-faint), transparent 70%); } /* The two brand-glow CTAs (hero "Apply Now", form submit) are the baseline .glow-btn (site.css; promoted from here by 01-prd-marketing-restyle.md FR 10). */ /* ========================================================================== Wavy Section Dividers — now baseline: .wave / .wave--light / .wave--dark and the svg-defs partial live in site.css + includes/svg-defs.php (promoted from here by 01-prd-marketing-restyle.md FR 8 / FR 24). Nothing page-scoped remains. ========================================================================== */ /* ========================================================================== ① Hero — starfield canvas, big-bang glow, orbit rings, serif headline ========================================================================== */ .fc-hero { position: relative; display: flex; align-items: center; justify-content: center; min-height: 82vh; min-height: 82svh; padding: var(--space-2xl) var(--space-md); overflow: hidden; } /* Starfield canvas — painted by starfield.js (task 4.2); sits behind the content with the glow and rings. */ .fc-hero__canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; } /* The big bang — a radial brand glow at the hero's center. The burst animation (scale-up from a point) is JS-gated and lands in the Motion section; this is its finished state. */ .fc-hero__glow { position: absolute; z-index: 0; top: 50%; left: 50%; width: 110rem; height: 110rem; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, var(--tint-primary-glow) 0%, var(--tint-primary-soft) 32%, transparent 62%); pointer-events: none; } /* Orbit rings — hairline structure around the bang, behind the headline. One-off cream washes at 7% / 4.5% (Tier 2 inline color-mix — they track the text token, used only here). */ .fc-hero__ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 1px solid color-mix(in srgb, var(--color-text-light) 7%, transparent); border-radius: 50%; pointer-events: none; } .fc-hero__ring--1 { width: 60rem; height: 60rem; } .fc-hero__ring--2 { width: 88rem; height: 88rem; border-color: color-mix(in srgb, var(--color-text-light) 4.5%, transparent); } .fc-hero__content { position: relative; z-index: 1; max-width: 100rem; text-align: center; } .fc-hero__eyebrow { display: inline-flex; align-items: center; gap: 0.8rem; font-size: var(--font-size-tiny); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-accent); margin-bottom: var(--space-md); } .fc-hero__eyebrow svg { flex-shrink: 0; } /* Oversized display headline — clamp() per css-conventions (display-scale, would otherwise need 3+ breakpoint overrides). */ .fc-hero__headline { font-family: var(--font-accent); font-weight: 400; font-size: clamp(4.6rem, 7vw, 8.4rem); line-height: 1.08; text-wrap: balance; color: var(--text); margin-bottom: var(--space-md); } .fc-accent { color: var(--color-primary); } /* Hand-drawn underline under the headline accent. Base state is fully drawn (no-JS / reduced-motion finished state); the JS-gated draw-in initial state lands in the Motion section (task 3.5). */ .fc-underline { position: relative; white-space: nowrap; } .fc-underline svg { position: absolute; left: 0; bottom: -0.16em; width: 100%; height: 0.3em; overflow: visible; } .fc-underline path { fill: none; stroke: var(--color-primary); stroke-width: 3; stroke-linecap: round; } .fc-hero__subhead { font-size: var(--font-size-large); line-height: 1.6; color: var(--text-muted); max-width: 78rem; margin: 0 auto var(--space-lg); } .fc-hero__subhead strong { color: var(--text); } .fc-hero__cta-group { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); } /* ========================================================================== ② The Exchange — typewriter catch line, founder strip, trade cards ========================================================================== */ /* The catch line — typewriter voice in a recessed quote well. The full sentence renders via the ::after attr() pseudo (finished state) until typewriter.js arms the block (adds .fc-catch--typing — Motion section) and types into the span's text node, reserving the finished height via a measured min-height so typing never reflows (task 4.4 contract). */ .fc-catch { font-family: var(--font-typewriter); font-size: var(--font-size-xl); line-height: 1.6; color: var(--text); background-color: var(--surface-recessed); border-left: 4px solid var(--color-primary); border-radius: 0 8px 8px 0; padding: var(--space-md); max-width: 86rem; margin: 0 0 var(--space-xl); } .fc-catch__label { display: block; font-size: var(--font-size-micro); font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-accent); margin-bottom: var(--space-xs); } .fc-catch__type::after { content: attr(data-type-text); } /* Typing-point cursor — hidden without JS (the finished sentence needs no cursor); the .js reveal and blink live in the Motion section. */ .fc-catch__cursor { display: none; width: 0.5ch; height: 1.05em; margin-left: 2px; background-color: var(--color-primary); vertical-align: text-bottom; } /* Founder strip — the trust anchor for a "too good to be true" offer. The circle crop is CSS-only per the responsive-image convention (PRD A2): square asset, border-radius here, never baked into the file. */ .fc-founder { display: flex; align-items: center; gap: var(--space-md); background-color: var(--surface-raised); border: 1px solid var(--border-hairline); border-radius: 12px; box-shadow: var(--shadow-1); padding: var(--space-md); max-width: 86rem; margin: 0 0 var(--space-xl); } .fc-founder__photo { flex-shrink: 0; line-height: 0; } .fc-founder__img { display: block; width: 9.6rem; height: 9.6rem; border-radius: 50%; object-fit: cover; } .fc-founder__name { font-family: var(--font-accent); font-size: var(--font-size-xl); color: var(--text); line-height: 1.2; } .fc-founder__role { font-size: var(--font-size-micro); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-accent); margin-bottom: 0.6rem; } .fc-founder__line { font-size: var(--font-size-small); line-height: 1.6; color: var(--text-muted); } /* Trade cards — receive | ask, side by side */ .fc-trade { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); align-items: stretch; } .fc-trade__col { background-color: var(--surface-raised); border: 1px solid var(--border-hairline); border-radius: 12px; box-shadow: var(--shadow-1); padding: var(--space-lg); } /* Corner tint on the receive card — the value side glows, faintly */ .fc-trade__col:first-child { background-image: radial-gradient(circle 26rem at 100% 0%, var(--tint-primary-faint), transparent 70%); } .fc-trade__heading { font-family: var(--font-accent); font-weight: 400; font-size: var(--font-size-2xl); color: var(--text); margin-bottom: var(--space-md); } .fc-trade__receive-lead { font-size: var(--font-size-xl); font-weight: 700; line-height: 1.4; color: var(--text); margin-bottom: var(--space-sm); } .fc-trade__receive-body { color: var(--text-muted); line-height: 1.65; } /* Checkmark list — shared by the ask column (here) and section ④ */ .fc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-sm); } .fc-list li { display: flex; gap: 1rem; line-height: 1.55; } .fc-list__check { color: var(--text-accent); font-weight: 700; flex-shrink: 0; } .fc-list strong { color: var(--text); } .fc-list span:not(.fc-list__check) { color: var(--text-muted); } .fc-terms-note { font-family: var(--font-typewriter); font-size: var(--font-size-tiny); color: var(--text-muted); border-top: 1px solid var(--border-hairline); padding-top: var(--space-md); margin-top: var(--space-xl); max-width: 78rem; } /* ========================================================================== ③ What's Included — recessed inclusion tiles, fine print ========================================================================== */ .fc-included { background-color: var(--surface-raised); border: 1px solid var(--border-hairline); border-radius: 12px; box-shadow: var(--shadow-1); padding: var(--space-lg); } .fc-included__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); list-style: none; padding: 0; margin: 0 0 var(--space-lg); } /* Each inclusion in its own recessed well — package contents, not a list */ .fc-included__grid li { display: flex; gap: 1rem; align-items: baseline; font-weight: 600; color: var(--text); background-color: var(--surface-recessed); border-radius: 8px; padding: 1.4rem 1.6rem; } .fc-fine-print { font-size: var(--font-size-tiny); line-height: 1.7; color: var(--text-muted); border-top: 1px solid var(--border-hairline); padding-top: var(--space-md); } .fc-fine-print strong { color: var(--text); } /* ========================================================================== ④ Who I'm Looking For — checklist on dark starscape ========================================================================== */ .fc-who__list { list-style: none; padding: 0; margin: 0 auto; max-width: 72rem; display: flex; flex-direction: column; gap: var(--space-md); } .fc-who__list li { display: flex; gap: 1.4rem; font-size: var(--font-size-large); line-height: 1.5; color: var(--text); } .fc-who__list .fc-list__check { font-size: var(--font-size-large); } /* The last row's aside — "if that made you nod…" */ .fc-who__list em { font-style: normal; color: var(--text-muted); font-size: var(--font-size-small); display: block; margin-top: 0.3rem; } /* ========================================================================== ⑤ The Portal Experience — browser mock, Available-now / Building-together buckets ========================================================================== */ .fc-portal__lead { font-family: var(--font-accent); font-weight: 400; font-size: clamp(2.8rem, 3.4vw, 4rem); line-height: 1.2; text-wrap: balance; color: var(--text); margin-bottom: var(--space-xs); } .fc-portal__lead-sub { font-size: var(--font-size-large); color: var(--text-muted); margin-bottom: var(--space-xl); } /* Browser-frame mock — a CSS-drawn skeleton of the client portal (FR 16). It depicts the dark portal UI and consumes the role tokens of the .section--dark it sits in; if it ever moves to a light context, give it the .surface--dark marker rather than hard-coding palette tokens. */ .fc-browser { border: 1px solid var(--border-hairline-light); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-image); max-width: 92rem; margin: 0 auto var(--space-md); } .fc-browser__bar { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.4rem; background-color: var(--surface-raised); border-bottom: 1px solid var(--tint-primary-edge); } .fc-browser__dots { display: flex; gap: 0.5rem; } .fc-browser__dot { width: 1rem; height: 1rem; border-radius: 50%; background-color: var(--border-hairline-light); } .fc-browser__url { font-family: var(--font-typewriter); font-size: var(--font-size-micro); color: var(--text-muted); background-color: var(--surface-recessed); border-radius: 4px; padding: 0.3rem 1.2rem; } .fc-browser__body { display: grid; grid-template-columns: 18rem 1fr; background-color: var(--surface-recessed); min-height: 34rem; } .fc-browser__side { background-color: var(--surface-canvas); padding: 1.6rem 1.2rem; display: flex; flex-direction: column; gap: 1.2rem; } /* Skeleton primitives — grey-box stand-ins for portal UI */ .fc-skel { border-radius: 4px; background-color: var(--surface-raised); } .fc-skel--nav { height: 1.2rem; width: 80%; } .fc-skel--nav-active { background-color: var(--tint-primary-edge); } .fc-browser__main { padding: 1.8rem; display: flex; flex-direction: column; gap: 1.4rem; } .fc-skel--title { height: 1.6rem; width: 34%; } .fc-browser__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; } .fc-skel-card { background-color: var(--surface-raised); border-radius: 8px; padding: 1.4rem; display: flex; flex-direction: column; gap: 1rem; } .fc-skel-card__label { height: 0.9rem; width: 60%; background-color: var(--border-hairline-light); border-radius: 3px; } /* Progress bars — the fill pseudo consumes var(--fill) set by the modifier classes below. Base state is the finished fill; the JS-gated zero-width initial state lives in the Motion section. */ .fc-skel-bar { height: 0.8rem; border-radius: 99px; background-color: var(--surface-recessed); overflow: hidden; position: relative; } .fc-skel-bar::after { content: ""; position: absolute; inset: 0; border-radius: 99px; background-color: var(--color-primary); width: var(--fill, 50%); } /* Fill targets — replace the prototype's inline style="--fill: N%" attributes (blocked by the site CSP, same rule as the defs holder above). These are the FINISHED states; portal-mock.js animates toward them (task 4.5). */ .fc-skel-bar--a { --fill: 85%; } .fc-skel-bar--b { --fill: 55%; } .fc-skel-bar--c { --fill: 25%; } /* Feedback-thread bubbles — client message and orange-washed reply */ .fc-skel-chat { background-color: var(--surface-raised); border-radius: 8px 8px 8px 2px; padding: 1.2rem; max-width: 46%; display: flex; flex-direction: column; gap: 0.7rem; } .fc-skel-chat--reply { border-radius: 8px 8px 2px 8px; align-self: flex-end; background-color: var(--tint-primary-soft); /* align-self: flex-end shrink-wraps the item, and the skeleton spans have no intrinsic width — without an explicit width the reply renders as a padding-only sliver (a latent prototype defect, caught in the 3.6 pass). width: 100% hands sizing back to the max-width cap above. */ width: 100%; } .fc-skel-chat span { display: block; height: 0.8rem; border-radius: 3px; background-color: var(--border-hairline-light); } .fc-skel-chat span:last-child { width: 70%; } .fc-portal__framing { font-family: var(--font-accent); font-size: var(--font-size-xl); color: var(--text-accent); text-align: center; max-width: 70rem; margin: 0 auto var(--space-xl); text-wrap: balance; } /* Two honest buckets — solid "Available now" vs dashed "Building together" */ .fc-buckets { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); align-items: start; } .fc-bucket { border-radius: 12px; padding: var(--space-lg); } /* Hairline is the cream-derived variant — this card sits on the dark canvas (the prototype's ink-derived hairline renders invisible there). */ .fc-bucket--now { background-color: var(--surface-raised); border: 1px solid var(--border-hairline-light); box-shadow: var(--shadow-1); } /* Dashed border = not built yet — the co-created state encoded in form. The overlaid SVG rect strokes itself solid orange on hover/focus (border-draw); its transition is in the Motion section so reduced motion gets the rest state only. */ .fc-bucket--together { position: relative; border: 2px dashed var(--border-strong-light); background-color: transparent; } .fc-bucket__border { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .fc-bucket__border rect { fill: none; stroke: var(--color-primary); stroke-width: 2; stroke-dasharray: 100; stroke-dashoffset: 100; } .fc-bucket--together:hover .fc-bucket__border rect, .fc-bucket--together:focus-within .fc-bucket__border rect { stroke-dashoffset: 0; } /* Status chips — the tinted state recipe (-light bg + -dark text) for the live chip; brand wash for the co-created chip */ .fc-chip { display: inline-block; font-size: var(--font-size-micro); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; border-radius: 99px; padding: 0.5rem 1.4rem; margin-bottom: var(--space-xs); } .fc-chip--now { background-color: var(--color-success-light); color: var(--color-success-dark); } .fc-chip--together { background-color: var(--tint-primary-soft); color: var(--text-accent); } /* Live dot — static here; the JS-gated ping halo lives in the Motion section (-main is a non-text graphic per the state-color rules). */ .fc-chip__dot { display: inline-block; position: relative; width: 0.8rem; height: 0.8rem; margin-right: 0.7rem; border-radius: 50%; background-color: var(--color-success-main); vertical-align: 0.05em; } .fc-bucket__tagline { font-size: var(--font-size-small); color: var(--text-muted); margin-bottom: var(--space-md); } .fc-features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-md); } .fc-feature { display: grid; grid-template-columns: 4rem 1fr; gap: 1.2rem; align-items: start; } .fc-feature__icon { display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 8px; background-color: var(--tint-primary-soft); color: var(--text-accent); } .fc-feature__title { font-size: var(--font-size-base); font-weight: 700; color: var(--text); margin-bottom: 0.2rem; } .fc-feature__desc { font-size: var(--font-size-small); line-height: 1.55; color: var(--text-muted); } /* ========================================================================== ⑥ How It Works — dotted trajectory, node dots, ghost glyphs, mid-page CTA ========================================================================== */ .fc-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); list-style: none; padding: 0; margin: 0; } .fc-step { position: relative; isolation: isolate; padding-top: var(--space-sm); } /* Ghost glyphs — hand-imperfect explosion (01/03) and star (02/04) SVGs at ghost opacity, echoing the home process section's odd/even orange–green alternation. Inline color-mix: the orange rung the tint scale doesn't have (16%), and secondary has no tint scale (primary-only by convention) — both still track their brand-hue tokens. */ .fc-step__ghost { position: absolute; top: -2.2rem; right: 0.4rem; z-index: -1; width: 10rem; height: 10rem; pointer-events: none; } .fc-step__ghost--burst { color: color-mix(in srgb, var(--color-primary) 16%, transparent); } .fc-step__ghost--star { color: color-mix(in srgb, var(--color-secondary) 14%, transparent); } .fc-step__num { font-family: var(--font-accent); font-size: var(--font-size-5xl); line-height: 1; color: var(--color-primary); display: block; margin-bottom: var(--space-sm); } /* Dotted trajectory segment launching each step from its node dot — every segment stops short at 40%, so the steps read as discrete waypoints rather than one continuous line */ .fc-step::before { content: ""; position: absolute; top: 0; left: 0; right: 40%; height: 2px; background-image: repeating-linear-gradient(to right, var(--text-accent) 0 6px, transparent 6px 14px); opacity: 0.5; } /* Node dot where each step meets the trajectory */ .fc-step::after { content: ""; position: absolute; top: -4px; left: 0; width: 1rem; height: 1rem; border-radius: 50%; background-color: var(--color-primary); } .fc-step__title { font-size: var(--font-size-large); font-weight: 700; color: var(--text); margin-bottom: 0.6rem; } .fc-step__desc { font-size: var(--font-size-small); line-height: 1.6; color: var(--text-muted); } /* Mid-page CTA — the timeline ends at launch; invite the reader to step 1 */ .fc-midcta { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); margin-top: var(--space-xl); text-align: center; } .fc-midcta__line { font-family: var(--font-accent); font-size: var(--font-size-2xl); color: var(--text); text-wrap: balance; } /* ========================================================================== ⑦ FAQ — accordion skin over the site.css .expandable family ========================================================================== */ /* The questions ride the shared .expandable accordion unmodified; this wrapper only sets the column width and rhythm. */ .faq-list { max-width: 86rem; display: flex; flex-direction: column; gap: var(--space-sm); } /* ========================================================================== ⑧ Final CTA & Application Form — glow bookend, commitments fieldset, success state ========================================================================== */ /* Glow bookend — the apply section opens with an echo of the hero's bang. Painted as a background gradient (not an element) so it can't force horizontal overflow or fight the wavy divider's overhang. */ .fc-apply { background-image: radial-gradient(circle 60rem at 50% -12rem, var(--tint-primary-soft), transparent 65%), var(--stars); } .fc-apply__heading { font-family: var(--font-accent); font-weight: 400; font-size: clamp(3rem, 4vw, 4.6rem); text-wrap: balance; color: var(--text); margin-bottom: var(--space-xs); } .fc-apply__intro { font-size: var(--font-size-large); color: var(--text-muted); max-width: 72rem; margin-bottom: var(--space-xl); } /* No-JS fallback line — the mono honesty voice, sized as a standalone note */ .fc-form__noscript { font-family: var(--font-typewriter); font-size: var(--font-size-tiny); color: var(--text-muted); max-width: 72rem; margin-bottom: var(--space-md); } .fc-form { max-width: 86rem; } .fc-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-md); } /* Honeypot wrapper (FR 17) — moved off-screen rather than display:none, which some form-filling bots skip; combined with aria-hidden + tabindex="-1" in the markup, no real user (sighted, keyboard, or AT) ever meets the field. Deliberately innocuous class name — "honeypot" in a class is a tell. */ .fc-form__extra { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Commitments fieldset — the screening filter, visually a recessed well. Inline color-mix: the border needs a rung between --border-hairline-light (10%) and --border-strong-light (55%, form-field weight) — bright enough that the legend reads as deliberately sitting on the outline, without promoting the well to a field. */ .fc-form__commitments { background-color: var(--surface-recessed); border: 1px solid color-mix(in srgb, var(--color-text-light) 22%, transparent); border-radius: 12px; padding: var(--space-md); margin-bottom: var(--space-md); } .fc-form__commitments-legend { font-size: var(--font-size-base); font-weight: 700; color: var(--text); padding: 0 0.8rem; } .fc-form__commitments-hint { font-size: var(--font-size-tiny); color: var(--text-muted); margin-bottom: var(--space-sm); } .fc-checkbox { display: flex; align-items: flex-start; gap: 1.2rem; padding: 0.8rem 0; cursor: pointer; color: var(--text); line-height: 1.5; } .fc-checkbox input { width: 2rem; height: 2rem; margin-top: 0.2rem; flex-shrink: 0; accent-color: var(--focus); cursor: pointer; } .fc-form__actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); margin-top: var(--space-md); } /* Success confirmation (FR 22) — replaces the form; focus lands here */ .fc-form__success { background-color: var(--surface-raised); border-left: 4px solid var(--color-success-main); border-radius: 0 12px 12px 0; padding: var(--space-lg); max-width: 72rem; } .fc-form__success h3 { font-family: var(--font-accent); font-weight: 400; font-size: var(--font-size-2xl); color: var(--text); margin-bottom: var(--space-sm); } .fc-form__success p { color: var(--text-muted); line-height: 1.65; margin-bottom: var(--space-xs); } /* ========================================================================== Motion — JS-Gated Initial States & Animations (behind the root .js class) ========================================================================== */ /* Every rule here is a JS-gated initial state or animation (FR 4): without .js on the root none of it applies, and the finished states declared in the sections above render as-is. The Reduced Motion section below must stay AFTER this one — its equal-specificity overrides win by source order. */ /* -- Hero load-in: bang burst, canvas fade, staggered rise, underline draw -- */ /* The big bang — the glow bursts from a point, the universe fades in around it */ @keyframes fc-bang { from { transform: translate(-50%, -50%) scale(0.04); opacity: 0; } 35% { opacity: 1; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } } .js .fc-hero__glow { animation: fc-bang 1300ms cubic-bezier(0.2, 0.85, 0.3, 1) both; } @keyframes fc-fade { to { opacity: 1; } } .js .fc-hero__canvas { opacity: 0; animation: fc-fade 1400ms ease 250ms forwards; } /* One-time staggered rise — directs reading order */ @keyframes fc-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .js .fc-hero__eyebrow, .js .fc-hero__headline, .js .fc-hero__subhead, .js .fc-hero__cta-group { opacity: 0; animation: fc-rise 700ms ease forwards; } .js .fc-hero__eyebrow { animation-delay: 200ms; } .js .fc-hero__headline { animation-delay: 380ms; } .js .fc-hero__subhead { animation-delay: 560ms; } .js .fc-hero__cta-group { animation-delay: 720ms; } /* Accent underline strokes itself in once the headline has landed */ @keyframes fc-draw { to { stroke-dashoffset: 0; } } .js .fc-underline path { stroke-dasharray: 100; stroke-dashoffset: 100; animation: fc-draw 600ms ease 1250ms forwards; } /* -- Typewriter — gated on .fc-catch--typing, which typewriter.js adds to the blockquote when it arms (task 4.4 contract), NOT on .js: the catch line is § 7 content, and the bootstrap .js class proves only that inline JS ran, not that the module loaded. No JS, a failed module load, or reduced motion (module doesn't arm) all leave the full ::after sentence from the Exchange section rendering. -- */ .fc-catch--typing .fc-catch__type::after { content: none; } @keyframes fc-blink { 50% { opacity: 0; } } .fc-catch--typing .fc-catch__cursor { display: inline-block; animation: fc-blink 1s steps(1) infinite; } /* -- Live chip ping — ambient halo on the "Available now" dot -- */ @keyframes fc-ping { 0% { transform: scale(1); opacity: 0.7; } 70% { transform: scale(2.6); opacity: 0; } 100% { transform: scale(2.6); opacity: 0; } } .js .fc-chip__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background-color: inherit; animation: fc-ping 2.4s ease-out infinite; } /* -- Portal mock choreography — portal-mock.js adds .is-visible (task 4.5) -- */ .js .fc-skel-bar::after { width: 0; transition: width 900ms ease-out; } .js .fc-browser.is-visible .fc-skel-bar::after { width: var(--fill, 50%); } .js .fc-browser.is-visible .fc-skel-card:nth-child(2) .fc-skel-bar::after { transition-delay: 200ms; } .js .fc-browser.is-visible .fc-skel-card:nth-child(3) .fc-skel-bar::after { transition-delay: 400ms; } .js .fc-skel-chat { opacity: 0; transform: translateY(10px); transition: opacity 500ms ease, transform 500ms ease; } .js .fc-browser.is-visible .fc-skel-chat { opacity: 1; transform: none; transition-delay: 900ms; } .js .fc-browser.is-visible .fc-skel-chat--reply { transition-delay: 1400ms; } /* -- Timeline trajectory draw-in — sequence encoded as motion (task 4.6) -- */ .js .fc-step::before { transform: scaleX(0); transform-origin: left center; transition: transform 700ms ease; } .js .fc-steps.is-visible .fc-step::before { transform: scaleX(1); } .js .fc-steps.is-visible .fc-step:nth-child(2)::before { transition-delay: 350ms; } .js .fc-steps.is-visible .fc-step:nth-child(3)::before { transition-delay: 700ms; } .js .fc-steps.is-visible .fc-step:nth-child(4)::before { transition-delay: 1050ms; } .js .fc-step__num { opacity: 0; transform: translateY(8px); transition: opacity 500ms ease, transform 500ms ease; } .js .fc-steps.is-visible .fc-step__num { opacity: 1; transform: none; } .js .fc-steps.is-visible .fc-step:nth-child(2) .fc-step__num { transition-delay: 350ms; } .js .fc-steps.is-visible .fc-step:nth-child(3) .fc-step__num { transition-delay: 700ms; } .js .fc-steps.is-visible .fc-step:nth-child(4) .fc-step__num { transition-delay: 1050ms; } /* -- Dashed-card border draw — pure CSS hover, works without JS, so it is not .js-gated; the Reduced Motion section stills it -- */ .fc-bucket__border rect { transition: stroke-dashoffset 900ms ease; } /* -- Scroll reveals — the page observer adds .is-visible (task 4.6) -- */ .js .fc-reveal { opacity: 0; transform: translateY(24px); transition: opacity 600ms ease, transform 600ms ease; } .js .fc-reveal.is-visible { opacity: 1; transform: none; } /* ========================================================================== Reduced Motion — Finished States (under the root .motion-reduce class, FR 11) ========================================================================== */ /* With the root motion-reduce class set (OS preference or the FR 32 toggle, stamped pre-paint by the head script), every animation and ≥200ms transition above lands on its finished state. These overrides tie the .js rules on specificity and win by source order — keep this section last among the motion blocks. */ .motion-reduce .fc-hero__eyebrow, .motion-reduce .fc-hero__headline, .motion-reduce .fc-hero__subhead, .motion-reduce .fc-hero__cta-group { animation: none; opacity: 1; } .motion-reduce .fc-hero__glow { animation: none; } .motion-reduce .fc-hero__canvas { animation: none; opacity: 1; } .motion-reduce .fc-underline path { animation: none; stroke-dashoffset: 0; } .motion-reduce .fc-catch__cursor { display: none; } .motion-reduce .fc-chip__dot::after { animation: none; opacity: 0; } .motion-reduce .fc-bucket__border rect { transition: none; } .motion-reduce .fc-skel-bar::after { width: var(--fill, 50%); transition: none; } .motion-reduce .fc-skel-chat { opacity: 1; transform: none; transition: none; } .motion-reduce .fc-step::before { transform: none; transition: none; } .motion-reduce .fc-step__num { opacity: 1; transform: none; transition: none; } .motion-reduce .fc-reveal { opacity: 1; transform: none; transition: none; } /* FAQ accordion — the .expandable transitions (350ms content, 300ms icon) live in site.css, which is not yet class-gated (the site-wide reduced- motion audit owns that migration); this page-level exception closes FR 11 for the FAQ in the meantime. Open/close still works — instantly. */ .motion-reduce .expandable__content, .motion-reduce .expandable__icon { transition-duration: 0s; } /* ========================================================================== Responsive (Desktop-First) ========================================================================== */ /* Responsive — max-width: 1024px (Laptop) */ @media (max-width: 1024px) { /* Timeline: 4-across → 2×2; the dotted trajectory still leads each row */ .fc-steps { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-lg); } } /* Responsive — max-width: 768px (Tablet) */ @media (max-width: 768px) { .fc-hero { min-height: 70vh; min-height: 70svh; } /* Two-column layouts collapse to single column */ .fc-trade, .fc-buckets, .fc-form__row { grid-template-columns: 1fr; } .fc-included__grid { grid-template-columns: repeat(2, 1fr); } /* Browser mock: sidebar becomes a top nav strip, cards stack */ .fc-browser__body { grid-template-columns: 1fr; } .fc-browser__side { flex-direction: row; align-items: center; } .fc-skel--nav { width: 8rem; height: 1rem; } .fc-browser__cards { grid-template-columns: 1fr; } .fc-skel-chat { max-width: 80%; } } /* Responsive — max-width: 480px (Mobile) */ @media (max-width: 480px) { .fc-included__grid { grid-template-columns: 1fr; } .fc-founder { flex-direction: column; text-align: center; } /* Timeline stacks fully; the horizontal trajectory no longer makes sense — the node dots alone mark the steps */ .fc-steps { grid-template-columns: 1fr; } .fc-step::before { display: none; } }