/* ============================================================ NovusConfido — Growth Assessment page-growth-assessment.php · requires tokens.css and home.css WHY THIS IS A SEPARATE FILE. CLAUDE.md says new CSS is appended to the existing files. This is a deliberate exception, recorded in functions.php too: home.css is already 72KB and loads on every coded page, and everything below is used by exactly one page. Loading it everywhere would cost every other page for nothing. EVERY SELECTOR IS SCOPED TO .nc-assess, except the three .nc-js state-machine rules, which are scoped to .nc-js AND .nc-assess together. Nothing here can reach another page. Tokens only. No hex values anywhere. The raw pixel values are listed at the foot of this file with the reason for each. Reuses, rather than restates: - the choice rows, inputs and submit button from site.css - .section, .wrap, .reading, .hero, .overline, .mask, .rv, .arch__list and the global :focus-visible ring from home.css ============================================================ */ /* ------------------------------------------------------------ 1 · THE THREE STATES The page ships as a plain document: all fifteen questions, all forty-five answers and all seven result texts are in the HTML on first load. The one-line script in the template's adds .nc-js to the document element before the body is parsed, and these rules then fold it down to one screen at a time from the first paint — no flash, no layout shift. With scripting off, .nc-js is never added, none of this applies, and the whole thing stays readable as a document. The start screen and question 1 carry .is-on in the HTML, so the opening state is correct before any script has run. ------------------------------------------------------------ */ .nc-js .nc-assess .as__screen{display:none} .nc-js .nc-assess .as__screen.is-on{display:block} .nc-js .nc-assess .as__q{display:none} .nc-js .nc-assess .as__q.is-on{display:block} .nc-js .nc-assess .as__res{display:none} .nc-js .nc-assess .as__res.is-on{display:block} /* ------------------------------------------------------------ 1b · THE GAP UNDER THE HEADLINE .hero and .section both carry 96px of vertical padding, which is right where a hero holds an overline, a heading, a paragraph and a button row. This one holds an overline and an h1 and nothing else, because the h1 is persistent and only the panel beneath it changes. Two lots of 96px under a two-line heading is 192px of nothing, and the headline stops reading as the introduction to the questions. Halved on both sides of the boundary, from tokens: 48 + 48 = 96, against 96 + 96 = 192. THE BACKGROUND CHANGE STAYS. That boundary marks the fixed heading apart from the panel that switches underneath it, which is worth keeping — only the distance was wrong. BOTH SELECTORS ARE .nc-assess-SCOPED. .hero and .section are shared with all four other pages and none of them moves. Only padding-top and padding-bottom are touched. The space above the overline, and the space above the footer, are both left alone — neither was the problem. ------------------------------------------------------------ */ .nc-assess .hero{padding-bottom:var(--s-xl)} .nc-assess .section--surface{padding-top:var(--s-xl)} /* Below 768px home.css takes .section to 64px, but .hero keeps its 96px — so the gap there is 96 + 64 = 160. Halved to 32 + 48 = 80, the same proportion as the desktop change. */ @media(max-width:767px){ .nc-assess .hero{padding-bottom:var(--s-lg)} .nc-assess .section--surface{padding-top:var(--s-xl)} } /* ------------------------------------------------------------ 2 · PARAGRAPH RHYTHM home.css sets p{margin:0} globally, so every page states its own. Same value and same technique as .nc-about .reading. ------------------------------------------------------------ */ .nc-assess .as p + p{margin-top:var(--s-md)} /* The bold lead-in above "Three things to look at" and "What to do next". Three classes so it beats the p + p rule above, which is (0,2,2) — the same trick .nc-wib and .nc-about already use. Weight 600, not the browser's 700: every other emphasis on this site is 600, and DESIGN.md allows two weights in a view. */ .nc-assess .as .as__lead{ margin-top:var(--s-lg); font-weight:600; color:var(--c-dark); } .nc-assess .as__intro{color:var(--c-dark)} /* Caption in Light, for the two small-print lines. */ .nc-assess .as__note{ margin-top:var(--s-sm); font-size:var(--t-caption); color:var(--c-light); line-height:1.5; } /* ------------------------------------------------------------ 3 · BUTTONS Astra styles bare