/* ========================================================================== Connect 2026 - Newsletter sign up band T-09 -------------------------------------------------------------------------- MEASURED - and the two sizes are not interchangeable. p1 Home 774.5 x 96.1 x=567.2 -> 1341.6 inside the content column p3 Article 1256.2 x 61.2 x= 86.4 -> 1342.6 the whole container The band appears at four different widths across the 22 artboards. Home's sits in a 775px content column beside the left rail; the readers' spans the full 1256px container under the events strip. Same component, two variants. Confirm with the designer that the variation is deliberate - it is listed in CONNECT2026.md section 9. The artboards give this band NO internal design. It is drawn exactly like an advert slot: the lime placeholder fill with a caption. So the unwired state uses --cn-ph-ad, the same token adSlot uses, rather than inventing a look the client has not seen. DEPENDS ON: tokens.css, button.css ========================================================================== */ /* THE WIRED BAND NEEDS A GROUND OF ITS OWN. Until CONNECT_NEWSLETTER_URL existed this component had only ever rendered its placeholder, and the ONLY background in this file was the lime one on --placeholder. So the moment the Adestra URL landed, every band on the site turned into a line of text and a button floating on white - no band at all, and the border-radius above had nothing to round. --cn-panel-blue, the token already carrying Most Read, the Data pull-outs and the Related Research panel. Not lime: that is --cn-ph-ad, the "not built yet" colour, and using it for live content would tell the reader the opposite of the truth. Not navy either - the full-width band closes the page directly above the navy footer, and two navy blocks 48px apart read as one, which is the same mistake this file already documents about two lime blocks. The artboards give the band no internal design, so this is the smallest choice that is still a choice: an existing panel token, the navy ink already set on the lede, and the deep-blue CTA button the Forthcoming Events card uses on its own light ground. */ .cn-newsletter { display: flex; align-items: center; justify-content: center; gap: var(--cn-space-6); width: 100%; padding-inline: var(--cn-space-6); /* SQUARE. Same call as the Forthcoming Events card: the boards draw the band with square corners on every page it appears (p1 y=3939 is a plain rectangle at 4x); the 12px radius was ours. */ border-radius: 0; background: var(--cn-panel-blue); } /* min-height, not height. The measured value is what the artboard reserves, but a longer lede or a wrapped button must be allowed to grow the band rather than spill out of it. */ .cn-newsletter--column { min-height: 96px; } /* THE FULL BAND NEEDS AIR ABOVE IT - AND IT WAS GETTING TWICE TOO MUCH. It closes the page directly under the two-column grid, and with margin 0 it sat FLUSH against whichever column ran longer. Re-measured on the boards - ink above to band top, inside the band's own x span - the gap is remarkably consistent and it is NOT 40: p3 article 33.6 p9 in-depth 33.6 p10 magazine 36.0 p13 research 28.8 p14 report 39.6 p1 home 33.6 p12 rail 36.0 Mean 34.5. --cn-space-8 is 32 at 1440 and sits inside that spread; --cn-space-10 is 40 and sits above all but one of them. BUT THE TOKEN WAS NEVER THE PROBLEM. #cn-main is display:block, so this margin COLLAPSES with the bottom margin of whatever precedes the band - and what precedes it is usually .cn-section--ruled carrying --cn-space-20, 80px. max(80, 40) = 80. Measured live on the In-depth reader: 80px against the board's 33.6, and the band's own 40 doing nothing at all. So the rule below zeroes the preceding element's bottom margin, which lets this one actually decide the gap. Scoped to direct children of the container and to --full, so nothing in a rail or a section is touched. Not applied to --column or --third: those sit inside a rail or a section that carries its own rhythm. */ .cn-newsletter--full { min-height: 61px; margin-top: var(--cn-space-8); } .cn-container > :has(+ .cn-newsletter--full) { margin-bottom: 0; } /* Third width. p7 puts the band INSIDE the rail at 448.5 x 133.7, where the Article and News readers give it the full 1256. It is taller because the rail is narrow, so the lede and the button stack rather than sitting side by side. */ .cn-newsletter--rail { flex-direction: column; gap: var(--cn-space-4); min-height: 134px; padding-block: var(--cn-space-6); text-align: center; } .cn-newsletter__lede { margin: 0; font-size: var(--cn-text-card); font-weight: var(--cn-fw-semibold); color: var(--cn-ink); } /* ------------------------------------------------------- placeholder --- */ /* Artboard state. Renders until the Adestra action is supplied, so the page is reviewable at the right size before the wiring lands. MUST NOT SHIP. Check with: grep -rn "cn-newsletter--placeholder" src/main/webapp/WEB-INF/views/connect2026/ */ .cn-newsletter--placeholder { background: var(--cn-ph-ad); color: var(--cn-ink-invert); font-size: var(--cn-text-card); font-weight: var(--cn-fw-semibold); text-align: center; } /* =========================================================== RESPONSIVE == */ /* The full-width variant is 61px tall because at 1256px the lede and the button sit side by side. Once they stack, that height is wrong and would clip - so release it and let the band size itself, keeping the 44px tap target on the button. */ @media (max-width: 767px) { .cn-newsletter { flex-direction: column; gap: var(--cn-space-4); padding-block: var(--cn-space-6); text-align: center; } .cn-newsletter--column, .cn-newsletter--full { min-height: 0; } } /* ====================================================== THE DIALOG === */ /* The signed-in sign-up (newsletterDialog.tag): the gate's shell, with a small form inside - two names on one row, then email, then company. Inputs follow the search box's shape so the two forms on the site match. */ .cn-newsletter-form { margin-top: var(--cn-space-4); } .cn-newsletter-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cn-space-4); } .cn-newsletter-form__field { display: block; margin-bottom: var(--cn-space-4); } .cn-newsletter-form__label { display: block; margin-bottom: var(--cn-space-1); font-size: var(--cn-text-meta); font-weight: 600; color: var(--cn-ink); } .cn-newsletter-form__optional { font-weight: 400; color: var(--cn-ink-muted); } .cn-newsletter-form__input { display: block; width: 100%; min-height: 44px; padding: 0 var(--cn-space-4); font: inherit; font-size: var(--cn-text-body); color: var(--cn-ink-body); background: var(--cn-surface); border: 1px solid var(--cn-border); border-radius: var(--cn-radius-md); } .cn-newsletter-form__input:focus-visible { outline: 2px solid var(--cn-cyan); outline-offset: 1px; } /* One line for "Subscribing..." or an error. Collapsed while empty: the reserved row read as a 70px hole between Company and Subscribe, and a centred dialog growing by one line is no jump worth that. */ .cn-newsletter-form__note { margin: 0 0 var(--cn-space-2); font-size: var(--cn-text-meta); line-height: var(--cn-lh-body); color: var(--cn-ink-muted); } .cn-newsletter-form__note.is-error { color: var(--cn-danger, #b42318); } .cn-newsletter-form__note:empty { display: none; } .cn-newsletter-form__alt { font-size: var(--cn-text-meta); align-self: center; } .cn-newsletter-dialog.is-busy .cn-newsletter-form__input { opacity: .7; } @media (max-width: 480px) { .cn-newsletter-form__row { grid-template-columns: 1fr; gap: 0; } }