/* Header top bar — yellow announcement strip above .rw-header. Figma 1166:4609 (desktop) / 1166:5301 (mobile). */ .rw-topbar { background: #FFCE03; color: var(--rw-color-primary-green, #093B4D); font-family: var(--rw-font-text); } .rw-topbar__inner { min-height: 2.5rem; /* 40px */ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; padding-block: 0.375rem; } .rw-topbar__eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--rw-font-mono); font-weight: 500; font-size: 0.875rem; line-height: 0.875rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--rw-color-grey-01, #646971); } .rw-topbar__dot { display: inline-block; width: 11px; height: 11px; background: var(--rw-color-primary-green, #093B4D); border-radius: 1px; } .rw-topbar__body { font-size: 0.875rem; line-height: 1rem; letter-spacing: -0.012em; color: var(--rw-color-primary-green, #093B4D); } .rw-topbar__link { font-weight: 600; font-size: 0.875rem; line-height: 0.875rem; color: var(--rw-color-primary-green, #093B4D); text-decoration: underline; text-underline-position: from-font; } .rw-topbar__link:hover { opacity: 0.85; } /* Overlay-header pages: the header is absolutely positioned at top:0 of . Push it below the topbar so they don't stack. JS/CSS pin state (fixed top:0) keeps default behaviour after scroll. */ body.has-overlay-header .rw-header:not(.is-pinned) { top: 2.5rem; } @media (max-width: 767px) { .rw-topbar__inner { flex-direction: column; gap: 0.25rem; padding-block: 0.75rem; text-align: center; } .rw-topbar__body, .rw-topbar__link { display: inline; } body.has-overlay-header .rw-header:not(.is-pinned) { top: auto; } }