/* * Newsletter signup — the block on a page. * * The file is the `style` of the block, so WordPress loads it on a page * that holds the block AND in the editor canvas. The block therefore * looks the same in both places. * * The network theme supplies the tokens (--surface, --ink, --line, * --radius and the rest, from theme.json). Every rule carries a * fallback, so the block still looks right under another theme and * before the stylesheets of the theme have loaded. The colour of the * answer under the form is the one exception: green for a signup that * worked and red for one that failed are meanings, not decoration, so * they read no token and no person can change them. * * The three colours of the button come from the Customizer of the site, * under "Colours". The theme writes each filled-in field on the * element (--brand-button and the two beside it), on the page and in the * editor canvas, and EVERY button of the network reads the same three. * The button of this block therefore carries the colour of the button of * an advertiser card, of a banner and of a core block. * * The file styles NOTHING of the letters that Resend sends. An email * client reads no stylesheet; see assets/email.css and render.php. */ .netsite-signup { --ne-signup-surface: var(--wp--custom--tint, #f2f4f7); --ne-signup-ink: var(--wp--custom--ink, #1e2126); --ne-signup-muted: var(--wp--custom--muted, #5a5f68); --ne-signup-line: var(--wp--custom--line, #e7e4de); --ne-signup-field: var(--wp--custom--surface, #fff); /* * An empty "Button background colour" gives the second colour of * the site. An empty "Button background hover colour" gives a dark * version of THE COLOUR OF THE BUTTON, never the dark version of * the accent: a site that picks a button colour of its own must not * get a hover colour out of another colour. The 18% is the amount * of black that the theme mixes into its own deep colours, and the * advertiser card mixes the same amount, so the two buttons agree. */ --ne-signup-button: var(--brand-button, var(--brand-accent, #e8590c)); --ne-signup-button-hover: var(--brand-button-hover, color-mix(in srgb, #000 18%, var(--ne-signup-button))); --ne-signup-button-ink: var(--brand-button-text, #fff); --ne-signup-radius: var(--wp--custom--radius, 10px); --ne-signup-radius-sm: var(--wp--custom--radius-small, 6px); box-sizing: border-box; padding: clamp(1.25rem, 4vw, 2rem); border: 1px solid var(--ne-signup-line); border-radius: var(--ne-signup-radius); } /* * The colours of the box stand behind a :not(). An editor who picks a * background or a text colour in the block panel gets a class of * WordPress on this same element, and that class carries the same * weight as a plain class of ours. The rule that must lose therefore * has to say so itself, instead of hoping for the order of two * stylesheets. */ .netsite-signup:not(.has-background) { background: var(--ne-signup-surface); } .netsite-signup:not(.has-text-color) { color: var(--ne-signup-ink); } .netsite-signup__heading { margin: 0 0 0.5rem; font-family: var(--wp--custom--font-display, inherit); font-size: clamp(1.25rem, 2.5vw, 1.6rem); line-height: 1.2; } .netsite-signup__text { margin: 0 0 1rem; color: var(--ne-signup-muted); } .netsite-signup__row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: stretch; } .netsite-signup__input { flex: 1 1 14rem; min-width: 0; box-sizing: border-box; padding: 0.7rem 0.9rem; border: 1px solid var(--ne-signup-line); border-radius: var(--ne-signup-radius-sm); background: var(--ne-signup-field); color: inherit; font: inherit; line-height: 1.3; } .netsite-signup__input:focus-visible { outline: 2px solid var(--ne-signup-button); outline-offset: 1px; } .netsite-signup__button { flex: 0 0 auto; padding: 0.7rem 1.4rem; border: 0; border-radius: var(--ne-signup-radius-sm); background: var(--ne-signup-button); color: var(--ne-signup-button-ink); font: inherit; font-weight: 600; line-height: 1.3; cursor: pointer; } .netsite-signup__button:hover, .netsite-signup__button:focus-visible { background: var(--ne-signup-button-hover); } .netsite-signup__button[disabled] { cursor: progress; opacity: 0.7; } .netsite-signup__note { margin: 0.75rem 0 0; color: var(--ne-signup-muted); font-size: 0.85em; } /* * The trap for a robot. It must be gone for a person and present for a * robot, so it keeps its place in the markup and leaves the page. Do * not use display:none: a careful robot skips a field that is hidden * that way. */ .netsite-signup__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* * The line under the form. It holds no text until something happened. * * An empty line must take no space, and it must NOT go out of the page: * it is the live region that tells a screen reader what happened, and a * region that appears at the same moment as its text is a region that a * screen reader often reads too late, or not at all. The empty line * therefore keeps its place and gives up its space only. */ .netsite-signup__message { margin: 0.75rem 0 0; font-weight: 600; } .netsite-signup__message:empty { margin: 0; } /* The line takes the focus after a signup, and draws no ring of its own. */ .netsite-signup__message:focus { outline: 0; } /* * The colour of the answer says what happened, and it never changes. * * Green means that the signup worked, and red means that it did not. * The two colours are written here as a value and NOT as a token of the * theme: a token follows the brand colours that a person picks in the * customizer, and a brand colour can turn the answer green when the * signup failed, or make the text too pale to read on the box. * * Both colours are deep, so they keep a contrast of about 9:1 on the * light box of the block and on white. Keep them deep if you change * them. */ .netsite-signup__message.is-ok { color: #0f5132; } .netsite-signup__message.is-error { color: #8a1c1c; } /* After a signup the field and the button have no work left. */ .netsite-signup__form.is-done .netsite-signup__row, .netsite-signup__form.is-done .netsite-signup__note { display: none; }