/* Announcement bar (global, suppressed on waitlist pages) + news/blog article. Scoped + self-contained so the whole feature is easy to remove later. */ /* --- Announcement bar ------------------------------------------------------- Sits above the sticky header in normal flow; scrolls away on scroll. Scoped under #announcement-bar (specificity 1,x,x) so the theme's global text-color / display rules can't override the white-on-black treatment. */ #announcement-bar.announcement-bar { position: relative; display: flex; align-items: center; justify-content: center; gap: 1rem; /* Force full viewport width: the bar is a flex-item of and was shrink-wrapping to its content width (~710px) and pinning left. */ width: 100%; align-self: stretch; box-sizing: border-box; background: #111; color: #fff; font-family: "Archivo", sans-serif; font-size: 0.78rem; font-weight: 500; line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.7rem 2.75rem; text-align: center; } #announcement-bar .announcement-bar__link { display: inline-flex; align-items: center; justify-content: center; /* center content even if the is stretched full-width by theme rules */ flex-wrap: wrap; gap: 0.55rem; color: #fff; text-decoration: none; } #announcement-bar .announcement-bar__text, #announcement-bar .announcement-bar__cta { color: #fff; display: inline; } #announcement-bar .announcement-bar__cta { text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; } #announcement-bar .announcement-bar__link:hover .announcement-bar__text { text-decoration: underline; text-underline-offset: 2px; } #announcement-bar .announcement-bar__close { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); background: none; border: 0; color: #fff; font-size: 1.25rem; line-height: 1; padding: 0.25rem 0.5rem; cursor: pointer; opacity: 0.65; } #announcement-bar .announcement-bar__close:hover { opacity: 1; } @media (max-width: 600px) { #announcement-bar.announcement-bar { font-size: 0.66rem; padding: 0.62rem 2.4rem; letter-spacing: 0.04em; } #announcement-bar .announcement-bar__cta { display: none; } } /* --- News / blog article ---------------------------------------------------- */ .news-article { max-width: 46rem; margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) 1.25rem 6rem; font-family: "Archivo", sans-serif; color: #1a1a1a; } .news-article__eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; font-weight: 600; color: #8a8a8a; margin: 0 0 1rem; } .news-article__title { font-size: clamp(1.9rem, 4.5vw, 2.9rem); line-height: 1.08; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 0.85rem; } .news-article__meta { font-size: 0.82rem; color: #8a8a8a; margin: 0 0 2.25rem; padding-bottom: 2rem; border-bottom: 1px solid #ececec; } .news-article__lede { font-size: clamp(1.1rem, 2.2vw, 1.28rem); line-height: 1.6; color: #333; margin: 0 0 2.25rem; } .news-article h2 { font-size: clamp(1.2rem, 2.6vw, 1.55rem); line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; margin: 2.75rem 0 0.95rem; } .news-article p { font-size: 1.05rem; line-height: 1.72; margin: 0 0 1.25rem; } .news-article strong { font-weight: 600; } .news-article__signoff { margin-top: 2.75rem; padding-top: 2rem; border-top: 1px solid #ececec; font-style: italic; color: #555; }