Signup Form Hero

A server component, one file, zero dependencies. The --vibeui-hero-019-* palette is built on light-dark(): the section is light by default, and in a dark context the card is lighter than the background while the border is lighter than the card; the :where(.dark,[data-theme="dark"]) … {color-scheme:dark} rule is there because next-themes and shadcn switch a class rather than color-scheme. The right column is a real <form> with <label for>, <input type="email" required autocomplete="email"> and <button type="submit">: the browser validates the address, offers the saved one and submits on Enter. The button caption colour is derived from the lightness of the accent through oklch(from …). The field and the card declare min-width:0 and width:100%, otherwise an <input> at its default width would stretch the grid on a narrow screen. The layout is a single column up to 52rem, beyond which a container query splits the copy and the card into two columns. The button and the field carry min-height rather than height.