/* ════════════════════════════════════════════════════════════════════════ Conversion — cinematic scroll-snap pages (Views/conversion.php, content/conversion-beats.php): Contact, Investors, Careers. Loaded only on those routes (page-scoped). Scoped under .conversion-* / html.is-conversion so nothing leaks into the rest of the site. Tokens from tokens.css; the accent is the cyan connective thread via [data-accent] on , with ember on the two human beats. Buttons/cue/form reuse app.css. Root scroll-snap (mandatory) is switched on app-wide by initScrollSnap() on first interaction (.snap-on). ════════════════════════════════════════════════════════════════════════ */ html.is-conversion.snap-on{scroll-snap-type:y mandatory;} @media (max-height:680px){ html.is-conversion.snap-on{scroll-snap-type:y proximity;} } html.is-conversion .site-footer{scroll-snap-align:start;} /* ── Beat shell ─────────────────────────────────────────────────────────── */ .conversion-beat{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center; padding-block:var(--s-9);overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always;} .conversion-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;background-color:var(--ink-900);} .conversion-grade{position:absolute;inset:0;z-index:1; background:radial-gradient(120% 90% at 16% 100%, rgba(0,0,0,.55), transparent 55%), linear-gradient(90deg, rgba(10,11,13,.92) 0%, rgba(10,11,13,.58) 45%, rgba(10,11,13,.2) 100%);} /* The form beat keeps its calm backdrop but needs an even, legible scrim. */ .conversion-grade--form{ background:linear-gradient(180deg, rgba(10,11,13,.82) 0%, rgba(10,11,13,.72) 100%);} .conversion-beat-inner{position:relative;z-index:2;width:100%;} /* ── Typography ─────────────────────────────────────────────────────────── */ .conversion-eyebrow{font-family:var(--font-mono);font-size:var(--t-eyebrow);letter-spacing:.18em;text-transform:uppercase; color:var(--accent);margin:0 0 var(--s-4);} .conversion-h1{font:600 var(--t-display-xl)/1.03 var(--font-display);letter-spacing:-.02em;margin:0 0 var(--s-4);color:var(--on-ink-hi);max-width:16ch;} .conversion-h2{font:600 var(--t-h1)/1.05 var(--font-display);letter-spacing:-.02em;margin:0 0 var(--s-4);color:var(--on-ink-hi);max-width:20ch;} .conversion-sub{font-size:var(--t-body-lg);line-height:1.5;color:var(--on-ink-mid);margin:0;max-width:48ch;} .conversion-body{font-size:var(--t-body);line-height:1.6;color:var(--on-ink-mid);margin:0;max-width:54ch;} .conversion-ctas{margin-top:var(--s-7);} .conversion-cue{z-index:3;} /* ── Form beat — text left, the real intake form in a panel right ─────────── */ .conversion-beat-inner--form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(24px,4vw,64px);align-items:center;} .conversion-beat-inner--form .conversion-content{grid-column:1;} .conversion-formwrap{grid-column:2;position:relative; background:color-mix(in srgb, var(--ink-900) 78%, transparent); border:var(--b-hairline) solid var(--ink-700);border-radius:var(--r-lg); padding:clamp(20px,2.6vw,32px);box-shadow:0 24px 60px rgba(0,0,0,.45);backdrop-filter:blur(6px);} /* On the form beat the heading/sub belong with the form column on wide screens, so pull the intro above the panel rather than beside it. */ .conversion-beat--form .conversion-h2{max-width:24ch;} /* ── Contact details (Contact page form beat) — address · email · social. Sits under the heading, above the intake form; one accountable point. ──── */ .conversion-contact{display:flex;flex-direction:column;gap:var(--s-4); margin-top:var(--s-6);padding-top:var(--s-5);border-top:var(--b-hairline) solid var(--ink-700);max-width:48ch;} .conversion-contact-item{display:flex;align-items:flex-start;gap:var(--s-3); color:var(--on-ink-mid);font-size:var(--t-body);line-height:1.5;} .conversion-contact-item .icon{color:var(--accent);margin-top:.15em;width:1.25em;height:1.25em;} .conversion-contact-item a{color:var(--on-ink-hi);text-decoration:none;} .conversion-contact-item a:hover{color:var(--accent);} .conversion-contact-address{font-style:normal;display:grid;gap:2px;} .conversion-contact-social{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-4);margin-top:var(--s-1);} .conversion-contact-label{font-family:var(--font-mono);font-size:var(--t-eyebrow);letter-spacing:.12em; text-transform:uppercase;color:var(--on-ink-mid);} /* ── Progress rail — fixed, right; real in-page anchors (work without JS) ── */ .conversion-rail{position:fixed;right:clamp(10px,2.4vw,30px);top:50%;transform:translateY(-50%);z-index:var(--z-sticky); display:flex;flex-direction:column;align-items:center;} .conversion-rail-line{position:absolute;top:6px;bottom:6px;width:1px;background:var(--ink-700);} .conversion-rail-fill{position:absolute;top:6px;width:1px;height:0;background:var(--accent);box-shadow:0 0 8px var(--accent); transition:height var(--dur-slow) var(--ease-standard),background var(--dur-slow) var(--ease-standard);} .conversion-dot{position:relative;width:26px;height:28px;display:flex;align-items:center;justify-content:center;text-decoration:none;} .conversion-dot i{width:7px;height:7px;border-radius:50%;background:var(--ink-600);border:1px solid var(--ink-700); transition:transform var(--dur) var(--ease-standard),background var(--dur) var(--ease-standard),border-color var(--dur) var(--ease-standard),box-shadow var(--dur) var(--ease-standard);} .conversion-dot.is-current i{background:var(--accent);border-color:var(--accent);box-shadow:0 0 10px var(--accent);transform:scale(1.25);} .conversion-dot-label{position:absolute;right:32px;white-space:nowrap;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em; text-transform:uppercase;color:var(--on-ink-mid);opacity:0;transform:translateX(6px); transition:opacity var(--dur) var(--ease-standard),transform var(--dur) var(--ease-standard);pointer-events:none;} .conversion-dot:hover .conversion-dot-label,.conversion-dot:focus-visible .conversion-dot-label,.conversion-dot.is-current .conversion-dot-label{opacity:1;transform:none;} /* ── Reveal: self-contained; first beat ships active so it paints at once. With no JS the html.js gate never applies, so all content is visible. ─── */ html.js .conversion-content{opacity:0;transform:translateY(var(--reveal-y)); transition:opacity var(--dur-slow) var(--ease-cine),transform var(--dur-slow) var(--ease-cine);} html.js .conversion-beat.is-active .conversion-content{opacity:1;transform:none;} /* ── Responsive ─────────────────────────────────────────────────────────── */ @media (max-width:880px){ .conversion-beat-inner--form{grid-template-columns:1fr;gap:var(--s-6);} .conversion-beat-inner--form .conversion-content,.conversion-formwrap{grid-column:1;} } @media (max-width:760px){ .conversion-rail{right:10px;} .conversion-dot-label{display:none;} /* Reserve a gutter so wrapped content never runs under the fixed rail. */ .conversion-content{padding-right:clamp(40px,10vw,48px);} } @media (prefers-reduced-motion:reduce){ html.is-conversion{scroll-snap-type:none;} .conversion-content{opacity:1!important;transform:none!important;} .conversion-rail-fill{transition:none;} } html.no-motion.is-conversion{scroll-snap-type:none;} html.no-motion.is-conversion .conversion-content{opacity:1;transform:none;}