/* ========================================================================== Higgins AI Readiness Assessment Loaded only by ai-readiness.html, after styles.css, so every :root token is available and no other page pays for these bytes. Colour rule inherited from DESIGN-SYSTEM.md §2.8: --color-primary is 2.1:1 on white and must never carry body-size text. Text uses --color-primary-dark or a gray. --color-primary is fills, borders, and large numerals only. ========================================================================== */ /* The navbar is position:fixed, so an un-offset anchor jump hides the heading underneath it. */ #higgins { scroll-margin-top: 100px; } /* Not defined anywhere in styles.css, and the chat inputs need real labels for screen readers without showing them. Scoped here rather than added to the shared stylesheet, which no other page currently needs. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .ha-shell { max-width: 860px; margin: 0 auto; } /* --------------------------------------------------------------- intro card */ .ha-intro { background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--radius-xl); padding: var(--spacing-2xl); text-align: center; box-shadow: var(--shadow-card); } .ha-intro h3 { margin-bottom: var(--spacing-sm); } .ha-intro p { color: var(--color-gray-600); max-width: 52ch; margin: 0 auto var(--spacing-lg); } /* The expectations line. Setting the contract before the first click is the cheapest conversion lever on the page — say the length, say the price. */ .ha-contract { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-sm) var(--spacing-lg); margin-bottom: var(--spacing-xl); font-family: var(--font-condensed); font-size: 0.9375rem; color: var(--color-gray-600); } .ha-contract span { display: inline-flex; align-items: center; gap: var(--spacing-xs); } .ha-contract svg { color: var(--color-primary-dark); flex-shrink: 0; } /* ---------------------------------------------------------------- chat panel */ .ha-panel { background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); /* `clip`, not `hidden`. Both round off the corners, but `hidden` makes this a scroll container, and a scroll container ancestor stops position:sticky from tracking the page — the header below would simply never stick. */ overflow: clip; } /* styles.css sets `body { overflow-x: hidden }` site-wide. Per spec a hidden overflow-x forces overflow-y to compute as `auto`, which turns into a scroll container — and that container, not the viewport, becomes the scrollport for any sticky descendant. Since is as tall as its content and never scrolls (html does), sticky had nothing to react to and simply scrolled away with the panel. `clip` clips exactly the same way without creating a scroll container. The `hidden` line stays first as a fallback for browsers without `clip`, and this is scoped to the readiness page rather than changing the site-wide rule. */ body.readiness-page { overflow-x: hidden; overflow-x: clip; } /* Progress line, bar and section pills, held at the top of the viewport while the transcript grows underneath. --ha-nav-h is measured in assessment.js because the fixed navbar changes height once it picks up .scrolled. */ .ha-panel-top { position: sticky; top: var(--ha-nav-h, 88px); z-index: 5; background: var(--color-white); border-bottom: 1px solid var(--color-gray-200); } .ha-panel-top .ha-head { border-bottom: 0; } .ha-panel-top .ha-pills { padding-bottom: var(--spacing-md); } .ha-head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); padding: var(--spacing-md) var(--spacing-lg); border-bottom: 1px solid var(--color-gray-200); background: var(--color-gray-50); } .ha-who { display: flex; align-items: center; gap: var(--spacing-sm); font-weight: 600; color: var(--color-gray-900); } .ha-dot { width: 9px; height: 9px; border-radius: var(--radius-full); background: var(--color-primary-dark); flex-shrink: 0; } .ha-progress-text { font-family: var(--font-condensed); font-size: 0.875rem; color: var(--color-gray-600); text-align: right; } .ha-bar { height: 3px; background: var(--color-gray-200); } .ha-bar-fill { height: 100%; width: 0; background: var(--gradient-primary); transition: width var(--transition-slow); } /* Six pills that fill in as each area completes. This is the single biggest perceived-length reduction available: it reframes "18 questions" as "six sets of three", and teaches the radar's shape before the radar appears. */ .ha-pills { display: flex; gap: var(--spacing-xs); padding: var(--spacing-md) var(--spacing-lg) 0; flex-wrap: wrap; } .ha-pill { font-family: var(--font-condensed); font-size: 0.75rem; letter-spacing: 0.02em; padding: 3px 10px; border-radius: var(--radius-full); background: var(--color-gray-100); color: var(--color-gray-500); border: 1px solid transparent; transition: all var(--transition-base); } .ha-pill.is-active { background: var(--color-primary-tint); color: var(--color-primary-dark); border-color: var(--color-primary); font-weight: 600; } .ha-pill.is-done { background: var(--color-white); color: var(--color-gray-700); border-color: var(--color-gray-300); } .ha-log { padding: var(--spacing-lg); max-height: 460px; overflow-y: auto; overscroll-behavior: contain; } .ha-msg { max-width: 90%; margin-bottom: var(--spacing-md); padding: var(--spacing-md) var(--spacing-lg); border-radius: var(--radius-lg); line-height: 1.65; color: var(--color-gray-700); animation: ha-rise var(--transition-base) ease both; } .ha-msg-bot { background: var(--color-primary-tint); border-bottom-left-radius: var(--radius-sm); } .ha-msg-user { background: var(--color-gray-100); margin-left: auto; border-bottom-right-radius: var(--radius-sm); color: var(--color-gray-800); } .ha-msg-note { background: var(--color-accent-tint); color: var(--color-gray-800); font-size: 0.9375rem; } @keyframes ha-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* Axis divider between sections */ .ha-divider { display: flex; align-items: center; gap: var(--spacing-md); margin: var(--spacing-lg) 0; font-family: var(--font-condensed); font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-gray-500); } .ha-divider::before, .ha-divider::after { content: ''; flex: 1; height: 1px; background: var(--color-gray-200); } /* typing indicator */ .ha-typing { display: inline-flex; gap: 4px; padding: var(--spacing-md) var(--spacing-lg); } .ha-typing i { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--color-primary-dark); animation: ha-blink 1.3s infinite both; } .ha-typing i:nth-child(2) { animation-delay: 0.18s; } .ha-typing i:nth-child(3) { animation-delay: 0.36s; } @keyframes ha-blink { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } } /* ------------------------------------------------------------ quick replies */ .ha-foot { border-top: 1px solid var(--color-gray-200); padding: var(--spacing-lg); background: var(--color-gray-50); } .ha-replies { display: flex; flex-direction: column; gap: var(--spacing-sm); margin-bottom: var(--spacing-md); } /* Real buttons, full-width, left-aligned: these are sentences, not labels, so they need to read as a list of options rather than a row of chips. */ .ha-reply { text-align: left; padding: var(--spacing-md) var(--spacing-lg); border: 1px solid var(--color-gray-300); border-radius: var(--radius-md); background: var(--color-white); color: var(--color-gray-700); font-family: var(--font-body); font-size: 0.9375rem; line-height: 1.5; cursor: pointer; transition: all var(--transition-fast); } .ha-reply:hover:not(:disabled) { border-color: var(--color-primary); background: var(--color-primary-tint); color: var(--color-gray-900); } .ha-reply:focus-visible { outline: 2px solid var(--color-primary-dark); outline-offset: 2px; } .ha-reply:disabled { opacity: 0.5; cursor: default; } .ha-compose { display: flex; gap: var(--spacing-sm); } /* finish() sets .hidden on this form, but an author `display: flex` beats the browser's own [hidden] rule — so the input and Send button stayed live while the report was being scored, and a finished assessment could still be typed into. The hint below it is a sibling, so it goes too. */ .ha-compose[hidden] { display: none; } .ha-compose[hidden] + .ha-hint { display: none; } .ha-compose input { flex: 1; padding: 0.75rem 1rem; border: 1px solid var(--color-gray-300); border-radius: var(--radius-md); font-family: var(--font-body); font-size: 0.9375rem; color: var(--color-gray-800); background: var(--color-white); } .ha-compose input:focus { outline: none; border-color: var(--color-primary-dark); box-shadow: 0 0 0 3px var(--color-primary-tint); } .ha-hint { margin-top: var(--spacing-sm); font-size: 0.8125rem; color: var(--color-gray-500); } /* -------------------------------------------------------------------- report */ .ha-report[hidden] { display: none; } .ha-report { margin-top: var(--spacing-2xl); } .ha-verdict { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--spacing-2xl); align-items: center; background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--radius-xl); padding: var(--spacing-2xl); box-shadow: var(--shadow-card); } .ha-radar { width: 100%; max-width: 400px; margin: 0 auto; display: block; } .ha-stage-label { font-family: var(--font-condensed); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-gray-500); margin-bottom: var(--spacing-xs); } .ha-stage-name { font-family: var(--font-heading); font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.15; color: var(--color-gray-900); margin-bottom: var(--spacing-md); } .ha-stage-name em { font-style: normal; background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .ha-score-row { display: flex; align-items: baseline; gap: var(--spacing-sm); margin-bottom: var(--spacing-lg); } .ha-score-num { font-family: var(--font-condensed); font-size: 3rem; font-weight: 700; line-height: 1; color: var(--color-primary-dark); } .ha-score-of { font-family: var(--font-condensed); color: var(--color-gray-500); } .ha-headline { color: var(--color-gray-700); line-height: 1.7; } /* area cards */ /* Status line under the typing dots while the single scoring call runs. */ .ha-scoring-note { margin: 0.35rem 0 0 var(--spacing-md); font-size: 0.85rem; color: var(--color-gray-500); font-style: italic; } /* ------------------------------------------------------------ report head Shown once the gate is through, on screen and in print. This is what makes a printed copy belong to a particular business rather than being an anonymous score sheet. */ .ha-report-head { border-bottom: 2px solid var(--color-gray-900); padding-bottom: var(--spacing-md); margin-bottom: var(--spacing-xl); } .ha-rh-org { font-family: var(--font-heading, inherit); font-size: 1.75rem; font-weight: 700; line-height: 1.2; color: var(--color-gray-900); } .ha-rh-title { font-size: 1rem; color: var(--color-gray-600); margin-top: 0.15rem; } .ha-rh-meta { display: flex; flex-wrap: wrap; gap: 0.4rem var(--spacing-md); justify-content: space-between; margin-top: var(--spacing-sm); font-size: 0.8rem; color: var(--color-gray-500); } .ha-report-intro { margin-bottom: var(--spacing-xl); max-width: 46rem; } .ha-report-intro[hidden] { display: none; } .ha-report-intro h4 { font-family: var(--font-heading); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-gray-500); margin-bottom: var(--spacing-sm); } .ha-report-intro p { color: var(--color-gray-600); font-size: 0.95rem; margin-bottom: var(--spacing-sm); } .ha-report-intro p:last-child { margin-bottom: 0; } .ha-areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--spacing-lg); margin-top: var(--spacing-xl); } .ha-area { background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); padding: var(--spacing-lg); } .ha-area-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--spacing-sm); margin-bottom: var(--spacing-sm); } .ha-area-name { font-family: var(--font-heading); font-weight: 600; font-size: 1rem; color: var(--color-gray-900); } /* "Section" is set apart from the area name rather than run into it, so the heading still reads as the area first and the label second. */ .ha-area-name em { font-style: normal; font-weight: 400; color: var(--color-gray-500); } /* A bare number in a card corner reads as a page number — it did, in print. The label says what it is; the number stays the thing you see. */ .ha-area-score { display: flex; align-items: baseline; gap: 0.4rem; flex-shrink: 0; } .ha-area-score-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-gray-500); white-space: nowrap; } .ha-area-score-num { font-family: var(--font-condensed); font-size: 1.5rem; font-weight: 700; color: var(--color-primary-dark); line-height: 1; } .ha-meter { height: 6px; border-radius: var(--radius-full); background: var(--color-gray-100); overflow: hidden; margin-bottom: var(--spacing-md); } .ha-meter-fill { height: 100%; border-radius: var(--radius-full); background: var(--gradient-primary); width: 0; transition: width 900ms cubic-bezier(0.22, 1, 0.36, 1); } .ha-area-verdict { font-size: 0.9375rem; line-height: 1.6; color: var(--color-gray-600); } .ha-area-detail { margin-top: var(--spacing-md); padding-top: var(--spacing-md); border-top: 1px solid var(--color-gray-200); } .ha-area-detail h5 { font-family: var(--font-condensed); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-gray-500); margin: 0 0 var(--spacing-xs); } .ha-area-detail ul { margin: 0 0 var(--spacing-md); padding-left: 1.1rem; } .ha-area-detail li { font-size: 0.9375rem; line-height: 1.6; color: var(--color-gray-700); margin-bottom: var(--spacing-xs); } /* ---------------------------------------------------------------- email gate */ .ha-gate { margin-top: var(--spacing-xl); background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--radius-xl); padding: var(--spacing-2xl); box-shadow: var(--shadow-card); } .ha-gate h4 { margin-bottom: var(--spacing-sm); } .ha-gate-list { margin: var(--spacing-md) 0 var(--spacing-lg); padding-left: 1.2rem; color: var(--color-gray-600); } .ha-gate-list li { margin-bottom: var(--spacing-xs); } /* A few real lines of the report, faded out. A gate over something whose shape you have already seen converts far better than a gate over an unknown. */ .ha-peek { position: relative; max-height: 88px; overflow: hidden; margin-bottom: var(--spacing-lg); color: var(--color-gray-600); font-size: 0.9375rem; line-height: 1.7; } .ha-peek::after { content: ''; position: absolute; inset: auto 0 0 0; height: 56px; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--color-white) 100%); } .ha-gate-form { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); } .ha-gate-form input { flex: 1 1 240px; padding: 0.8rem 1rem; border: 1px solid var(--color-gray-300); border-radius: var(--radius-md); font-family: var(--font-body); font-size: 1rem; color: var(--color-gray-800); } .ha-gate-form input:focus { outline: none; border-color: var(--color-primary-dark); box-shadow: 0 0 0 3px var(--color-primary-tint); } .ha-privacy { margin-top: var(--spacing-md); font-size: 0.8125rem; color: var(--color-gray-500); } /* --------------------------------------------------------------- next steps */ .ha-steps { margin-top: var(--spacing-xl); background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--radius-xl); padding: var(--spacing-2xl); } .ha-step { display: flex; gap: var(--spacing-lg); padding: var(--spacing-lg) 0; border-bottom: 1px solid var(--color-gray-200); } .ha-step:last-child { border-bottom: 0; } .ha-step-num { flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--radius-full); background: var(--color-primary-tint); color: var(--color-primary-dark); font-family: var(--font-condensed); font-weight: 700; display: grid; place-items: center; } .ha-step-when { font-family: var(--font-condensed); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-gray-500); margin-bottom: 2px; } .ha-step-what { font-weight: 600; color: var(--color-gray-900); margin-bottom: var(--spacing-xs); } .ha-step-why { font-size: 0.9375rem; color: var(--color-gray-600); line-height: 1.6; } .ha-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-md); margin-top: var(--spacing-xl); } .ha-error { margin-top: var(--spacing-md); padding: var(--spacing-md); border-radius: var(--radius-md); background: var(--color-accent-tint); color: var(--color-gray-800); font-size: 0.9375rem; } .ha-error[hidden] { display: none; } /* ------------------------------------------------------------------- mobile */ @media (max-width: 768px) { .ha-verdict { grid-template-columns: 1fr; gap: var(--spacing-lg); padding: var(--spacing-lg); } .ha-log { max-height: 60vh; } .ha-msg { max-width: 100%; } .ha-pills { padding: var(--spacing-sm) var(--spacing-md) 0; } .ha-intro, .ha-gate, .ha-steps { padding: var(--spacing-lg); } } /* Honour the OS setting. DESIGN-SYSTEM.md requires transitions collapse to effectively zero rather than merely shorten. */ @media (prefers-reduced-motion: reduce) { .ha-msg, .ha-bar-fill, .ha-meter-fill, .ha-typing i, .ha-pill { animation: none !important; transition-duration: 0.01ms !important; } } /* -------------------------------------------------------------------- print There is no other @media print rule in this codebase, so these are the only print styles the page has. The goal is a clean report: everything that is navigation, marketing, or conversation comes out, and the report prints full-width. The radar is inline SVG, so it prints as vector. */ @media print { /* Marketing chrome and the whole rest of the page. The whole .section-header goes, not just its label: the h2 and the "Higgins will ask you 18 short questions" subhead were printing at the top of page one, which reads as nonsense on a report where the questions have already been answered. */ .navbar, .footer, .mobile-menu-btn, .hero, .cta, .section-header, .spectrum-track, .narrative-section, .ha-intro, .ha-panel, .ha-gate, .ha-actions, .ha-error, .ha-contract { display: none !important; } /* Sections other than the assessment shouldn't print at all */ body > section:not(#higgins) { display: none !important; } @page { size: letter; margin: 0.6in; } /* Nothing behind the report but paper. The section carries an alternate background on screen, and with "Background graphics" enabled in the print dialog that tint renders as a frame around every page. */ html, body, #higgins, .ha-shell, .ha-report, .container { background: none !important; background-color: #fff !important; box-shadow: none !important; } body { font-size: 10.5pt; } #higgins { padding: 0 !important; } .ha-shell, .container { max-width: 100% !important; padding: 0 !important; } /* Keep the brand gradient and tinted fills — a grey report looks broken. */ .ha-verdict, .ha-radar, .ha-meter-fill, .ha-step-num, .ha-stage-name em, .ha-report-head { -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* Masthead: who this report is for. Sits once at the very top. break-inside matters as much as break-after here — without it the meta row (date + attribution) detached and printed alone at the top of page two. */ .ha-report-head { display: block !important; margin-bottom: 0.7rem; padding-bottom: 0.4rem; break-inside: avoid; break-after: avoid; } .ha-rh-org { font-size: 18pt; } /* Sits between the masthead and the score on page one. Kept whole — this is the paragraph that explains the numbers to anyone who wasn't interviewed. Deliberately terse. Page one has to carry the masthead, this, and the whole verdict block; at three paragraphs it overran the printable area by about half an inch and break-inside pushed the radar to page two, leaving a cover page with nothing on it but text. */ .ha-report-intro { display: block !important; margin-bottom: 0.5rem; max-width: none; break-inside: avoid; } .ha-report-intro h4 { margin-bottom: 0.2rem; } .ha-report-intro p { font-size: 0.82rem; line-height: 1.45; margin-bottom: 0.25rem; } /* The verdict is the headline of the report and belongs on page one under the masthead. At full size the radar alone pushed it to page two, leaving a cover page carrying nothing but a company name. */ .ha-radar { max-width: 2.55in !important; } .ha-verdict { gap: 0.9rem !important; padding: 0.6rem 0.8rem !important; align-items: start !important; } .ha-headline { font-size: 0.88rem; line-height: 1.45; } /* Not a grid in print — a plain block flow. Two ~260px columns produced the orphaned sentences and empty rounded boxes, because a card that broke dragged its row-partner's box along with it. Going to one column fixed that but exposed a second problem: Chrome does not fragment grid items across pages, so it pushed every card to a page of its own and printed six half-empty pages. As block boxes the cards pack normally — two to a page — and break-inside: avoid still keeps each one whole. */ .ha-areas { display: block !important; margin-top: 0.7rem !important; } .ha-area + .ha-area { margin-top: 0.45rem; } .ha-verdict, .ha-area, .ha-steps { box-shadow: none !important; border: 1px solid var(--color-gray-300) !important; } .ha-verdict, .ha-area { break-inside: avoid; page-break-inside: avoid; } .ha-area { padding: 0.6rem 0.8rem !important; } /* The plan always starts a fresh page. It is the part people act on and the part they hand to someone else, so it should not begin halfway down a page under the tail of the last area card. Long by design, so it may flow across pages — but never split an individual step. A horizon label stranded at the foot of a page with its action overleaf is worse than a slightly short page. */ .ha-steps { break-before: page; break-inside: auto; padding: 0.8rem !important; } /* Closing line under the whole plan. */ .ha-print-cta { margin-top: 0.9rem; padding-top: 0.6rem; border-top: 1px solid var(--color-gray-300); font-size: 0.9rem; color: var(--color-gray-600); break-inside: avoid; } .ha-step { break-inside: avoid; page-break-inside: avoid; } .ha-steps h4 { break-after: avoid; } .ha-meter-fill { transition: none !important; } p, li { orphans: 3; widows: 3; } /* Print-only header and footer, injected by assessment.js */ .ha-print-only { display: block !important; } } .ha-print-only { display: none; }