, the hero and demo in a nested one), so `order` cannot reach across them, and a JS move would risk a visible jump after first paint. Exactly one copy is ever displayed, so `display: none` keeps the other out of the accessibility tree — screen readers still hear the line once. */ .prd-social-mobile { display: none; } @media (max-width: 720px) { .prd-social-mobile { display: block; } .prd-social-desktop { display: none; } } .prd-root { --prd-brand: #155eef; --prd-brand-ink: #0b3fb0; --prd-brand-wash: rgba(21, 94, 239, .08); --prd-ink: #09090b; --prd-muted: #71717a; --prd-line: #e4e4e7; --prd-surface: #fff; --prd-surface-2: #fafafa; --prd-ok: #16a34a; --prd-ok-wash: rgba(22, 163, 74, .1); --prd-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--prd-ink); font-size: 14px; line-height: 1.5; } /* Reduced-motion / "jump to end state" mode: kill every transition so scenes snap to their final frame instead of animating. */ .prd-root.is-instant *, .prd-root.is-instant *::before, .prd-root.is-instant *::after { transition: none !important; animation: none !important; } /* ---------------------------------------------------------------- shell -- */ .prd-shell { border: 1px solid var(--prd-line); border-radius: 14px; background: var(--prd-surface); box-shadow: 0 1px 2px rgba(9, 9, 11, .04), 0 12px 34px -18px rgba(9, 9, 11, .28); overflow: hidden; } .prd-chrome { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--prd-line); background: var(--prd-surface-2); } /* The dots and the "User flow" label travel together as the left-hand group, so space-between has exactly three anchors: this group, the omnibox, and Replay. Without the wrapper the dots would be spread apart too — and below 420px, where the omnibox is hidden, they would scatter across the bar. */ .prd-chrome-left { display: flex; align-items: center; gap: 8px; flex: none; min-width: 0; } .prd-dot { width: 9px; height: 9px; border-radius: 50%; background: #d4d4d8; flex: none; } .prd-dot:nth-of-type(1) { background: #f0a8a0; } .prd-dot:nth-of-type(2) { background: #f2ceA0; } .prd-dot:nth-of-type(3) { background: #a8d5b0; } .prd-omni { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; margin: 0 6px; padding: 4px 10px; border: 1px solid var(--prd-line); border-radius: 999px; background: var(--prd-surface); color: var(--prd-muted); font-family: var(--prd-mono); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .prd-omni svg { width: 11px; height: 11px; flex: none; opacity: .7; } /* Names the mock. Sits at the left of the chrome bar next to the dots; Replay holds the right end via the bar's space-between. */ .prd-chrome-label { flex: none; color: var(--prd-muted); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; } /* Deliberately NOT on the site's button utilities — this is browser-chrome furniture, not a call to action, so it keeps its original quiet pill. */ .prd-replay { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 4px 10px; border: 1px solid var(--prd-line); border-radius: 999px; background: var(--prd-surface); color: var(--prd-muted); font: inherit; font-size: 11px; font-weight: 500; cursor: pointer; transition: color .15s, border-color .15s, background .15s; } .prd-replay:hover { color: var(--prd-brand); border-color: rgba(21, 94, 239, .35); background: var(--prd-brand-wash); } .prd-replay svg { width: 12px; height: 12px; } /* ---------------------------------------------------------------- stage -- */ /* All six screens share one grid cell, so the stage is exactly as tall as its tallest screen — no magic height to keep in sync, and no dead space under the short scenes. Hidden screens still contribute their height, which is what keeps the page from reflowing as scenes swap. */ .prd-stage { position: relative; display: grid; min-height: 340px; background: var(--prd-surface); overflow: hidden; } .prd-screen { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 14px; padding: 22px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .32s ease, transform .32s ease, visibility .32s; overflow: hidden; } .prd-screen.is-active { opacity: 1; visibility: visible; transform: none; } .prd-screen-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .prd-eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--prd-muted); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; } .prd-eyebrow b { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 5px; background: var(--prd-brand); color: #fff; font-size: 10px; font-weight: 600; letter-spacing: 0; } .prd-card { border: 1px solid var(--prd-line); border-radius: 10px; background: var(--prd-surface); padding: 14px; } .prd-label { display: block; margin-bottom: 7px; color: var(--prd-muted); font-size: 11px; font-weight: 500; } /* --------------------------------------------------------------- cursor -- */ .prd-cursor { position: absolute; top: 0; left: 0; z-index: 30; width: 20px; height: 20px; margin: -2px 0 0 -2px; opacity: 0; pointer-events: none; transform: translate3d(0, 0, 0); transition: transform .55s cubic-bezier(.33, .9, .35, 1), opacity .25s; filter: drop-shadow(0 2px 3px rgba(9, 9, 11, .3)); } .prd-cursor.is-on { opacity: 1; } .prd-cursor::after { content: ""; position: absolute; top: 2px; left: 2px; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: var(--prd-brand); opacity: 0; transform: scale(.2); } .prd-cursor.is-click::after { animation: prd-ripple .5s ease-out; } @keyframes prd-ripple { 0% { opacity: .35; transform: scale(.2); } 100% { opacity: 0; transform: scale(1.9); } } /* ------------------------------------------------------------ 1: extract -- */ .prd-urlbar { display: flex; align-items: center; gap: 8px; } .prd-input { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--prd-line); border-radius: 9px; background: var(--prd-surface); } .prd-input svg { width: 15px; height: 15px; flex: none; color: var(--prd-muted); } .prd-typed { min-width: 0; color: var(--prd-ink); font-family: var(--prd-mono); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .prd-typed:empty::before { content: "Paste a job posting URL…"; color: #a1a1aa; } .prd-caret { width: 1.5px; height: 15px; flex: none; background: var(--prd-brand); opacity: 0; } .prd-caret.is-on { animation: prd-blink 1s steps(1) infinite; } @keyframes prd-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } /* Buttons wear the site's own button utilities (the same class string as the hero CTA), so the demo matches the rest of the page. `.prd-btn` is kept only as a hook for the states the demo drives itself — it must not restate any property the utilities own, because this file loads after the Tailwind bundle and would silently win every conflict. */ .prd-btn { gap: 6px; flex: none; cursor: default; /* the mock is a demo, not a real control */ } /* Two classes, so these beat the single-class `bg-primary` utility regardless of cascade-layer order (unlayered rules also outrank @layer utilities). */ .prd-btn.is-press { transform: scale(.955); } /* The one deliberate departure from the site's primary button: once the pitch is away, the button goes green to confirm it. */ .prd-btn.is-done, .prd-btn.is-done:hover { background: var(--prd-ok); border-color: transparent; } /* status / loader */ .prd-status { display: flex; align-items: center; gap: 9px; color: var(--prd-muted); font-size: 12.5px; } .prd-spin { width: 14px; height: 14px; flex: none; border: 2px solid rgba(21, 94, 239, .22); border-top-color: var(--prd-brand); border-radius: 50%; animation: prd-spin .7s linear infinite; } @keyframes prd-spin { to { transform: rotate(360deg); } } .prd-bar { height: 4px; border-radius: 999px; background: #f1f1f3; overflow: hidden; } .prd-bar > i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--prd-brand); transition: width .3s linear; } /* revealed job card */ .prd-reveal { opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; } .prd-reveal.is-in { opacity: 1; transform: none; } .prd-job-title { font-size: 15px; font-weight: 600; letter-spacing: -.01em; } .prd-job-meta { margin-top: 3px; color: var(--prd-muted); font-size: 12px; } .prd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; } .prd-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border: 1px solid var(--prd-line); border-radius: 999px; background: var(--prd-surface-2); color: #3f3f46; font-size: 11px; font-weight: 500; opacity: 0; transform: translateY(4px); transition: opacity .3s ease, transform .3s ease; } .prd-chip.is-in { opacity: 1; transform: none; } .prd-chip.is-ok { border-color: rgba(22, 163, 74, .3); background: var(--prd-ok-wash); color: #15803d; } .prd-chip.is-gap { border-color: rgba(217, 119, 6, .3); background: rgba(217, 119, 6, .1); color: #b45309; } /* ------------------------------------------------------------- 2: resume -- */ .prd-drop { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1.5px dashed var(--prd-line); border-radius: 10px; background: var(--prd-surface-2); transition: border-color .25s, background .25s; } .prd-drop.is-hot { border-color: var(--prd-brand); background: var(--prd-brand-wash); } .prd-file { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; opacity: 0; transform: translateY(-12px); transition: opacity .3s ease, transform .3s ease; } .prd-file.is-in { opacity: 1; transform: none; } .prd-file-ico { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; border-radius: 7px; background: rgba(220, 38, 38, .1); color: #dc2626; font-size: 9px; font-weight: 700; letter-spacing: .02em; } .prd-file-name { font-size: 12.5px; font-weight: 500; } .prd-file-sub { margin-top: 2px; color: var(--prd-muted); font-size: 11px; } .prd-score { display: flex; align-items: center; gap: 16px; } .prd-ring { position: relative; width: 82px; height: 82px; flex: none; } .prd-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .prd-ring circle { fill: none; stroke-width: 7; stroke-linecap: round; } .prd-ring .prd-ring-bg { stroke: #f1f1f3; } .prd-ring .prd-ring-fg { stroke: var(--prd-brand); stroke-dasharray: 213.6; stroke-dashoffset: 213.6; transition: stroke-dashoffset 1.25s cubic-bezier(.3, .9, .35, 1); } .prd-ring-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 600; letter-spacing: -.02em; } .prd-ring-num i { font-size: 11px; font-style: normal; font-weight: 500; color: var(--prd-muted); } /* --------------------------------------------------------- 3/4: contacts -- */ .prd-rows { display: flex; flex-direction: column; gap: 7px; } .prd-row { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border: 1px solid var(--prd-line); border-radius: 9px; background: var(--prd-surface); opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease, border-color .25s, box-shadow .25s, background .25s; } .prd-row.is-in { opacity: 1; transform: none; } /* Revealing an address turns the row green — that is the whole confirmation, so there is no separate "verified" badge. */ .prd-row.is-verified { border-color: var(--prd-ok); background: var(--prd-ok-wash); } .prd-av { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: linear-gradient(140deg, #dbe6ff, #c3d6ff); color: var(--prd-brand-ink); font-size: 11px; font-weight: 600; } .prd-row-main { flex: 1 1 auto; min-width: 0; } .prd-row-name { font-size: 12.5px; font-weight: 600; } .prd-row-role { margin-top: 1px; color: var(--prd-muted); font-size: 11px; } .prd-mail { font-family: var(--prd-mono); font-size: 11.5px; color: var(--prd-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .prd-mail.is-live { color: var(--prd-ink); } .prd-row-end { display: flex; align-items: center; gap: 8px; flex: none; } /* ------------------------------------------------------------- 5: email -- */ .prd-field { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--prd-line); font-size: 12.5px; } .prd-field > span:first-child { width: 52px; flex: none; color: var(--prd-muted); font-size: 11px; } /* The subject is typed in a character at a time; clip rather than let a long line push the compose card wider than the stage on a narrow screen. */ #prd-subject { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .prd-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 3px; border: 1px solid var(--prd-line); border-radius: 999px; background: var(--prd-surface-2); font-size: 11.5px; } .prd-pill .prd-av { width: 19px; height: 19px; font-size: 8.5px; } /* The body is filled by a streaming animation. Reserving its final height up front keeps the stage (and therefore the page below it) from reflowing as the text arrives — the email screen is the tallest of the six. */ .prd-body { flex: 1 1 auto; min-height: 210px; /* the drafts are written to fit this — do not grow it */ margin-top: 4px; color: #3f3f46; font-size: 12.5px; line-height: 1.65; white-space: pre-wrap; overflow: hidden; } .prd-ai { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--prd-brand-wash); color: var(--prd-brand); font-size: 10.5px; font-weight: 600; opacity: 0; transition: opacity .25s; } .prd-ai.is-in { opacity: 1; } .prd-ai svg { width: 11px; height: 11px; animation: prd-pulse 1.4s ease-in-out infinite; } @keyframes prd-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } .prd-email-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 11px; border-top: 1px solid var(--prd-line); } /* -------------------------------------------------------- 6: notifications -- */ .prd-notifs { position: absolute; top: 14px; right: 14px; z-index: 20; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; max-width: min(300px, 72%); pointer-events: none; } .prd-notif { display: flex; align-items: flex-start; gap: 9px; width: 100%; padding: 10px 12px; border: 1px solid var(--prd-line); border-radius: 10px; background: var(--prd-surface); box-shadow: 0 10px 26px -12px rgba(9, 9, 11, .3); opacity: 0; transform: translateX(16px); transition: opacity .35s ease, transform .35s cubic-bezier(.3, .9, .35, 1); } .prd-notif.is-in { opacity: 1; transform: none; } /* Step 6 pushes the sent email back so the notifications read as the subject. */ .prd-card.is-dim { opacity: .4; transition: opacity .45s ease; } .prd-notif-ico { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: none; border-radius: 7px; background: var(--prd-brand-wash); color: var(--prd-brand); } .prd-notif-ico svg { width: 14px; height: 14px; } .prd-notif-title { font-size: 12px; font-weight: 600; } .prd-notif-sub { margin-top: 2px; color: var(--prd-muted); font-size: 11px; } .prd-notif.is-win { border-color: rgba(21, 94, 239, .35); background: #fff; } .prd-notif.is-win .prd-notif-ico { background: var(--prd-brand); color: #fff; } .prd-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .prd-confetti i { position: absolute; top: -8px; width: 6px; height: 9px; border-radius: 1px; opacity: 0; } .prd-confetti.is-go i { animation: prd-fall 1.5s ease-in forwards; } @keyframes prd-fall { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(300px) rotate(420deg); } } /* ----------------------------------------------------------------- rail -- */ /* A connected progress stepper rather than a row of tabs: every step up to and including the current one is GREEN (done), everything still ahead is BLUE. Each item owns the connector to its left (::before) and to its right (::after), so the colour follows from the item's own state — no extra classes and nothing for the JS to keep in sync. */ .prd-rail { display: flex; padding: 6px 10px 14px; border-top: 1px solid var(--prd-line); background: var(--prd-surface); } .prd-rail-item { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 4px 0; border: 0; background: none; color: var(--prd-muted); font: inherit; text-align: center; cursor: pointer; transition: color .2s; } /* --- connectors ---------------------------------------------------------- */ .prd-rail-item::before, .prd-rail-item::after { content: ""; position: absolute; top: 26px; height: 2px; border-radius: 2px; background: var(--prd-brand); /* still to come */ transition: background .3s ease; } .prd-rail-item::before { left: 0; right: calc(50% + 15px); } .prd-rail-item::after { left: calc(50% + 15px); right: 0; } .prd-rail-item:first-child::before, .prd-rail-item:last-child::after { display: none; } /* reaching a step turns the line INTO it green; leaving it turns the line out of it green too */ .prd-rail-item.is-done::before, .prd-rail-item.is-active::before, .prd-rail-item.is-done::after { background: var(--prd-ok); } /* --- nodes --------------------------------------------------------------- */ .prd-rail-n { position: relative; z-index: 1; display: flex; } .prd-rail-n s { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--prd-brand); /* still to come */ color: #fff; font-size: 11px; font-weight: 600; text-decoration: none; box-shadow: 0 0 0 3px var(--prd-surface); transition: background .3s ease, box-shadow .3s ease; } .prd-rail-item.is-done .prd-rail-n s, .prd-rail-item.is-active .prd-rail-n s { background: var(--prd-ok); } /* finished steps swap their number for a tick */ .prd-rail-item.is-done .prd-rail-n s { font-size: 0; } .prd-rail-item.is-done .prd-rail-n s::after { content: "\2713"; font-size: 13px; } /* the step being played gets a halo so the position is unmistakable */ .prd-rail-item.is-active .prd-rail-n s { box-shadow: 0 0 0 3px var(--prd-surface), 0 0 0 6px var(--prd-ok-wash); } .prd-rail-item:hover { color: var(--prd-ink); } .prd-rail-item.is-active { color: var(--prd-ink); } .prd-rail-item.is-done { color: #52525b; } .prd-rail-item:focus-visible { outline: 2px solid var(--prd-brand); outline-offset: 2px; border-radius: 8px; } .prd-rail-t { font-size: 11px; font-weight: 500; line-height: 1.3; } /* Green creeps along the outgoing connector for the length of the scene, so the rail doubles as a countdown to the next step. Scaled rather than sized so it animates on the compositor. */ .prd-rail-fill { position: absolute; top: 26px; left: calc(50% + 15px); right: 0; height: 2px; border-radius: 2px; background: var(--prd-ok); transform: scaleX(0); transform-origin: left center; } .prd-rail-item:last-child .prd-rail-fill { display: none; } /* ------------------------------------------------------------------ end -- */ .prd-end { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; background: rgba(255, 255, 255, .95); backdrop-filter: blur(5px); opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility .4s; } .prd-end.is-in { opacity: 1; visibility: visible; } .prd-end h3 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; } .prd-end p { max-width: 34ch; color: var(--prd-muted); font-size: 12.5px; } .prd-end-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .prd-end a.prd-btn, .prd-end button.prd-btn { cursor: pointer; text-decoration: none; } /* --------------------------------------------------------------- mobile -- */ @media (max-width: 720px) { .prd-stage { min-height: 300px; } .prd-screen { padding: 14px; gap: 10px; } /* Phones get a shorter draft (see emailBody() in flow-demo.js), so the reserved body height comes down to match it. */ .prd-body { min-height: 124px; font-size: 12px; line-height: 1.55; } .prd-card { padding: 12px; } .prd-field { padding: 6px 0; } .prd-email-foot { padding-top: 9px; } /* Trim the contact list — four rows are the second-tallest screen. */ .prd-rows { gap: 6px; } .prd-row { padding: 7px 9px; gap: 9px; } .prd-av { width: 28px; height: 28px; } .prd-row-name { font-size: 12px; } .prd-label { margin-bottom: 5px; } .prd-chips { margin-top: 8px; } /* The stepper stays on one row — wrapping it would break the connectors. */ .prd-rail { padding: 2px 3px 8px; } .prd-rail-item { padding: 10px 2px 0; gap: 5px; } .prd-rail-n s { width: 22px; height: 22px; font-size: 10px; } .prd-rail-item.is-done .prd-rail-n s::after { font-size: 11px; } .prd-rail-item::before, .prd-rail-item::after, .prd-rail-fill { top: 20px; } .prd-rail-item::before { right: calc(50% + 13px); } .prd-rail-item::after, .prd-rail-fill { left: calc(50% + 13px); } .prd-rail-t { font-size: 9.5px; } /* Keep the URL bar on one line — wrapping the button under a full-width input cost ~48px on both the extract and find screens. The buttons are already h-8 from the site utilities, so only the input needs trimming. */ .prd-input { height: 36px; } .prd-typed { font-size: 11.5px; } .prd-email-foot .prd-job-meta { font-size: 10px; min-width: 0; } .prd-score { gap: 12px; } .prd-row-end .prd-mail { display: none; } .prd-notifs { max-width: 80%; } .prd-cursor { display: none; } } @media (max-width: 420px) { .prd-omni { display: none; } .prd-rail-t { font-size: 8.5px; } }