/** * tr-cta — the contextual newsletter CTA above the footer (CTA-01 / CTA-02) * ---------------------------------------------------------------------------- * Left: a title and one supporting line. Right: the newsletter form inside a * card. One purpose, one control, and nothing else in the section. * * FOUR SURFACES, NOT TWO (CTA-02) * ---------------------------------------------------------------------------- * The first pass removed the card and gave the form a hairline frame directly on * the section. That fixed the invisible field but flattened the whole block — * an input floating on the footer background. The depth is back, and it is built * from four real token surfaces so it holds in both themes: * * 1 .tr-cta --surface-sunken the recess, under the page and the footer * 2 .tr-cta__card --surface-card a panel lifted out of it, with a border * 3 .ff-el-form-control --surface-sunken + --tiorai-field-border, inset in the panel * 4 .ff-btn-submit --color-primary the one lime thing in the section * * Levels 3 and 4 are NOT set here. They come from * `assets/css/integrations/fluentform.css`, the adapter every FluentForm on the * site shares, and this file's job is to stop overriding them. The first pass * forced the field transparent and borderless so it would disappear into a * frame; removing that override is what gives the field its own boundary back. * Colours, focus rings, hover, the loading state and reduced motion for both * controls stay with the adapter — the same division CLAUDE.md §9.22 states for * the share dock: render the owning component, style placement only. * * THE FORM'S OWN CUSTOM CSS IS OVERRIDDEN, DELIBERATELY * ---------------------------------------------------------------------------- * Form 3 carries a `_custom_form_css` entry saved against it in FluentForm, * which prints inline: * `.fluent_form_3 .top_merged.ff_submit_btn_wrapper { position:absolute; top:5px; right:5px }` * That absolutely positions the submit over the field. It is fine over a field * as wide as the form and catastrophic otherwise: measured at 390px the button * covered most of a 181px input, and at 320px it covered all of it, so the field * could not be typed into. The inline style cannot be edited from the theme, so * the wrapper is returned to the flow with `position: static !important` and the * two groups are laid out here at every width. * * @package TiorAI * @since 4.22.0 */ /* ============================================================================ SECTION — surface 1 ========================================================================== */ /* * `--surface-sunken` rather than a translucent white wash. The pre-CTA-01 * container painted `linear-gradient(rgba(255,255,255,.05), …)` over a * `backdrop-filter: blur(20px)` — a full-width blurred band that composited on * every page of the site to produce a barely visible tint. The recess token has * a real value in both themes and costs nothing to paint. * * The section renders inside