Add six copy and paste sections in plain HTML and CSS

[singhharsh1708]

First half of #410. Six sections you can copy into any page: hero, feature grid, pricing, questions, email signup and footer. The page that shows them and the copy button are #411; this is the set itself, defined once so what somebody reads and what they paste cannot drift.

Plain HTML and CSS. No React, no Tailwind, no bundler, no script tag, and nothing fetched from anywhere, so a block pastes into a WordPress template, a PHP file or a folder of static files and works offline. Every library in the research ships React plus a motion library, and the ones that serve everyone else ship markup with no behaviour.

Colours and spacing come from --sck-* custom properties with their own fallbacks, so a pasted block inherits the host page's palette where there is one and still looks finished where there is not. Every rule is rooted at .sck, so nothing it is pasted into gets restyled; a test fails if a selector escapes that.

No testimonial component. It is the one section whose sample content would be a made-up endorsement, and a kit that hands people a fake quote to ship is worse than one section short. Questions took its place.

Copy is written for one fictional bookkeeping business, specific enough that it could not be find-and-replaced onto another: 340 independent cafes, a company number, a named export format. Tests ban the filler vocabulary and the chrome that makes a page look mass produced: tracked-out capitals above every heading, an arrow glued to button text, numbered markers on things that are not a sequence.

Three things the browser found that the tests could not:

• The smallest interactive target was 20px tall, under the 24px WCAG 2.5.8 asks for. Footer links and questions are now 32px.
• display: flex on a summary removes the disclosure triangle, which is the only thing telling anyone the answer is in there. It is display: list-item now, with a test.
• One literal rgba in the signup field is now a token the host can override, like everything else.

Verified by rendering the whole set and driving it: six sections at 1440 and 390, nothing overflowing, no sideways scroll, no console errors; a question opens by mouse click and by Enter with the summary focused, and the answer is visible; the focus ring is a 3px solid outline. Contrast measured across every text role, lowest 5.67:1 on the primary button and 5.76:1 in the signup field, with headings at 17.62:1 and body text at 10.78:1.

Reverting the selector scoping or adding filler copy each fails its own test. tsc and eslint clean, vitest 699 of 699.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
scrollcraft	Ready	Preview	Oct 3, 2026 11:16am UTC