/* cs.css — Custom Strategy flow + report. Uses the site tokens from style.css (:root). Light, editorial, premium. No emoji. Mobile-first, works 360px to desktop. */ .cs-wrap { max-width: 820px; margin: 0 auto; padding-inline: var(--gutter); } #cs-app { min-height: 60vh; padding-block: clamp(2rem, 6vw, 5rem); } /* One-viewport quiz. Every step before the report fills the screen below the sticky header and the footer is hidden, so a founder sees one focused screen with nothing to scroll past. The report is the deliberate exception: it is long by design, so it scrolls and the footer returns. The stage attribute is set on by flow.js on every transition. min-height (not height) means a tall step on a small phone grows rather than clipping: content is never cut off. */ body[data-cs-stage]:not([data-cs-stage="report"]) .site-footer { display: none; } body[data-cs-stage]:not([data-cs-stage="report"]) #cs-app { min-height: calc(100dvh - var(--header-h)); display: flex; flex-direction: column; justify-content: center; padding-block: clamp(0.75rem, 2vw, 1.4rem); } .cs-screen { animation: cs-fade .35s ease; } @keyframes cs-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* intro */ .cs-intro .display { font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.1; margin: .9rem 0 1.1rem; } .cs-intro .lead { max-width: 60ch; } .cs-start { margin-top: 1.8rem; } .cs-muted { color: var(--muted); font-size: .95rem; margin-top: 1rem; } /* the opener form: give the button room to breathe below the input, not stacked flush against it */ .cs-intro .cs-form { margin-top: 1.8rem; } .cs-intro .cs-form .btn { margin-top: 1.4rem; } /* resume screen: keep the two choices clearly apart, not jammed together */ .cs-intro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem; margin-top: 1.8rem; } .cs-intro-actions .cs-start, .cs-intro-actions .cs-back { margin-top: 0; } /* progress */ .cs-progress { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; } .cs-dots { display: flex; gap: .4rem; } .cs-dot { width: 26px; height: 3px; border-radius: 2px; background: var(--line-2); transition: .25s; } .cs-dot.on { background: var(--green); } .cs-step { font-size: .8rem; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; } /* questions. A wider band so the question and options fill the page rather than sit in a narrow centred strip; the extra width also lets the longest options (Q9) wrap onto fewer lines, which frees vertical room for larger, more generous option cards while still fitting one viewport. `.cs-question .cs-q` out-specifies style.css `h2.display`, which otherwise wins. */ body[data-cs-stage="question"] .cs-wrap { max-width: 1040px; } .cs-question .cs-q { font-size: clamp(1.7rem, 3.2vw, 2.8rem); line-height: 1.15; margin-bottom: .4rem; } .cs-options { display: grid; gap: .8rem; margin-top: 1.5rem; } .cs-option { text-align: left; font-family: var(--sans); font-size: 1.12rem; color: var(--ink); background: var(--white); border: 1px solid var(--line-2); border-radius: 12px; padding: 1.05rem 1.4rem; cursor: pointer; transition: .16s; } .cs-option:hover { border-color: var(--ink); transform: translateX(3px); } /* selected state, so an answer is still visible when the founder navigates back */ .cs-option.on { border-color: var(--green-ink); box-shadow: inset 3px 0 0 var(--green); } .cs-back { margin-top: 1rem; background: none; border: 0; color: var(--muted); font-family: var(--sans); font-size: .9rem; cursor: pointer; padding: .3rem 0; } .cs-back:hover { color: var(--ink); } /* stacked forms (qualifiers, results gate) */ .cs-form { margin-top: 1.6rem; } .cs-fields { display: grid; gap: 1rem; margin-bottom: 1.6rem; } .cs-field { display: grid; gap: .4rem; } .cs-field > span { font-family: var(--sans); font-size: .9rem; color: var(--muted); } .cs-field .cs-input { width: 100%; } .cs-input { flex: 1 1 260px; font-family: var(--sans); font-size: 1.05rem; color: var(--ink); background: var(--white); border: 1px solid var(--line-2); border-radius: 12px; padding: 1rem 1.1rem; } .cs-input:focus { outline: none; border-color: var(--green-ink); } .cs-error { color: #b4342a; font-size: .95rem; margin-top: .9rem; } /* company facts list on the report */ .cs-facts { list-style: none; padding: 0; margin: 1.4rem 0; display: grid; gap: .1rem; max-width: 420px; } .cs-facts li { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); } .cs-facts li span { color: var(--muted); } .cs-facts li strong { font-weight: 500; } /* analysing */ .cs-analysing { text-align: center; padding-block: 3rem; } .cs-spinner { width: 44px; height: 44px; margin: 0 auto 1.4rem; border-radius: 50%; border: 3px solid var(--line-2); border-top-color: var(--green); animation: cs-spin .8s linear infinite; } @keyframes cs-spin { to { transform: rotate(360deg); } } /* report */ .cs-report { animation: cs-fade .4s ease; } /* The report fills the canvas on desktop: a wider band and two columns, so it never sits as a narrow strip with empty space either side. The quiz screens stay at the narrow 820px width because they are single-focus. The headline (head, score card, closing CTA) spans both columns; the diagnosis blocks flow into two readable columns beneath it. */ /* The report is a single column, one block above the next, but wider than the 820px quiz band so it does not read as a narrow strip on a desktop. */ body[data-cs-stage="report"] .cs-wrap { max-width: 940px; } .cs-report-head { padding-bottom: 1.6rem; border-bottom: 1px solid var(--line); margin-bottom: 2.4rem; } .cs-report-head .display { margin-top: .6rem; } .cs-block { padding-block: 1.8rem; border-bottom: 1px solid var(--line); } .cs-block:last-child { border-bottom: 0; } .cs-block .label { display: inline-block; margin-bottom: 1rem; } .cs-lead { font-family: var(--serif); font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.45; color: var(--ink); } .cs-body { font-size: 1.05rem; line-height: 1.65; color: var(--ink-2); margin-top: .8rem; } .cs-block--seen { background: var(--paper-2); border-radius: 16px; padding: 1.8rem; border-bottom: 0; } /* value notes */ .cs-notes { display: grid; gap: 1rem; } .cs-note { background: var(--white); border: 1px solid var(--line); border-left: 3px solid var(--line-2); border-radius: 12px; padding: 1.2rem 1.4rem; } .cs-note--strength { border-left-color: var(--green); } .cs-note--priority { border-left-color: #d98b2b; } .cs-note h4 { font-family: var(--sans); font-size: 1.05rem; font-weight: 600; margin: .5rem 0 .4rem; } .cs-note p { color: var(--ink-2); line-height: 1.6; } /* the headline score */ .cs-block--score { background: var(--black); color: var(--paper); border-radius: 16px; padding: 2rem; border-bottom: 0; margin-block: .6rem; } .cs-score-label { font-family: var(--sans); font-size: .85rem; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.6); } .cs-score { font-family: var(--serif); margin: .2rem 0 .6rem; color: var(--paper); } .cs-score strong { font-size: clamp(3.4rem, 11vw, 5.4rem); font-weight: 420; line-height: 1; } .cs-score span { font-family: var(--sans); font-size: .95rem; color: rgba(255,255,255,.6); margin-left: .5rem; } .cs-band { font-family: var(--serif); font-size: clamp(1.3rem, 3vw, 1.8rem); font-weight: 420; color: var(--green); margin-bottom: 1rem; } .cs-block--score .cs-lead { color: rgba(255,255,255,.92); font-size: clamp(1.05rem, 1.6vw, 1.2rem); } /* cta */ .cs-block--cta .display { margin: .4rem 0 .8rem; } .cs-cta-row { display: flex; gap: .8rem; flex-wrap: wrap; margin: 1.4rem 0 1rem; } /* options are one line of the client's own wording, sized to be read comfortably */ .cs-option { line-height: 1.45; } @media (max-width: 600px) { .cs-option { padding: .9rem 1.05rem; font-size: 1rem; } } /* the reveal: the founder's own homepage screenshot beside the public record, before any question. Two columns on desktop (screenshot left, details right), stacked on mobile. The screenshot holds a true 16:9 website ratio so it reads as a real browser capture rather than a distorted band. */ /* The reveal: a single centred column, the founder's own homepage above their domain and the CTA. Companies House is left out for now, so there is no public-record panel. */ .cs-reveal-solo { max-width: 720px; margin: 0 auto; text-align: center; } .cs-reveal-solo .cs-shot { width: 100%; } .cs-reveal-solo .display { margin: 1.1rem 0 .5rem; } .cs-reveal-solo .cs-muted { max-width: 46ch; margin-left: auto; margin-right: auto; } .cs-reveal-solo .btn { margin-top: 1.3rem; } .cs-shot { margin: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; border: 1px solid var(--line-2); background: var(--paper-2); box-shadow: 0 18px 40px -24px rgba(0,0,0,.35); } .cs-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; } /* points breakdown */ .cs-bars { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .85rem; } .cs-bar-row { display: grid; grid-template-columns: 1fr; gap: .3rem; } .cs-bar-label { font-size: .95rem; color: var(--ink); } .cs-bar-track { display: block; height: 8px; border-radius: 4px; background: var(--line-2); overflow: hidden; } .cs-bar-fill { display: block; height: 100%; border-radius: 4px; background: var(--green); } .cs-bar-value { font-size: .85rem; color: var(--muted); } .cs-bar-value strong { color: var(--ink); font-weight: 600; } .cs-bar-row--skipped .cs-bar-label { color: var(--muted); } @media (min-width: 640px) { .cs-bar-row { grid-template-columns: 15rem 1fr 5.5rem; align-items: center; gap: 1rem; } .cs-bar-value { text-align: right; } } /* diligence questions */ .cs-diligs { display: grid; gap: 1.4rem; margin-top: 1.4rem; } .cs-dilig h4 { font-family: var(--sans); font-size: 1.05rem; font-weight: 600; margin-bottom: .6rem; } .cs-dilig ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .5rem; } .cs-dilig li { color: var(--ink-2); line-height: 1.6; }