claudette-web

The marketing site for Claudette — a static one-pager with no build step and no dependencies.

Published with GitHub Pages from main.

Local preview

python3 -m http.server 4173
# → http://localhost:4173

Or just open index.html in a browser.

Files

index.html            the whole page
styles.css            design tokens + every rule, in page order
assets/hero-app.png   product screenshot, background removed
assets/logo.png       app icon
assets/fonts/*.woff2  Open Sans + Geist Mono, latin subsets

Design

Warm off-white page, one coral accent (--accent), oversized headings at weight 300, and a lot of vertical air. Section rhythm is: a small letterspaced kicker, a large light heading, then the content — alternating white and --bg-soft bands.

Panels use .card, which draws its pale halo as a 5px transparent border filled with the --edge gradient. Doing it that way (rather than as a blurred pseudo-element behind the box) keeps it working inside the stacking context the .reveal animation creates.

Fonts are self-hosted in assets/fonts/, not pulled from Google — the page argues that nothing leaves your machine, so it shouldn't make a third-party request to say so. Latin subsets only; ∞ in the earn block falls back to a system font.

Notes

The hero's last word cycles — “software with a user base of one / a team / an agency / thousands” ([data-rotator] in index.html, .rotator and .rot-word in the CSS). The words are stacked in one grid cell so the line never reflows; only the wrapper's width animates. .rot-word needs justify-self: start, otherwise each word stretches to the widest one and the script measures the cell instead of the word. Without JavaScript, or under prefers-reduced-motion, it shows “one” and stays there — so edit the first word with that in mind.

The contrast block under the hero carries the same argument as the headline. Keep the two in sync if either is rewritten.

“How it works” is deliberately free of any mention of selling — the store and the earning pitch come later on the page. The three step cards contain small CSS mock-ups (.flow-art, .m-* in the CSS), not screenshots.